cocos2dx - v2.3.3編輯器簡單使用及不同分辨率適配

准備工具

　　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就做的嗎？？？

 

至此，游戲有了一個狀態欄，具體的大小位置，根據上述可以再各自調整哈~