【cocos2d-x】如何使用CocoStudio場景編輯器製做魔卡幻想

1 CocoStudio 場景編輯器

使用 CocoStudio 場景編輯器來建立遊戲場景，其中包含遊戲 UI 與動畫，來定製一個遊戲主界面。

2 使用 CocoStudio 完成《魔卡幻想》場景編輯

對於環境的搭建使用，請參考以前的文章，或者實時關注 官方 最新版本的安裝使用方法。

2.1 UI 編輯器製做遊戲主界面

1. 建立項目(項目名稱：MysticalCard)，並導入項目 UI 資源，添加 一圖片框設定背景圖片。注意在工具攔設置 「畫布」 的大小（若是須要），這將決定着你的設計分辨率，在運行時還須要注意屏幕的適配問題，如放大縮小，位置偏移等，視具體狀況而定。

2. 爲界面添加 UI 元素，圖片框等，請根據本身的須要定製

3. 實踐過程當中的注意事項

• 添加控件時注意必要的屬性設置

• 控件的命名規範，這有助於咱們從此在後臺編寫代碼獲取界面元素

• 可交互的控件的 「可交互屬性」 開啓

2.2 創建關鍵幀動畫

除了主界面一些必要的 UI 控件，咱們還須要一個 「對話框指示」 的動畫效果。這是一個幀動畫。

1. 準備工做。

   以下圖所示：

• 打開 CocoStudio ,啓動 動畫編輯器

• 建立一個新的項目，後導入資源（在 「資源窗口」 中，點擊 「文件」 或者 「文件夾」 標示，添加須要的素材資源）

• 在 「資源窗口中」 點擊關鍵幀動畫的守幀圖片，拖動至 「渲染窗口」

將第一關鍵幀拖動至 「渲染窗口」 中心。 可使用工具欄，快速定位至窗口中心，使圖片顯示在正中間，可讓動畫更好的定位。添加其它幀圖片，注意，咱們須要選中剩餘圖片，而後 「拖動」 到 「對象結構」 視圖中的 「第一關鍵幀」 所在的對象，以下圖所示。關鍵幀 與 骨骼動畫操做區別：在使用骨骼動畫的時候，咱們將骨骼中的各部分元素，直接拖動添加到 「渲染窗口」，以擺放各骨骼的位置關係，而在 「對象結構」 視圖中則表現爲，一個列表，標示着每一塊骨骼對象，不一樣幀所改變的是各個骨骼對象的位置，以達到骨骼動畫效果。而在關鍵幀動畫中，它的對象結構只有一個，而在每一幀修改的不是其位置，而是其顯示內容。這是二者之間的區別，那操做方式也有所不一樣。而對於它們所導出的 資源 則是相同，用法也是一樣。剩餘幀添加以後，咱們看見在 「關鍵幀」 視圖中，已經有了多幀動畫，能夠播放動畫，查看效果，並能夠經過修改 「速率」 來控制動畫的播放速度。導出動畫資源，導出的資源文件能夠被咱們在 Cocos2d-x 中以代碼的方式直接加載，而後播放其動畫，也能夠做爲 場景編輯器中的一個元素，被添加在場景編輯器裏，後面的內容就是使用 場景編輯器來加載一個動畫的方式。

2.3 場景編輯器的 資源「整合」

使用 CocoStudio 能夠很好的幫助遊戲開發過程當中 分工合做。動畫編輯器 和 UI 編輯器能夠由多我的進行編輯，最後再由一我的統合資源，這也就是場景編輯器的優勢了，它除了能支持 CocoStudio 自己所自帶的動畫編輯器，UI 編輯器，它還能支持，Tmx 地圖資源，粒子編輯器的粒子效果資源，聲音資源等～而且不斷擴展中。如下將給出如何在 場景編輯器整合咱們以前所建立的動畫與 UI 界面的資源，來實現咱們一個場景的運行效果。它的步驟以下：

