cocos2dx-v2.3.3 Editor simple to use with different resolution adaptation

Preparation Tools

Cocos Engine Current version: v2.3.3 official website: http://www.cocos.com/download/

Aforementioned: The cocos comes with a great change in the latest version of the UI editor, incorporating animations related to becoming a new engine tool. Even the usage has changed quite a few of the common implementations here.

UI Project

First, the new

Create a new status bar project with the Cocos Studio tool. Such as:

　　　　

Second, preview

In the new editor, you can easily see the effect, check MAINSCENE.CSB, and click the following Debug button to see the effect.

　　　　　　

The resolution in the upper-left corner of the editor and landscape portrait makes it easy to see the display of the UI at different resolutions.

　　　　　　

Third, create a new layer window

　　Select File--new file can choose the new type, create a new layer window, renamed to Battlewnd, convenient for us to use the new game.

　　　　

Add resources and so on is not in the detail, we directly with the existing demo resources to test, select Playerstats->topbar-Right-click Copy. Such as

　　　　

Back to Battlerwnd, right-click Layer--paste. As you can see, the UI is stretched

　　　　

Select Topbar to adjust its properties

　　　　

Change the dimensions to pixel settings instead of the original scale setting based on the parent node, and set the UI design Size (640,150), and then back to scale display dimensions. The upper and left checks for the following UI are also arranged, which indicate upward alignment and left alignment.

To make the game easier to use, remove the contents of the status bar and adjust the position.

　　　　　　

Such a simple UI interface is ready to be created.

Iv. Export to Project

　　Click on the project, publish and package, publish resources, see the following file in the Res directory, export directory can also make their own changes

　　　　

In practical applications, copy the BATTLERWND.CSB and Mainmenu,common directories into the game resource directory.

Note: The relative path of the exported file needs to always be consistent, otherwise loading the resource will be problematic.

Back to the project, add the following code to the corresponding place

　　

" cocostudio/cocostudio.h " ///////////////////////////////////////////////////     M_prootnode = Csloader::createnode ("battlerwnd.csb");     if (! M_prootnode)    {        returnfalse;    }     // hierarchy at the    top  This 2);    

Shown below

　　

Looks like everything's fine??? Try different resolutions to see, in AppDelegate.cpp, adjust the designresolutionsize size.

　　

Found at different resolutions, the status bar is not left-to-right, but always in a fixed position when we design the UI. This time I miss the last version of the Adaptive resolution option, the editor has made a variety of adjustments found can not be effective.

Finally found that the original is to add the following code!!!

" ui/cocosgui.h " /* -------------------------- */  = director::getinstance ()->getvisiblesize ();    // actual size shown according to the design m_prootnode->setcontentsize (visiblesize); Ui::helper::d olayout (m_prootnode);

The effect is as follows:

　　

The position is finally back, and then this should not be done in the loading of CSB???

At this point, the game has a status bar, the specific size of the position, according to the above can be adjusted to each other ha ~

　　

cocos2dx-v2.3.3 Editor simple to use with different resolution adaptation