專案開始啟動，Team leaer要求我先做簡單的事情，熟悉一下背景音樂和音效的函式。

由於Cocos2d-x的版本更新，網路上我找到的教程不太適合我配置的Cocos2d-x的版本，所以我把我實現的過程寫一下。我使用的是cocos2d-x-3.1.1

個人認為，Cocos Studio是一個挺強大的工具集，工具集中的每一個編輯器都是面向特定的人員而定製的。通過在工具層面的分工，可以使每一個工作崗位的工作相互獨立，減少相互之間的耦合性，使每一個工作人員能夠專心於自己的業務。那如何使用CocosStudio建立UI並載入到程式中，不妨參照一下該教程

我覺得這個系列的教程都寫得很好，只是版本不太適合3.1.1而已。而且UI載入到程式中的程式碼有點問題。

1. UI載入到程式中

（1） 先新增需要的庫

由於cocos2d-x3.0工作目錄是放在其它地方，所以要引用 libCocoStuido、libGUI、libExtension這三個庫。

新增庫方法：在“解決方案資源管理器”中找到整個解決方案，右擊，選擇“新增”->“現有專案”

選擇“%你的Cocos2d-x路徑%\cocos\editor-support\cocostudio\proj.win32\libCocosStudio”

選擇“%你的Cocos2d-x路徑%\cocos\ui\proj.win32\libGUI”

選擇“%你的Cocos2d-x路徑%\extensions\proj.win32\libExtensions”

（2）新增引用

找到目標專案（我的是“HelloStudio”）, 右擊，選擇"引用"，在彈出的屬性頁中點選下面的“新增新引用”。在彈出的子級對話方塊中選擇我們需要的庫，點選確定，即可新增專案對庫的引用。

（3）新增包含目錄

右擊專案->屬性->配置屬性->c/c++->常規->加入包含目錄。編輯，新增“$(EngineRoot)cocos\editor-support”和“$(EngineRoot)cocos”。

（4）引入標頭檔案   #include "cocostudio\CocoStudio.h"

（5）更改HelloWorld類中的init()方法

<span style="font-size:14px;">bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();

    auto uiLayer = cocostudio::GUIReader::getInstance()->widgetFromJsonFile("NewUi/NewUi_1.ExportJson");
    this->addChild(uiLayer);
	
    return true;
}</span>

現在已經將UI資源載入到程式中了。以下是程式執行結果：

（1）找到資源中的Button。

我在CocosStudio中將三個按鈕分別命名為"Play","Pause","Effect"，可以根據它們的名字找到它們。繼續在HelloWorld類中的init()方法中新增以下程式碼

//找到資源中的按鈕///////
Button* playbutton = static_cast<Button*>(Helper::seekWidgetByName(uiLayer,"Play"));
Button* pausebutton = static_cast<Button*>(Helper::seekWidgetByName(uiLayer,"Pause"));
Button* effectbutton = static_cast<Button*>(Helper::seekWidgetByName(uiLayer,"Effect"));

這裡Helper是用來尋找資源裡對應的控制元件，它的尋找方式有三種:

static Widget* seekWidgetByTag(Widget* root, int tag);//通過tag找到該控制元件
static Widget* seekWidgetByName(Widget* root, const char* name);//通過名稱找到該控制元件
static Widget* seekActionWidgetByActionTag(Widget* root, int tag);//通過tag找到該動作

#include "ui\CocosGUI.h"
using namespace cocos2d::ui;

playbutton->addTouchEventListener(this, toucheventselector(HelloWorld::touchButton));
pausebutton->addTouchEventListener(this, toucheventselector(HelloWorld::touchButton));
effectbutton->addTouchEventListener(this, toucheventselector(HelloWorld::touchButton));

先在HolloWorld類中定義void touchButton(Object *pSender, TouchEventType type)函式，實現如下：

void HelloWorld::touchButton(Object *pSender, TouchEventType type)
{
 	auto button = static_cast<Button*>(pSender);
	string name = button->getName();

	switch (type)
	{
	case TOUCH_EVENT_ENDED:
		if( name == "Play")
			CCLOG("touch play");
		else if( name == "Pause")
			CCLOG("touch pause");
		else if( name == "Effect")
			CCLOG("touch effect");
		break;
	default:
		break;
	}
}

執行後，可以在 除錯輸出那裡看到結果。

typedef enum
{
    TOUCH_EVENT_BEGAN,
    TOUCH_EVENT_MOVED,
    TOUCH_EVENT_ENDED,
    TOUCH_EVENT_CANCELED
}TouchEventType;

最後是為了完成Leader的要求，還是要加一下對背景音樂和音效的函式使用。具體的背景音樂和音效的函式可以參考背景音樂和音效，非常詳細！絕對是業界良心~~O(>_<)O

①使用CocosDenshion

#include "SimpleAudioEngine.h"
using namespace CocosDenshion;

	SimpleAudioEngine::sharedEngine()->preloadBackgroundMusic("music/bgm.mp3");
	SimpleAudioEngine::sharedEngine()->preloadEffect("music/sound2.wav");

void HelloWorld::touchButton(Object *pSender, TouchEventType type)
{
	auto button = static_cast<Button*>(pSender);
	string name = button->getName();
	switch (type)
	{
	case TOUCH_EVENT_ENDED:
		if( name == "Play")
		{
			SimpleAudioEngine::sharedEngine()->playBackgroundMusic("music/bgm.mp3", true);
		}
		else if( name == "Pause")
		{
			SimpleAudioEngine::sharedEngine()->pauseBackgroundMusic();
		}
		else if( name == "Effect")
		{
			SimpleAudioEngine::sharedEngine()->playEffect("music/sound2.wav",false);
		}
		break;
	default:
		break;
	}
 }