Cocos2d-x3.0遊戲執行個體之《别救我》第五篇——使用Cocostudio UI編輯器建立操作界面

這一篇内容其實很簡單，已經對cocostudio比較熟悉的朋友就可以随便掃一下了~（小若：熟悉cocostudio的人誰還有空看你的基礎教程呢）

笨木頭花心貢獻，啥？花心？不呢，是用心~ 轉載請注明，原文位址： 文章來源：

首先，去官網下載下傳最新版的cocostudio：

我這篇教程使用的版本是v1.3.0.1，它同一個版本還有3個分支，大家随便選擇一個分支吧：

cocos2d-x3.0遊戲執行個體之《别救我》第五篇-截圖-cocostudio

那個，大家還是選擇v1.3.0.1 + cocos2d-x 3.0那個分支吧~原因？可能它比較順眼吧~（小若：我噗）

好吧，從上到下，三個分支分别作用如下：

1. 純cocostudio工具集

2. 包含cocos2d-x 2.2.3 源碼的cocostudio工具集，支援直接用cocostudio建立cocos2d-x工程

3. 包含cocos2d-x 3.0 源碼的cocostudio工具集，支援直接用cocostudio建立cocos2d-x工程

用cocostudio直接建立cocos2d-x工程我也沒試過，就不誤導大家了~

安裝很簡單，沒有什麼要注意的，大家随意~

打開ui編輯器

ok，現在運作cocostudio程式，出現這樣的界面：

cocos2d-x3.0遊戲執行個體之《别救我》第五篇-cocostudio

選擇第二個，“ui editor”，這就是我們要用的ui編輯器。

開始建立操作界面

好了，ui編輯器的功能還是不少的，一篇教程是講不完的（而且我也沒有完全掌握它的全部功能），本篇教程就通過一個很簡單的ui來介紹一下編輯器的基本用法吧。

建立項目

首先建立項目，我們命名為oprui吧：

然後找到左上角的這個地方：

我們設定一下畫布大小，這個理論上是随大家喜歡的，根據自己的ui來設定大小就可以了（注意不要超過範圍，導緻ui沒法在遊戲中完全顯示）~

但是我個人習慣是，設定成遊戲的設計分辨率大小，這樣比較友善，大家永久了就有自己的習慣了。

ok，我們設定畫布為480*800：

然後ctrl+s，儲存一下…（話說為什麼要儲存一下？不知道…習慣性動作而已）

本篇教程圖檔素材下載下傳位址： 通路密碼 98a9

好，現在導入一下ui要用到的素材，直接把圖檔用滑鼠拖動到ui編輯器最右邊的資源視圖就可以了，如圖：

ok，别忘了我們最初的目的：建立三個操作按鈕，分别對應主角的三種操作。

找到ui編輯器最左邊的控件欄，然後找到按鈕控件，如圖：

可能不太好發現，我稍微多用了一兩個箭頭，大家仔細找找（小若：七個箭頭，它是不是跟你有仇…你是不是怨念太深了啊喂）

好，滑鼠點選然後拖動這個按鈕控件到畫布上，然後，按鈕就建立好了，如圖：

好，這個藍色的按鈕很好看，我很喜歡，是以我們要抛棄它（藍色按鈕：啊咧？）

選擇這個按鈕，然後我們會看到右邊的屬性視圖裡有一大坨屬性，如圖：

這些屬性大部分都能顧名思義，我們先來關注一下用圈圈圈起來的那兩個屬性：

1. 名字：這個名字很重要，通過這個名字，我們可以在代碼中找到這個控件對象

2. 正常狀态：這個就很難顧名思義了，其實它的意思是“按鈕正常狀态的圖檔”

好，我們給按鈕的名字設定為“rightbtn”，然後修改按鈕正常狀态的圖檔，方法很簡單，把之前導進去的圖檔資源，選一張，然後拖到“正常狀态”屬性欄裡就可以了。

如圖：

本來上面這張圖檔我想做成一個gif動畫的，那樣就更加生動了~但是由于一些原因，是以我沒有那麼做。（小若：懶就懶啊，還解釋什麼啊）

然後就會發現，按鈕圖檔已經改變了。

後面的“按下狀态”、“禁用狀态”就先忽略吧。

按照剛剛介紹的方法，我們建立好3個按鈕，如圖：

三個按鈕的名字屬性分别為：leftbtn、rightbtn、quickmovebtn。

（小若：等等，為了那個箭頭可以左右兩邊都有啊？不是隻有一張箭頭圖檔麼？）

一張箭頭圖檔卻建立了不同方向的按鈕，那是因為，按鈕有一個屬性，叫做“水準翻轉”，大家自己找找~

ok，一個完美的ui誕生了（小若：啊咧，放屁！）

是時候導出這個ui了，先ctrl+s儲存一下，一定不要忘了儲存（因為習慣性動作）。

然後ctrl+e導出ui，如圖：

（我噗，好複雜）

大家按照上圖那樣選擇就好了，儲存路徑自己選~

導出使用大圖，意思就是把圖檔打包成一張大圖。

然後，到剛剛導出的檔案夾，我們會看到三個檔案：

exportjson就是ui配置檔案，後面兩個是圖檔檔案。

把這三個檔案複制到我們遊戲項目的resources目錄下，就直接根目錄吧，先不考慮目錄結構了~

現在，我們要在代碼中使用ui檔案了~

在使用ui檔案之前，我們要給項目工程添加cocostudio的庫，如圖：

在項目解決方案上右鍵，添加現有項目，找到cocostudio工程，再如圖：

ok，點選“打開”确定。

如果你和我一樣，用的是vs2013，那就要更新一下（沒有這個選項的那就不用更新），如圖：

然後用同樣的方式添加gui庫以及extensions庫：

然後再點選一下生成項目，然後新添加的庫編譯一下。

這裡提醒一下，最好【重新生成】項目，然後整個工程編譯一遍，因為我剛剛就遇到一個很奇怪的問題，ui加載之後老是錯位。找了大半天，結果重新生成之後，這個問題就消失了。

如果你發現編譯有問題，有些頭檔案找不到的話，那按照下圖修改一下項目的附加包含目錄：

好了，終于把前奏搞定了，現在，給tollgatescene添加一個函數：

好，運作一下，是不是看到ui出現了？

（小若：沒有！編譯報錯了，魂淡！）

沒錯，如果你不報錯的話，那就神奇了。因為我們還沒有加上一些必備的頭檔案：

#include “cocostudio/cocostudio.h” using namespace cocostudio;

加上之後，編譯運作，我們就可以看到如下圖的效果：

ok，這就是最簡單的建立ui和加載ui的方式了。

啊，對了，之前我不是說下方那個鋸齒是伏筆麼~現在就解開這個伏筆了~

因為，最下面要放三個按鈕，是以鋸齒隻能放在那個位置了~

解開懸念之後是不是好有快感。（啊個屁啊）

這篇内容好像有點長，那，關于如何讓按鈕點選之後産生效果，我們就放到下一篇來講解吧。