Scaling and spacing according to screen size

Cocos Creator
1

Hi,

If I create a layout with 3 nodes in it and I set the layout Type to be VERTICAL then is there a way to set the Spacing Y to be 20% of the screen size (cc.winSize.height) or will I have to set this manually by code in a script?

I don’t want a fixed pixel size of spacing. I would imagine setting a percentage of the screen would be better so the content is spaced out properly between small to big size screens. If it is a fixed spacing size then I think it would not be spaced out well on a big device and spaced out too much on a small device.

Same goes for scaling. If I have 3 buttons placed vertically in a layout (or without a layout) I would like to scale my nodes according to the screen size. So small screens would have a small/normal size button and users of big screen devices would see a big button.

I am able to scale these in a script like this

onLoad: function () {
    var nodeScale = (cc.winSize.height * this.nodeHeightPercent) / this.node.height;
    this.node.setScale(nodeScale);
},

but I’m wondering if there is an easier way to do so in Creator?

Thanks!

1 Like
2

Did you take a look to the widget component?
Here the links of the documentation:
http://cocos2d-x.org/docs/editors_and_tools/creator-chapters/components/widget/index.html
http://cocos2d-x.org/docs/editors_and_tools/creator-chapters/ui/widget-align/

3

Ya I did consider the widget component and it is super useful.

That somewhat takes care of the alignment. But then each node would be aligned with reference to the edge of the screen not with reference to the node above/below it. Which isn’t a bad thing.

It doesn’t solve the scaling matter though. I guess I can just use my script to scale each node.
@pandamicro any thoughts?

**NOTE: my buttons are images/sprites with an icon and text as part of the image. Should I make a blank button with a label as a child of the button instead? Is that better?

4

Sorry I haven’t practice very often with our UI system, @nantas2 @owen do you guys have any suggestions?

5

@efares

If you want to use Button, it’s good to not reinvent the wheel, just use the Button component.
And in Creator, we have made some prefabs which could create the correct node and hierarchy with a label as child of the button.

For the spacing issue of Layout, I will discuss with @nantas2