cocos2dx

准备工具

　　Cocos 引擎当前最新版本：v2.3.3       官网下载地址: http://www.cocos.com/download/

　　前述:cocos自带UI编辑器在最新的版本有了很大的改动，整合了动画相关成为一个新的引擎工具。甚至用法都做了相当改变，这里简单讲几个常用的实现。

UI项目

　一、新建

　　　用Cocos Studio工具新建一个状态栏项目。如下图:

　　　　

二、预览 

　　在新的编辑器，可以轻松看到效果，选中MainScene.csb，同时点击如下调试按钮即可看到效果。

　　　　　　

　　下图中 在编辑器的左上角的分辨率及横向纵向，可以轻松查看不同的分辨率下UI的显示。

　　　　　　

 三、新建Layer窗口

　　选择文件->新建文件　　可以选择新建的类型，新建一个Layer层窗口，改名为BattleWnd,方便我们之前新建游戏的使用。

　　　　

 　　添加资源等不在细述，我们直接用现有的Demo中资源来测试，选中PlayerStats->TopBar ->右键 -> 复制 。如下图

　　　　

　　回到BattlerWnd, 右键Layer -> 黏贴。 可以看到效果图中，UI被拉伸了

　　　　

　　选中TopBar,对其属性进行调整

　　　　

　　将尺寸改为按像素设置，而不用原来的根据父节点的比例设置，并设置UI设计时的大小(640,150)，然后再调回比例显示尺寸。 同时对下面UI排列的上和左选中，表示向上对齐，向左对齐。

　　为了方便游戏使用，将状态栏的内容去掉一些，同时调整下位置。

　　　　　　

　　这样一个简单的UI界面就制作好了。

四、导出到项目

　　点击项目->发布与打包->发布资源，在res目录看到如下文件，导出目录也可以自己做修改

　　　　

　　 

 　　实际应用中，复制BattlerWnd.csb及MainMenu,Common目录到游戏Resource目录下。

注意: 导出的文件的相对路径需要始终保持一致，不然加载资源会有问题。

回到项目中,在对应地方添加如下代码

　　

#include "cocostudio/CocoStudio.h" 
///////////////////////////////////////////////////
     m_pRootNode = CSLoader::createNode("BattlerWnd.csb");
    if (!m_pRootNode)
    {
        return false;
    }
    // 层级在最上层
    this->addChild(m_pRootNode, 2);    

显示如下

　　

 看起来一切都很好了？？？试试不同分辨率看下，在AppDelegate.cpp中，调整 designResolutionSize大小。

　　

发现不同分辨率下，状态栏并没有靠左靠右对其，而是始终在我们设计UI时的固定位置。这时候无比怀念上个版本的自适应分辨率选项，在编辑器上做了各种调整发现都不能有效。

最后才发现原来是要添加下面这段代码！！！

#include "ui/CocosGUI.h"
/*--------------------------*/
auto visibleSize = Director::getInstance()->getVisibleSize();    //根据设计 显示的实际大小
m_pRootNode->setContentSize(visibleSize);
ui::Helper::doLayout(m_pRootNode);

效果如下:

　　

位置终于回来了，然后这不该在加载csb就做的吗？？？

至此，游戏有了一个状态栏，具体的大小位置，根据上述可以再各自调整哈~