(one) UI layout and resolution adaptation

One, Cocos Editor

The automatic layout system mainly deals with fixed and stretched properties:

, you can modify the control's top and bottom left and right four Pushpins and the middle two stretch bars six properties.

Effect

1. When any of these pushpins is opened, the distance between the current node and the parent node is fixed. When the size of the parent node is modified, the distance between the current node and the parent node is always the same.

2. When you open any of these two relative Pushpins, the distance between the current node and the parent node corresponds to a fixed scale. That is, when you modify the size of the parent node, the ratio of the current node to the parent node's two-edge distance is always the same.

3. When the middle of any stretch bar is turned on, such as a transverse stretch bar, the width of the node is fixed to the width of the parent node.

Other

1. When any of these properties are not turned on, the object defaults to the lower left corner position.

2. Currently only control objects (text, fnt fonts are not) and container two types have extruded bar properties.

Ii. related concepts and code settings in the Cocos 2d-x (Cocos Framework)

Design resolution and screen resolution:

First we need to understand two concepts: there are two resolutions in Cocos2d-x: Device resolution, screen resolution. The device resolution is the actual resolution of the platform on which the game is currently running, and the design resolution is the resolution of the game we are designing.

The design resolution is configurable, and our game program is able to "perceive" the resolution size, and our interface is not displayed beyond the area of the section.

Design resolution is typically set at startup

Appdelegate::applicationdidfinishlaunching

, the code is as follows:

Director->getopenglview ()->setdesignresolutionsize (960,640,resolutionpolicy::fixed_height);

(The code above also has a sentence createwithrect this is on the desktop system, the creation of game simulator.) You can modify the device resolution by modifying the two values behind the rect in the inside, but this value is not valid on the mobile device. )

What does this code mean?

The design resolution is set to 960,640, and the Game Interface adjustment scheme is set to a fixed width. But after this setup, the size we get when we get the design resolution behind is not necessarily 960,640. Why is that?

Look at the source code:

Go to the definition of setdesignresolutionsize to see. In the inside made some judgment and assignment, finally called the Updatedesignresolutionsize, continues to go to updatedesignresolutionsize inside, this function part code is as follows:

//1.计算游戏界面在缩放至充满屏幕的情况下X、Y轴的缩放率:_scaleX= (float)_screenSize.width/ _designResolutionSize.width;_scaleY= (float)_screenSize.height/ _designResolutionSize.height;//2.根据设配策略，调整缩放率和设计分辨率:if(_resolutionPolicy== ResolutionPolicy::NO_BORDER){//将X、Y轴缩放值设置为其中的最大者    _scaleX = _scaleY = MAX(_scaleX,_scaleY);}else if(_resolutionPolicy== ResolutionPolicy::SHOW_ALL){//将X、Y轴缩放值设置为其中的最小者    _scaleX = _scaleY = MIN(_scaleX,_scaleY);}else if( _resolutionPolicy == ResolutionPolicy::FIXED_HEIGHT) {    _scaleX = _scaleY;//将X、Y轴缩放值固定为Y轴缩放值，调整设计分辨率的宽度，使设计分辨率的宽度在缩放后依然能够充满屏幕。    _designResolutionSize.width= ceilf(_screenSize.width/_scaleX);}else if( _resolutionPolicy == ResolutionPolicy::FIXED_WIDTH) {    _scaleY= _scaleX;//将X、Y轴缩放值固定为X轴缩放值，调整设计分辨率的高度，使设计分辨率的高度在缩放后依然能够充满屏幕。    _designResolutionSize.height= ceilf(_screenSize.height/_scaleY);}//其他缩放策略：EXACT_FIT不作调整

This code mainly does two things:

1. Calculate the zoom rate of the game interface according to the device resolution and design resolution;

2. Adjust the design resolution.

Based on the above source code, we should be able to understand the meaning of several scaling strategies easily:

The No_border is to scale the game interface proportionally to the full screen, while keeping the design resolution size constant. The upper or lower sides of the game may be cropped.

· The Show_all (Cocos 2d-x default scheme) is to scale the game interface proportionally to one side of the design resolution to resist the screen, while maintaining the design resolution size. There may be black edges on the top or left side of the game.

· The fixed_height is the height of the fixed design resolution, adjusting the width of the design resolution so that the aspect ratio of the design resolution is the same as the length-to-width ratio of the device resolution, and then scales the game interface to full screen.

· Fixed_width, the difference is to keep the width unchanged.

· Exact_fit is the most brutal way to zoom the game interface directly into the full screen, and the x-axis y-axis scaling ratio is not necessarily the same.

So, which option should we choose? Inevitably, we should choose Fixed_height or Fixed_width. Because only these two scenarios, the interface automatically adjusts the size of the design resolution and fills the screen based on the device resolution.

Next, load the interface.

The loading interface is performed in Helloworld::init:

auto rootNode= CSLoader::createNode("MainScene.csb");auto size= Director::getInstance()->getVisibleSize();rootNode->setContentSize(size);ui::Helper::doLayout(rootNode);addChild(rootNode);

In addition to loading the interface with CreateNode and adding it to HelloWorld, two things are done:

• Set the contentsize of the loaded interface, call the Ui::helper on RootNode::d olayout to handle the loaded interface.

• Why is it so designed that it is so much better to be made automatically?

The first reason: inconsistent with the editor, the second reason: The automatic interface is designed to be passive, if it is active, it can cause a lot of performance loss-if each set size to re-traverse the location of all the child nodes, it would be wasted how much CPU time AH.

Effect:

1. Device resolution X/y Relative design Resolution X/y large, set the strategy to a fixed height

1. Device resolution X/y Relative design Resolution X/y large, set the policy to a fixed width

1. Device resolution X/y Relative design Resolution X/Y small, set the strategy to a fixed height

1. Device resolution X/y Relative design Resolution X/Y small, set the strategy to a fixed height

PS: Enum type resolutionpolicy is a convenient default scheme that the framework provides to us. In fact, we can get the device resolution before setting the design resolution, then adjust the design resolution according to the device resolution.

(one) UI layout and resolution adaptation