Cocos2d-x 3.9教程：10.使用CocosStudio的UI編輯器從UI檔案中載入佈局和控制元件
Cocos2d-x 3.9教程
10. 使用CocosStudio的UI編輯器從UI檔案中載入佈局和控制元件
1.1. 使用CocosStudio的UI編輯器
1.1.1. 安裝和啟動
從官網上下載2015年11月18日版本，Cocos studio 2.3.3。
安裝完畢後，桌面出現兩個圖示。
Cocos Studio是我們的UI、動畫等編輯器。Cocos是專案管理器，且它集成了網路共享資源、素材、開原始碼（或付費程式碼）的store。
啟動Cocos，新建一個cocos專案，然後會自動啟動Cocos Studio：
介面的構成和相關基礎知識，詳見官方線上文件說明：
http://www.cocos.com/doc/article/index?type=Cocos%20Studio&url=/doc/cocos-docs-master//manual/studio/v4/chapter3/Editor/UIOverview/zh.md
1.1.2. 編輯介面
然後我們從左邊的“控制元件”視窗中，拖拽過來一個“圖片”ImageView和一個“按鈕”Button：
然後在加入的ImageView控制元件上面點選右鍵，點選“設定圖片資源”，按鈕控制元件有3種狀態，對應這3種狀態也設定3張圖片，效果如下：
1.1.3. 調整控制元件的位置、大小布局
首先調整ImageView，點選圖片控制元件，右側的屬性視窗會將其所有配置屬性顯示出來：
名稱一項是可以編輯的，其中的名字可以在cocos2d-x中，用Node的getChildByName()方法獲取該物件，進行進一步操作。
下面一項一項進行說明：
1.位置與尺寸
位置與尺寸，主要是形容控制元件相對於其父容器的位置和尺寸。常用於元件在不同規格裝置上的佈局。
在其中可以方便的修改錨點、座標和尺寸。
需要注意的是，通過UI編輯器，可以設定某個控制元件的“相對尺寸”和“相對位置”，這個是程式碼方式所不具備的（程式碼需要自行根據螢幕尺寸和位置等計算出控制元件的大小、位置）。
1)更改位置：
座標改為百分比，意味著其座標相對父容器的位置：
如上圖我們改成了x：50%、y：50%，則意味著無論父容器怎麼變化，該控制元件都會位於中心：
2)更改尺寸
跟位置類似，我們可以把當前元件的寬、高畫素數修改為百分比，修改後理論上元件的大小會保持與其父容器的寬高比不變。但目前實際效果不佳，比如設定為寬100%、高100%，並未實現全部覆蓋。效果如下：
設定：
結果：
經過研究發現，在“常規”選項中，縮放屬性需設定為寬、高100%，此時再設定“位置”和“尺寸”即可實現全屏覆蓋。
注意，一定不要通過滑鼠的拖拽來實現控制元件的縮放！滑鼠拖拽只會改變控制元件的scale，而不是contentSize！
3)固定和拉伸
首先，還是要確保“常規”中的寬、高縮放都是100%。
固定和拉伸是用圖形化的方式，來確定元件對其父容器左右上下邊界的相對大小和位置的。
開啟左邊或右邊僅一個圖釘時，會按照輸入的畫素距離來進行左右對齊，比如開啟左邊圖釘，並輸入50。意味著無論介面怎麼變化，當前元件的左邊總是離其父容器左邊50畫素。效果如下：
即便修改了元件的尺寸和父容器的尺寸，左邊距離依然是50畫素。效果如下：
方框中的十字箭頭，表示是否保持控制元件的寬、高和其父容器的寬、高比例來拉伸控制元件。如開啟左右拉伸箭頭，則無論視窗怎麼變化，控制元件的左右寬度會保持比例不變。
固定左右拉伸：
結果：
4)“位置、尺寸”和“固定、拉伸”選項的衝突。
在設定了“位置、尺寸”的數值時，已經確定了控制元件的屬性，但此時修改“固定與拉伸”必然會有衝突。所以一定要注意，兩種控制手段的衝突和配合。
比如比如我們設定了控制元件的座標x值為50%（位於中心），但打開了左側的圖釘，固定其左側與父容器左側的距離時。座標的x值就會被變為畫素數。
再比如我們設定了控制元件的“尺寸”的X值為75%，但我們打開了左右的固定尺寸箭頭來固定控制元件的寬度和父容器的比例。此時，“尺寸”中的X值會變為畫素數！
重要總結：
“位置與尺寸”中的“尺寸”指的是Node的contentSize，而“常規”選項中的“縮放”指的是Node的scaleX、scaleY。根據Node的設計，scale的值無論怎麼變化，其contentSize的值是不會變的！但是造成的介面效果會產生“大小不對”、“位置不對”，因此一定要注意，一般情況下我們應當保持“縮放”中的X、Y比例為100%！
2.常規
常規選項主要是針對元件自身的一些“表象”屬性，比如縮放、旋轉、透明度、可見性、互動性等。
可見性：即Node的setVisible()方法，設定可見與否。
互動性：即Node的setTouchEnabled()方法，設定是否能夠響應觸控事件。
邏輯標籤：即Node的tag屬性，用於標示一個節點。
縮放：即Node的scaleX和scaleY屬性。
旋轉：即Node的_rotation屬性。
不透明度：即Node的setOpacity()。設定透明性。
顏色：即Node的setColor()。
翻轉：把節點進行左右翻轉或上下翻轉。實際上是通過Widget的setFlippedX和setFlippedY來修改X、Y軸上的翻轉。本質上是給Node的scaleX和scaleY各乘了個-1。
3.九宮格
跟前面章節中所說的九宮格一致。即把當前Node的可見部分，進行九宮格處理。
比如我們給一個按鈕開啟了九宮格，那麼按鈕在尺寸變化後，其四個角的內容能夠進行保留：
原始樣式：
上下尺寸變大：
4.特性
針對不同的元件，特性頁面裡的屬性不同。
如ImageView的特性頁面只有圖片資源一項：
而Button的特性頁面如下：
5.高階屬性
高階屬性主要是在編輯器中設定元件的資訊，在cocos2d-x中能夠通過程式碼獲得其各種資訊（回撥、幀事件資料和使用者資料）。
1)回撥方法：
回撥方法下拉框中，有3個選項。
無表示未設定回撥方法名稱。
Touch表示設定了Touch事件的回撥方法，比如我們自己給回撥方法起個名字myOnTouch：
那麼，按照官方教程，我們可以在cocos2d-x專案中，新建一個類，該類必須遵循如下要求：
a.繼承WidgetCallBackHandlerProtocol和Node(或其他繼承自Node的類)
b.重寫如下介面：
onLocateTouchCallback
onLocateClickCallback
onLocateEventCallback
詳細過程參見官方教程：
http://www.cocos.com/doc/article/index?type=cocostudio&url=/doc/cocos-docs-master//manual/studio/v4/chapter3/Directory/../HowToCode/Directory/../CallBack/zh.md
比如我們上述過程中綁定了Touch事件，並給其回撥命名為myOnTouch，那麼我們在程式碼中的關鍵響應程式碼為：
Widget::ccWidgetTouchCallback MyClass::onLocateTouchCallback(const string &callBackName)
{
if (callBackName == "myOnTouch")//判斷事件名，返回對應的函式。下同
{
return CC_CALLBACK_2(MyClass::myOnTouch, this);
}
return nullptr;
}
void MyClass::myOnTouch(cocos2d::Ref* object, cocos2d::ui::Widget::TouchEventType type)
{
CCLOG("onTouch");
}
Click事件也類似。
2)幀事件：
幀事件為對每個UI編輯器中的元件，可以新增動畫，對動畫的每一幀（一般我們設定幾個關鍵幀），可以繫結一個數值，然後在程式碼中響應動畫時，在動畫播放到關鍵幀時，可以回撥我們的方法並獲取在UI編輯器中對該幀繫結的數值。具體過程後續章節再予討論。幀事件官方手冊地址：
http://www.cocos.com/doc/article/index?type=cocostudio&url=/doc/cocos-docs-master//manual/studio/v4/chapter3/Directory/../Editor/UIOverview/../../Animation/AddFrameEvents/zh.md
3)使用者資料：
在UI編輯器中給當前元件繫結一個自定義的資料資訊。然後在cocos2d-x中，可以通過方法來獲取該物件的附加資訊。
首先，在UI編輯器中新增使用者資訊：
然後根據官方手冊，cocos2d-x3.8之前和3.8之後的版本，各有一種類似的方法來獲取使用者資料：
Cocos2d-x3.8（不含）之前版本：
#include "cocostudio/CocoStudio.h"
#include "cocostudio/CCObjectExtensionData.h"
//找到UI編輯器中的父容器
Node * fileScene = CSLoader::createNode("res/MainScene.csb");
//通過tag找到imageView控制元件
Node * imageView = fileScene->getChildByTag(11);
//獲取該元件的ObjectExtensionData
cocostudio::ObjectExtensionData * extnData = (cocostudio::ObjectExtensionData*)(imageView->getUserObject());
//通過ObjectExtensionData獲取使用者資料
auto userData = extnData->getCustomProperty();
CCLOG(userData.c_str());
Cocos2d-x3.8及其以後的版本：
//包含標頭檔案
#include "Cocos Studio/CCComExtensionData.h"
.....
//根據控制元件的Tag獲取button控制元件
auto button = _rootNode->getChildByTag("XXX");
//在程式碼裡面先獲取到button，getComponent()，並把獲取的物件強轉為Cocos Studio::ComExtensionData* 指標，再呼叫getCustomProperty()
ComExtensionData* data = dynamic_cast<ComExtensionData*>(child->getComponent("ComExtensionData"));
auto userdata = data->getCustomProperty();
CCLOG("%s", userdata.c_str());
除錯模式控制檯輸出結果：
1.2. 匯出UI檔案
本章節內容實在cocos studio2.3.3版下，進行操作的。
首先，編輯完UI介面之後，點選選單欄的“專案”-》“釋出與打包”：
選擇“設定”，設定釋出的UI資料格式和路徑：
我們根據提示，在cocos2d-x中使用csb檔案格式釋出，效率高。路徑選擇到我們在cocos2d-x中建立的專案“abc”的“Resources”資料夾，預設的會在其中再建立一個“res”資料夾，在其中釋出UI編輯器生成的資源。
檔案的組成：我們在UI編輯器中，拖入了一個ImageView和一個Button控制元件：ImageView繫結的是HelloWorld.png，Button控制元件繫結的是Button.png。我們在cocos studio中預設的主容器，名叫MainScene.csd，打包生成後變為csb檔案。
1.3. 在程式碼中載入UI檔案並獲取子物件
在上述打包成功之後，我們在cocos2d-x專案中，很容易用程式碼載入並使用：
#include "cocostudio/CocoStudio.h"
//找到UI編輯器中的父容器
Node * fileScene = CSLoader::createNode("res/MainScene.csb");
//通過tag找到imageView控制元件
Node * imageView = fileScene->getChildByTag(11);
//通過UI編輯器中的“名稱”找到元件
//Button * button = (Button*)fileScene->getChildByName("Button_1");
////通過UI編輯器“常規”選項中的“邏輯標籤”（也就是Node的tag）找到元件
Button * button = (Button*)fileScene->getChildByTag(4);
button->setPressedActionEnabled(true);
button->addClickEventListener(CC_CALLBACK_1(HelloWorld::onButtonClicked, this));
this->addChild(fileScene);
void HelloWorld::onButtonClicked(Ref* pSender)
{
CCLOG("button clicked!");
}