(轉)怎麼使用 CocoStudio UI 編輯器實現設置界面並且包括代碼

tags:    時間:2013-12-28 00:11:49
(轉)如何使用 CocoStudio UI 編輯器實現設置界面並且包括代碼
  • 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 資源,並編寫相關邏輯,其關鍵代碼如下(實現載入,跳轉邏輯控制功能) 所有代碼即工程資源:
  3.  工程代碼下載 地址:點擊下載整個工程

 

#ifndef TestCpp_ChaosFight_h #define TestCpp_ChaosFight_h  #include "cocos2d.h" #include "CocosGUI.h"  USING_NS_CC; USING_NS_CC_EXT;  class ChaosFightUI: public CCLayer{ public:     static CCScene* scene();     virtual bool init();     CREATE_FUNC(ChaosFightUI);          void tbChangePwdCallback(CCObject* pSender);     void tbBindingEmailCallback(CCObject* pSender);     void tbChangeRoleCallback(CCObject* pSender);     void tbLogoutCallback(CCObject* pSender);          void btnSoundEffectCallback(CCObject* pSender);     void btnMusicEffectCallback(CCObject* pSender);     void btnSavingElectricityCallback(CCObject* pSender);     void btnVideoCallback(CCObject* pSender);          void tbAboutCallback(CCObject* pSender);     void tbClearCacheCallback(CCObject* pSender);               void btnXCallback(CCObject* pSender);     void tbOkCallback(CCObject* pSender);  private:     UILayer* ul;               UILayer* ulPwd;          UIButton* btnX;     UITextButton* tbOk;          UITextField* tfOldPwd;     UITextField* tfNewPwd;     UITextField* tfNewPwdConfirm;      };   #endif

 

    實現代碼

 

#include "ChaosFight.h"  CCScene* ChaosFightUI::scene(){     CCScene* scene = CCScene::create();     CCLayer* layer = ChaosFightUI::create();     scene->addChild(layer);     return scene; }  bool ChaosFightUI::init(){     bool bRef = false;          do{         CC_BREAK_IF(! CCLayer::init());                  ul = UILayer::create();         // 設置 UI 層的tag         this->addChild(ul, 0, 100);         ul->addWidget(CCUIHELPER->createWidgetFromJsonFile("ChaosFight_1/ChaosFight_1.json"));                  // 獲得各個控制項,並添加點擊事件         UITextButton* tbChangePwd = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbChangePwd"));         UITextButton* tbBindingEmail = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbBindingEmail"));         UITextButton* tbChangeRole = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbChangeRole"));         UITextButton* tbLogout = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbLogout"));                           UIButton* btnSoundEffect = dynamic_cast<UIButton*>(ul->getWidgetByName("btnSoundEffect"));         UIButton* btnMusic = dynamic_cast<UIButton*>(ul->getWidgetByName("btnMusic"));         UIButton* btnSavingElectricity = dynamic_cast<UIButton*>(ul->getWidgetByName("btnSavingElectricity"));         UIButton* btnVideo = dynamic_cast<UIButton*>(ul->getWidgetByName("btnVideo"));                  UITextButton* tbAbout = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbAbout"));         UITextButton* tbClearCache = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbClearCache"));                  // 設置字體顏色         tbChangePwd->setTextColor(0, 0, 0);         tbBindingEmail->setTextColor(0, 0, 0);         tbChangeRole->setTextColor(0, 0, 0);         tbLogout->setTextColor(0, 0, 0);                  tbAbout->setTextColor(0, 0, 0);         tbClearCache->setTextColor(0, 0, 0);                  // 為控制項添加處理事件         tbChangePwd->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbChangePwdCallback));         tbBindingEmail->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbBindingEmailCallback));         tbChangeRole->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbChangeRoleCallback));         tbLogout->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbLogoutCallback));          btnSoundEffect->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnSoundEffectCallback));         btnMusic->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnMusicEffectCallback));         btnSavingElectricity->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnSavingElectricityCallback));         btnVideo->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnVideoCallback));          tbAbout->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbAboutCallback));         tbClearCache->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbClearCacheCallback));                           bRef = true;     }while(0);     return bRef; }  void ChaosFightUI::tbChangePwdCallback(cocos2d::CCObject *pSender){     // 創建載入修改密碼界面 ulPwd 作為類成員屬性,以便重用       ulPwd = UILayer::create();     ulPwd->addWidget(CCUIHELPER->createWidgetFromJsonFile("ChaosFightPassword_1/ChaosFightPassword_1.json"));     this->addChild(ulPwd);     ulPwd->setAnchorPoint(CCPoint(0.5,0.5));     CCSize winSize = CCDirector::sharedDirector()->getWinSize();     ulPwd->setPosition(CCPoint(winSize.width / 2 - 250, winSize.height / 2 - 180));          // 獲取點擊確定按鈕     tbOk = dynamic_cast<UITextButton*>(ulPwd->getWidgetByName("tbOk"));     tbOk->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbOkCallback));     tbOk->setTextColor(0, 0, 0);          tfOldPwd = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfOldPwd"));     tfNewPwd = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfNewPwd"));     tfNewPwdConfirm = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfNewPwdConfirm"));          tfOldPwd->setColor(ccc3(0, 0, 0));     tfNewPwd->setColor(ccc3(0, 0, 0));     tfNewPwdConfirm->setColor(ccc3(0, 0, 0));           ul->setTouchEnabled(false);  }  void ChaosFightUI::tbBindingEmailCallback(cocos2d::CCObject *pSender){     CCMessageBox("綁定郵箱", "title"); }  void ChaosFightUI::tbChangeRoleCallback(cocos2d::CCObject* pSender){     CCMessageBox("切換角色", "title"); }  void ChaosFightUI::tbLogoutCallback(cocos2d::CCObject *pSender){     CCMessageBox("註銷", "title"); }  void ChaosFightUI::btnSoundEffectCallback(cocos2d::CCObject *pSender){     CCMessageBox("音效", "title"); }  void ChaosFightUI::btnMusicEffectCallback(cocos2d::CCObject *pSender){     CCMessageBox("音樂", "title"); }  void ChaosFightUI::btnSavingElectricityCallback(cocos2d::CCObject *pSender){     CCMessageBox("省電", "title"); }  void ChaosFightUI::btnVideoCallback(cocos2d::CCObject *pSender){     CCMessageBox("片頭", "title"); }  void ChaosFightUI::tbAboutCallback(cocos2d::CCObject *pSender){     CCMessageBox("關於", "title"); }  void ChaosFightUI::tbClearCacheCallback(cocos2d::CCObject *pSender){     CCMessageBox("清楚緩存", "title"); }  void ChaosFightUI::btnXCallback(cocos2d::CCObject *pSender){     CCMessageBox("btnX", "title"); }  void ChaosFightUI::tbOkCallback(cocos2d::CCObject *pSender){     // 獲取文本框值,並且列印     const char* value = tfOldPwd->getStringValue();     CCLog(value);     ul->setTouchEnabled(true);     this->removeChild(ulPwd); }

 

 

 

  1. 最後運行效果如下:二級 UI 界面:文本輸入框控制項:

 

推薦閱讀文章

Bookmark the permalink ,來源:互聯網