1.啓動場景編輯器，新建一個場景項目。並設置 「畫布」 大小。畫布大小要適量。
2.咱們拖動一個 UI 控到畫布之上，它做爲咱們以前導出的 UI 資源的承載。

    

3.咱們將以前的 UI 編輯器所導出的資源，導入到當前場景項目中來，導入方式與 UI 編輯器導入資源方式一樣，以下圖：    

 

4.爲 UI 控件的 「文件」 屬性賦值：咱們在資源視圖中找到 UI 編輯器所導出的 UI 資源，其目錄下包含 json 文件資源（如這裏的 「MysticalCard_1.json」）,將其拖動到 

UI 控件的文件 屬性中去，以下圖所示：

1. 前面的步驟已經將 UI 資源導入場景以內，如今須要添加以前所建立的動畫資源。

• 咱們以相同的方式導入動畫編輯器所導出的動畫資源文件。

• 拖動一個骨骼控件至場景界面，以下圖所示。

• 爲骨骼控件的 「文件」 屬性賦值，其值爲 動畫資源中的 ExportJson（或者 json 文件，這取決於動畫資源的導出方式） 文件。

運行效果：當咱們創建好場景以後，能夠經過工具欄運行按鈕，點擊查看效果，這意味着你不用將全部的資源文件，手動以代碼的方式添加到 Cocos2d-x 中，便能看到效果。在運行效果中，全部的控件都是可操做的，以下圖，但這裏只有點擊效果，若是須要實現其邏輯，那麼如今須要將其加載到 Cocos2d-x 項目中，編寫後臺代碼實現。

3 在 Cocos2d-x 中加載場景資源 並運行之

3.1 加載場景內容

前面那麼多步驟，使用 CocoStudio 來建立了 UI，動畫，還有一個場景，而要將其運行在實際的項目中，就很是的簡單與方便了，只需幾行代碼，就可以將其加載到項目中去，固然在這以前咱們須要將場景編輯器的資源（場景項目目錄中 「Resources」 目錄，其中將包含一個 json 文件）複製到項目資源目錄中去：

1 2 3

// 加載場景資源 CCNode *pNode = CCJsonReader::sharedJsonReader()->createNodeWithJsonFile( "McScene.json" ); this ->addChild(pNode);

經過 CCJsonReader 來讀取解析 json，從而得到場景中的節點內容，直接添加到當前的場景就能運行。

3.2 在場景中播放動畫

默認加載的場景資源 動畫 組件是沒有播放的，須要手動獲取動畫組件對象，而後調用其播放方法，固然這個步驟也是很是簡單的：

1 2 3 4 5 6

// pNode 爲 以前所獲取的場景資源根節點，經過此節點獲取到動畫對象，獲取方式根據在場景編輯其中設置的層次關係而定 CCComRender *pLoadRender = (CCComRender*)(pNode->getChildByTag(1)->getChildByTag(1)->getComponent( "CCArmature" )); CCArmature* armLoad = (CCArmature*)(pLoadRender->getRender());   // 播放動畫 armLoad->getAnimation()->playByIndex(0);

3.3 對場景的一些編碼說明

使用 CocoStudio 就是爲了幫助咱們快速的創建 UI 原型，而後經過編碼能夠獲取到裏面的任意一個元素對象，並修改其屬性值，調用其方法，正如上面所示播放一個動畫的方法一樣。其步驟以下：

• 經過 CCJsonReader 類讀取 json 文件，將會自動解析構建對象，返回一個節點 CCNode

• 任何元素都能經過這個 CCNode 節點，獲取到，它其實就是一個樹，所不一樣的是層級關係（樹節點的位置）

• 找到須要對象所在的 「樹枝」，後經過 getComponent 方法獲取 所在的 CCComRender 對象

• 經過 CCComRender 的 getRender 方法獲取最終對象

• 獲得咱們所須要的具體對象以後，咱們就可以對齊進行草，設置屬性，調用方法等，諸如此類

來自：泰然

http://cocos2d.9tech.cn/news/2013/0925/29092.html