[SOLVED] Fixed Height and Fixed Width Resolution Policy has no difference?

Cocos Creator
#1

Hi all,

A beginner here to Cocos2d-JS. I am currently using Cocos Creator and am trying to learn about design resolutions. I read this thread What is design resolution?, which has been mighty useful. However, when I am doing my own experiments on Cocos Creator I run into some unexpected results. My setup is below:

Canvas:
Design resolution: 640 x 200 (W x H)
Fit Height not selected.
Fit Width selected (So I guess I am using cc.ResolutionPolicy.FIXED_WIDTH)

Preview Resolution: 640 x 360 (WxH)

I expect for the canvas content to fill up the preview screen (at the scale of 1 for x-axis), width-wise but there would be black borders on the top part of the screen as the height of the design resolution is not enough for the screen. But to my surprise, the preview came out as though Fit Height has been selected - that is the screen is fitted height-wise and there is no black borders in the preview screen.

Selecting Fit Height produced what I would have expected. Black borders only appear when I select both Fit Height and Fit Width, which is again expected.

When I changed my setup to be:
Canvas:
Design resolution: 200 x 640 (W x H)
Fit Height selected
Fit Width not selected

Preview Resolution: 360 x 640 (WxH)

I get the same result on the preview as if Fit Width has been selected - the canvas content fitted all of the screen although I expected black borders at the sides of the screen as width shouldn’t be scaled.

Is this how it is supposed to be? if not, what am I missing?

I even tried manually setting this in script in the onLoad function:
cc.view.setDesignResolutionSize(640, 200, cc.ResolutionPolicy.FIXED_WIDTH);
But there wasn’t any difference.

#2

You should use fit width for this case, please see http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/ui/multi-resolution/ for details.

#3

Hi @jare,

I went through that document already but unfortunately the expectation that I get from it does not match what I am seeing in my project.

As I mentioned earlier on, I did an experiment like this:
Canvas size - 960 x 640
Fit width selected.

But when I do a preview with with preview resolution 960x700, I expected to have black borders on the top and bottom of the preview screen as the height should not have fit. But there are no black borders. The canvas fitted into the preview screen as though fit height has been selected.

Why? Am I misunderstanding something here?

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

It is because your background sprite have a widget attached.

#5

@jare Yes, you are completely right. Once I deactivated the widget on the background sprite, then the resolution sizing on the screen became as what I expected.

I never thought of that!

Thanks very much. :slight_smile:

Edit: I think it should be mentioned in guides or something that having widget can potentially override resolution policies, for greater clarity to the developers.

#6

haha, thanks for your recommendations