Hi @grimfate
Thanks again for pointing out the API. Did you test it out on a mobile platform(ios/android?) or web platform?
I did a quick experiment and console.log-ed out the output. Just sharing it here fyi:
My setup:
Canvas design resolution: 480x320 (has just a bg node with single pixel sprite to give blue background)
Fit Height Policy used.
On Web
My preview resolution (using Cocos Creator): 854x480
cc.view.getFrameSize(): {"width":854,"height":480}
project.js:1 this.node.width [canvas]: 569.3333333333334
project.js:1 this.node.height [canvas]: 320
project.js:1 this.node.getContentSize() [canvas]: {"topLeft":{"x":0,"y":320},"topRight":{"x":569.3333333333334,"y":320},"top":{"x":284.6666666666667,"y":320},"bottomLeft":{"x":0,"y":0},"bottomRight":{"x":569.3333333333334,"y":0},"bottom":{"x":284.6666666666667,"y":0},"center":{"x":284.6666666666667,"y":160},"left":{"x":0,"y":160},"right":{"x":569.3333333333334,"y":160},"width":569.3333333333334,"height":320}
project.js:1 cc.director.getVisibleSize(): {"width":569.3333333333334,"height":320}
project.js:1 cc.director.getWinSize(): {"width":569.3333333333334,"height":320}
project.js:1 cc.director.getWinSizeInPixels(): {"width":569.3333333333334,"height":320}
project.js:1 cc.director.getOpenGLView().getViewPortRect( : {"x":0,"y":0,"width":854,"height":480}
project.js:1 cc.director.getOpenGLView().getScaleX(): 1.5
project.js:1 cc.director.getOpenGLView().getScaleY(): 1.5
On Android
View resolution (Samsung S6): 2560x1440
10-06 10:52:28.571 11302 11318 D cocos2d-x debug info: cc.view.getFrameSize(): {“width”:2560,“height”:1440}
10-06 10:52:28.571 11302 11318 D cocos2d-x debug info: this.node.width [canvas]: 569
10-06 10:52:28.571 11302 11318 D cocos2d-x debug info: this.node.height [canvas]: 320
10-06 10:52:28.571 11302 11318 D cocos2d-x debug info: this.node.getContentSize() [canvas]: {“topLeft”:{“x”:0,“y”:320},"
topRight":{“x”:569,“y”:320},“top”:{“x”:284.5,“y”:320},“bottomLeft”:{“x”:0,“y”:0},“bottomRight”:{“x”:569,“y”:0},“bottom”:
{“x”:284.5,“y”:0},“center”:{“x”:284.5,“y”:160},“left”:{“x”:0,“y”:160},“right”:{“x”:569,“y”:160},“width”:569,“height”:320
}
10-06 10:52:28.571 11302 11318 D cocos2d-x debug info: cc.director.getVisibleSize(): {“width”:569,“height”:320}
10-06 10:52:28.571 11302 11318 D cocos2d-x debug info: cc.director.getWinSize(): {“width”:569,“height”:320}
10-06 10:52:28.571 11302 11318 D cocos2d-x debug info: cc.director.getWinSizeInPixels(): {“width”:569,“height”:320}
10-06 10:52:28.571 11302 11318 D cocos2d-x debug info: cc.director.getOpenGLView().getViewPortRect( : {“x”:-0.25,“y”:0,"
width":2560.5,“height”:1440}
10-06 10:52:28.571 11302 11318 D cocos2d-x debug info: cc.director.getOpenGLView().getScaleX(): 4.5
10-06 10:52:28.571 11302 11318 D cocos2d-x debug info: cc.director.getOpenGLView().getScaleY(): 4.5
In both cases, all the screen/viewport related APIs did not return me the expected canvas width without the borders (width x scaleX). Also, I’m not sure why my canvas’s node width changed to 569 instead of 480…
But the good news is I can now calculate the scaled width without borders myself as cc.director.getOpenGLView().getScaleX() and cc.director.getOpenGLView().getScaleY() seems to be functioning!
Thanks again for the help!