[SOLVED] How to get size of drawable area of view?

cocos2d-x JavaScript
#1

Hi all,

I have a task here that I would like to achieve, but cannot seem to find the right API to use.

I want to get the size of the drawable viewport, or the view that has my content rendered it in. Example is this: I have a canvas at design resolution 480x320.

If I use FIT_HEIGHT as my resolution policy and then view my project from in a 854x480 screen, then I am going to get black borders at the sides of my screen as the canvas width is not going to be able to fit. Now, how do I get the drawable area of my screen view - which is my original canvas at a scaled size to fit height-wise, and not taking into account the black borders at the sides of the screen?

For greater clarity, here is a picture to illustrate what I mean:

Is there any API to achieve this easily? I tried a few as below, but none of them returned me the result that I wanted.
cc.Node.getContentSize() //--> returns the original size of canvas cc.director.getVisibleSize() //--> returns the original size of canvas cc.director.getWinSize() //--> returns the original size of canvas cc.director.getWinSizeInPixels() // --> returns the original size of canvas cc.view.getFrameSize() //--> returns my screen size

I would like to achieve this on both web and mobile versions of my app.

Thanks!

1 Like
#2

I’m not sure about this, but try: cc.director.getOpenGLView().getViewPortRect()

#3

Thanks @grimfate. I tried that, but seems like that’s the same as cc.view.getFrameSize() which returns the screen size (i.e, it includes the black borders)

Or, instead of the screen size, is there any API or properties that will return me the scale factor used to on the original canvas to fit the current screen?

#4

That’s odd. For me, when I was testing this, if I had black bars then the frame size and view port size returned different values, values that seemed to reflect the difference in window size and canvas size.

cc.director.getOpenGLView().getScaleX() and cc.director.getOpenGLView().getScaleY() seems to get the scale for me, although if getViewPortRect() doesn’t work for you then these functions might not work either.

#5

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! :slight_smile:

Thanks again for the help!

#6

Well, that’s good.

I was trying this on Web and the Creator simulator, but I was using both “fit width” and “fit height”. I can’t seem to get black bars to appear with just “fit height”. I haven’t used Creator much so not sure why I’m not getting black bars if you are.

#7

Could it because there is a widget component on your background node?

Apparent that will override the resolution policy. I ran into the same problem a few days ago - see this thread here.

#8

No idea, so I’ll leave it until I bother to learn how to use Creator lol thanks for the link, though. I may need it one day.

#9

In case someone is looking for an effective way

cc.winSize

will return something like

{width: 960, height: 640}
1 Like