[HTML5] cc.ResolutionPolicy.SHOW_ALL 상태에서 비율대로 꽉차지 않을때.

엔진버전 : 3.17.2

작업을 진행하다보니 왠만하면 꽉차지만, 몇몇 상황에서 오른쪽에 1픽셀정도 화면사이즈가 부족한 경우가 있었다.

화면대응을 위해  Fixed width, 혹은 height를 사용한 경우는 그러지 않았지만,

ShowAll의 경우는 그 경우가 보였는데,

이번에 디자인사이즈가 매우 커지면서 1픽셀 수준이 아니어서, 그냥 넘기기에는 불편한 상태가 되었다.

(게임배경색과 html페이지 배경색이 다를 경우 확인 가능)

원인을 파악하기위해 어디가 문제인지 크롬에서 사이즈 확인 및 엔진소스에 로그를 심어보니 의심가는 구간이 있었다.

예를 들어 디자인처리된 해상도가 가로세로 1920px x 1080px 이라면

로그를 찍어 확인해보니 뷰박스가 1924px인 상태였던 것.

뷰박스는 1924px인데 화면처리는 1920px이니 남은 4px은 빈공간이 되어 남아 보였던 것이다.

하여, 이리저리 확인해보니 뷰박스사이즈를 계산하는 scale값에 오차가 있었음을 확인하였으며,

SHOW_ALL일때, 그리고 디자인사이즈보다 뷰박스의 한변의 크기가 클 경우,

scale값과 vb의 사이즈를 수정하도록 코드를 추가하였다.

CCEGLView.js의 setDesignResolutionSize 함수를 수정하면 된다.

추가된 코드는 아래를 확인하자.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

if (result.viewport) {     var vp = this._viewPortRect,         vb = this._visibleRect,         rv = result.viewport;       vp.x = rv.x;     vp.y = rv.y;     vp.width = rv.width;     vp.height = rv.height;       vb.x = -vp.x / this._scaleX;     vb.y = -vp.y / this._scaleY;       vb.width = cc._canvas.width / this._scaleX;     vb.height = cc._canvas.height / this._scaleY;                  //cubedt edit.     if( resolutionPolicy == cc.ResolutionPolicy.SHOW_ALL || resolutionPolicy == this._rpShowAll ){         if( vb.width > width ){              vb.width = width;              this._scaleX = cc._canvas.width/width;             vb.x = -vp.x / this._scaleX;         }         if( vb.height > height ){              vb.height = height;              this._scaleY = cc._canvas.height/height;             vb.y = -vp.y / this._scaleY;         }     }             //cubedt edit end.     cc._renderContext.setOffset && cc._renderContext.setOffset(vp.x, -vp.y);   } Colored by Color Scripter

cs