Table of Contents
1 遊戲中必不可少的 UI 元素
2 使用 CocoStudio UI 編輯器設計配置界面
2.1 首先建立主配置界面：
2.2 其次我們需要一個 “修改密碼” 的二級 UI 界面：
3 編寫代碼控制頁面邏輯
1遊戲中必不可少的 UI 元素
一個成功的遊戲離不開友好的用戶體驗，而用戶體驗則取決於功能是否合理，界面是否美觀等因素，除了遊戲的核心玩法之外，遊戲中的各種“配置功能”也是必不可缺的，更準確的說，遊戲中存在那麼些必不可少的 UI 元素。
上圖所示是近期非常火爆的遊戲《亂鬥堂》的截圖，內容是其“配置界面”，如果要實現這樣一個“配置界面”，如果是你，你該從何下手！首先要有素材（當然請美工製作了），然後我們編寫代碼，這樣一個界面我們可以用一個層來實現，加載各種圖片素材，逐一添加至層。其實，這都沒什麼，只是你需要手動設置座標，不斷的運行調試，才能達到最終想要的效果而已。效果出來了，實現具體的功能，點擊操作該如何實現，如果所有顯示的圖片都是精靈，那麼你需要做觸摸處理，判斷點擊有效否，然後可能需要修改精靈圖片（不同的點擊效果），聰明一點的做法是實用 CCMenu
來實現點擊功能，但如此可能會引入其它問題，CCMenu 的觸摸優先級別很高，以至於多層 UI 的情況，處理起來變得繁雜。而更聰明一點的做法，就是設計一套 UI 系統，來滿足各種需求！
我們在編寫遊戲之前還需要實現一套自己的 UI 系統？當然不是，即便是 Cocos2d 的第一個 python 版本，也不是一夕而就的，而是開發多個遊戲之後總結、規範、封裝重用之後的框架，而 UI 系統也符合這麼個客觀規律。都是爲了解決實際開發過程中遇到的問題，重用相同的功能。簡化我們的開發。
下面介紹如何使用 CocoStudio 的 UI 編輯器來幫助我們實現這樣一個“配置界面”，並且實現其配置功能。
2使用 CocoStudio UI 編輯器設計配置界面
2.1 首先建立主配置界面：
1.安裝好 CocoStudio 程序，並準備好所需要的素材
2.建立新的項目，命名“ChaosFight”,設置分辨率（根據實際需要），這裏手動填寫分辨率。
3.導入遊戲的素材到項目，在界面添加圖片框控件，顯示背景
4.根據需要添加控件，在這個主界面上我們添加了，一個圖片框，下面四個文本按鈕，再下面一排四個圖片按鈕，最下面是兩個文本按鈕和一個文本框（文本域）。
5.在編輯時，我們需要注意以下幾點：
設置圖片按鈕之時，可以設置禁用時顯示的圖片。所有的可點擊操作的控件，需要啓用“交互”屬性。
設置按鈕屬性 默認圖片 與 點擊效果圖 的圖片相同（或者不同，按下效果圖如果不設置，實際操作按下也不顯示，空白）
6.導出各部分資源文件。
2.2 其次我們需要一個 “修改密碼” 的二級 UI 界面：
1.新建立項目，並導入相關資源。
2.設計界面，如下圖所示：
這裏我們添加了三組密碼框。而在設計這樣三個類似控件集的時候，有個技巧，我們首先局部好一個個控件區域，如上“舊密碼”區域，然後我們將相關的控件樹結構，統一在一起，如圖：
點擊右側對象結構，我們可以複製整個樹枝“節點”，然後粘貼到樹中，如上圖，“新密碼”區域，我們將相關的控件集合在“新密碼”節點，然後拖動此節點，可以很好的完成內部元素的相對位置。
3.修改相關屬性，命名規範並導出資源
以上時設計界面的簡單步驟，所有的都是可視化操作，所見即所得，已經提供了常用的控件，並且還在不斷添加完善。
3 編寫代碼控制頁面邏輯
1.建立新的工程，引入 CocoGUILIB 擴展庫，和 UI 編輯器導出的資源文件（工程建立步驟請實時關注官方說明，不同版本操作步驟不同，這裏使用的時 2.1.4e 版本，請下載最新的版本庫，以使用最簡單的方法配置環境等。）
2.創建一個新的場景類，用於加載我們的 UI 資源，並編寫相關邏輯，其關鍵代碼如下（實現加載，跳轉邏輯控制功能） 所有代碼即工程資源:
- // 加載 UI 資源
- // 加載 UI 資源
- UILayer* ul = UILayer::create();
- this->addChild(ul, 0, 100);
- ul->addWidget(CCUIHELPER->createWidgetFromJsonFile("ChaosFight_1/ChaosFight_1.json"));
- // 獲得各個控件，並添加點擊事件
- UITextButton* tbChangePwd = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbChangePwd"));
- tbChangePwd->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbChangePwdCallback));
- // 主界面按鈕點擊回調函數
- void ChaosFightUI::tbChangePwdCallback(cocos2d::CCObject *pSender){
- // 創建加載修改密碼界面 ulPwd 作爲類成員屬性，以便重用
- ulPwd = UILayer::create();
- ulPwd->addWidget(CCUIHELPER->createWidgetFromJsonFile("ChaosFightPassword_1/ChaosFightPassword_1.json"));
- this->addChild(ulPwd);
- // 獲取點擊確定按鈕
- tbOk = dynamic_cast<UITextButton*>(ulPwd->getWidgetByName("tbOk"));
- tbOk->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbOkCallback));
- }
- void ChaosFightUI::tbOkCallback(cocos2d::CCObject *pSender){
- // 獲取文本框值，並且打印
- UITextField* tfOldPwd = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfOldPwd"));
- CCLog(tfOldPwd->getStringValue());
- }
最後運行效果如下：
二級 UI 界面：
文本輸入框控件：
