Cocos2d-x v3.1 GUI系統--環境構建（七）

標籤：android   style   blog   http   color   使用   

Cocos2d-x v3.1 GUI系統--環境構建（七）

        在使用Cocos2d-x的GUI系統時，由於產生的工程預設是沒有將GUI系統所需的庫匯入到項目的，所以我們必須把庫匯入到工程中並對工程做一些配置才能夠使用GUI系統。這篇文章我們先在配置Windows上的環境，並對GUI系統中的組織圖進行一個介紹，然後我們會寫一個簡單的Demo來測試我們配置的環境，最後我們配置Android環境，同樣的也是通過此Demo進行測試。

Windows平台環境配置

        在工程目錄下，我們先找到所依賴的庫。GUI系統主要依賴於“libGUI”庫，“libGUI”庫又依賴“libCocosStudio”庫，然而“libCocosStudio”庫又依賴“libExtensions”庫，所以我們必須將這三個庫都匯入。在項目目錄下，這裡我們用ProjectPath來代表項目目錄，原生目錄是：“D:\CocosProject\Cocos\Tutorial”。“libGUI”放在“ProjectPath\cocos2d\cocos\ui”目錄下，“libCocosStudio”庫放在“ProjectPath\cocos2d\cocos\editor-support\cocostudio”在這個目錄下,“libExtensions”庫存放在“ProjectPath\cocos2d\extensions”目錄中，在上面的3個目錄下面都有一個子目錄“proj.win32”，我們所需要的VS工程檔案就在其中。匯入到解決方案，如：

                  

        將這些項目匯入解決方案後，我們需要配置“Tutorial”工程的附加元件封裝含目錄，並配置“Tutorial”工程的匯入庫，就是上面的那三個庫。如所示：

              

GUI系統的組織圖

        從上面的類圖結構來開，所有的GUI對象都是整合至Node的，所以它們也具有Node的特性。詳細的資訊會在以後的文章中介紹，下面我們就來看一個簡單的Demo。

        PS:圖片太大雙擊可顯示原始大小。

測試Demo

1.為了方便我們就直接在“HelloWorldScene.cpp”檔案中的“init”函數中添加如下代碼：

  1:  m_pTestText  = Text::create("test gui", "Arial", 20);
  2:  m_pTestText->setPosition(Vec2(visibleSize.width*0.5f, visibleSize.height*0.7f));
  3:  addChild(m_pTestText);
  4:  auto button = Button::create("btn-play-normal.png", "btn-play-selected.png");    
  5:  button->setPosition(Vec2(visibleSize.width*0.5f, visibleSize.height*0.6f));
  6:  button->addTouchEventListener(this, toucheventselector(HelloWorld::OnTouchButton));
  7:  addChild(button);

2.在“HelloWorldScene.cpp”檔案中添加GUI系統的頭“CocosGUI.h”，並引入名稱空間“ui”，代碼如下：

  1: #include "CocosGUI.h"
  2: 
  3: using namespace cocos2d::ui;

3.在HelloWorldScene中添加一個回呼函數的聲明以及定義一個成員變數，如下：

  1: void OnTouchButton(cocos2d::Ref* pObject, cocos2d::ui::TouchEventType eType);
  2: 
  3: cocos2d::ui::Text*   m_pTestText;

4.然後在源檔案中定義實現，由於在上面已經進行了綁定所以當點擊按鈕時就會調用這個函數，在這個函數中當點擊按鈕時就修改m_pTestText的顯示文本，代碼如下：

  1: if(m_pTestText != nullptr)
  2: {
  3:    m_pTestText->setText("Button is pushed!");
  4: }

，如下:

Android平台環境配置

        在Android平台的配置就很簡單了，在“ProjectPath\proj.android\jni”目錄下有一個Android.mk檔案，我們只需要將第4,6,17和19行前面的“#”去掉就可以了。

  1: # LOCAL_WHOLE_STATIC_LIBRARIES += box2d_static
  2: # LOCAL_WHOLE_STATIC_LIBRARIES += cocosbuilder_static
  3: # LOCAL_WHOLE_STATIC_LIBRARIES += spine_static
  4: LOCAL_WHOLE_STATIC_LIBRARIES += cocostudio_static
  5: # LOCAL_WHOLE_STATIC_LIBRARIES += cocos_network_static
  6: LOCAL_WHOLE_STATIC_LIBRARIES += cocos_extension_static
  7: 
  8: 
  9: include $(BUILD_SHARED_LIBRARY)
 10: 
 11: $(call import-module,.)
 12: $(call import-module,audio/android)
 13: 
 14: # $(call import-module,Box2D)
 15: # $(call import-module,editor-support/cocosbuilder)
 16: # $(call import-module,editor-support/spine)
 17: $(call import-module,editor-support/cocostudio)
 18: # $(call import-module,network)
 19: $(call import-module,extensions)