如何使用 Cocos Studio 場景編輯器制作《魔卡幻想》主界面

1.cocostudio 場景編輯器

前面的文章《使用 cocostudio 創建 cocos2d-x 序列幀和骨骼動畫》《如何使用 cocostudio UI 編輯器實現《亂鬥堂》設置界面》，其中介紹了如何使用動畫編輯器創建動畫與使用 UI 編輯器創建遊戲配置界面，而本文將集兩者之大成，使用 cocostudio 場景編輯器來創建遊戲場景，其中包含遊戲 UI 與動畫，來定制壹個遊戲主界面。

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

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

2.1 UI 編輯器制作遊戲主界面

a.創建項目(項目名稱：MysticalCard)，並導入項目 UI 資源，添加壹圖片框設定背景圖片。註意在工具攔設置 “畫布” 的大小（如果需要），這將決定著妳的設計分辨率，在運行時還需要註意屏幕的適配問題，如放大縮小，位置偏移等，視具體情況而定。

b.為界面添加 UI 元素，圖片框等，請根據自己的需要定制.

c.實踐過程中的註意事項

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

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

可交互的控件的 “可交互屬性” 開啟

2.2 建立關鍵幀動畫

除了主界面壹些必要的 UI 控件，我們還需要壹個 “對話框指示” 的動畫效果。這是壹個幀動畫。

a.準備工作。

打開 CocoStudio ,啟動動畫編輯器

創建壹個新的項目，後導入資源（在 “資源窗口” 中，點擊 “文件” 或者 “文件夾” 標示，添加需要的素材資源）

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

b.將第壹關鍵幀拖動至 “渲染窗口” 中心。可以使用工具欄，快速定位至窗口中心，使圖片顯示在正中間，可以讓動畫更好的定位。

c.添加其它幀圖片，註意，我們需要選中剩余圖片，然後 “拖動” 到 “對象結構” 視圖中的 “第壹關鍵幀” 所在的對象

關鍵幀與骨骼動畫操作區別：在使用骨骼動畫的時候，我們將骨骼中的各部分元素，直接拖動添加到 “渲染窗口”，以擺放各骨骼的位置關系，而在 “對象結構” 視圖中則表現為，壹個列表，標示著每壹e.塊骨骼對象，不同幀所改變的是各個骨骼對象的位置，以達到骨骼動畫效果。

而在關鍵幀動畫中，它的對象結構只有壹個，而在每壹幀修改的不是其位置，而是其顯示內容。這是兩者之間的區別，那操作方式也有所不同。而對於它們所導出的資源則是相同，用法也是同樣。

d.剩余幀添加之後，我們看見在 “關鍵幀” 視圖中，已經有了多幀動畫，可以播放動畫，查看效果，並可以通過修改 “速率” 來控制動畫的播放速度。

導出動畫資源，導出的資源文件可以被我們在 Cocos2d-x 中以代碼的方式直接加載，然後播放其動畫，也可以作為場景編輯器中的壹個元素，被添加在場景編輯器裏，後面的內容就是使用場景編輯器來加載壹個動畫的方式。

2.3 場景編輯器的資源“整合”

使用 CocoStudio 可以很好的幫助遊戲開發過程中分工合作。動畫編輯器和 UI 編輯器可以由多個人進行編輯，最後再由壹個人統合資源，這也就是場景編輯器的優點了，它除了能支持 CocoStudio 本身所自帶的動畫編輯器，UI 編輯器，它還能支持，Tmx 地圖資源，粒子編輯器的粒子效果資源，聲音資源等～並且不斷擴展中。

以下將給出如何在場景編輯器整合我們之前所創建的動畫與 UI 界面的資源，來實現我們壹個場景的運行效果。它的步驟如下：

a.啟動場景編輯器，新建壹個場景項目。並設置 “畫布” 大小。畫布大小要適量。

b.我們拖動壹個 UI 控件到畫布之上，它作為我們之前導出的 UI 資源的承載。

c.我們將之前的 UI 編輯器所導出的資源，導入到當前場景項目中來，導入方式與 UI 編輯器導入資源方式同樣，如下圖：.

d.為 UI 控件的 “文件” 屬性賦值：我們在資源視圖中找到 UI 編輯器所導出的 UI 資源，其目錄下包含 json 文件資源（如這裏的 “MysticalCard_1.json”）,將其拖動到 UI 控件的文件屬性中去，如下圖所示：

e.前面的步驟已經將 UI 資源導入場景之內，現在需要添加之前所創建的動畫資源。

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

拖動壹個骨骼控件至場景界面，如下圖所示。

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

f.運行效果：當我們建立好場景之後，可以通過工具欄運行按鈕，點擊查看效果，這意味著妳不用將所有的資源文件，手動以代碼的方式添加到 Cocos2d-x 中，便能看到效果。

在運行效果中，所有的控件都是可操作的，如下圖，但這裏只有點擊效果，如果需要實現其邏輯，那麽現在需要將其加載到 Cocos2d-x 項目中，編寫後臺代碼實現。

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

3.1 加載場景內容

前面那麽多步驟，使用 CocoStudio 來創建了 UI，動畫，還有壹個場景，而要將其運行在實際的項目中，就非常的簡單與方便了，只需幾行代碼，就能夠將其加載到項目中去，當然在這之前我們需要將場景編輯器的資源（場景項目目錄中 “Resources” 目錄，其中將包含壹個 json 文件）復制到項目資源目錄中去：

123456789101112131415 <OL style="COLOR: #5c5c5c" class=dp-c> <LI style="COLOR: inherit" class=alt> // 加載場景資源 </LI> <LI> CCNode *pNode = CCJsonReader::sharedJsonReader()->createNodeWithJsonFile("McScene.json"); </LI> <LI style="COLOR: inherit" class=alt> this->addChild(pNode); </LI> </OL>

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

3.2 在場景中播放動畫

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

123456789101112131415161718192021222324252627 <OL style="COLOR: #5c5c5c" class=dp-c> <LI style="COLOR: inherit" class=alt> // pNode 為之前所獲取的場景資源根節點，通過此節點獲取到動畫對象，獲取方式根據在場景編輯其中設置的層次關系而定 </LI> <LI> CCComRender *pLoadRender = (CCComRender*)(pNode->getChildByTag(1)->getChildByTag(1)->getComponent("CCArmature")); </LI> <LI style="COLOR: inherit" class=alt> CCArmature* armLoad = (CCArmature*)(pLoadRender->getRender()); </LI> <LI> </LI> <LI style="COLOR: inherit" class=alt> // 播放動畫 </LI> <LI> armLoad->getAnimation()->playByIndex(0); </LI> </OL>

3.3 對場景的壹些編碼說明

使用 CocoStudio 就是為了幫助我們快速的建立 UI 原型，然後通過編碼可以獲取到裏面的任意壹個元素對象，並修改其屬性值，調用其方法，正如上面所示播放壹個動畫的方法同樣。其步驟如下：

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

任何元素都能通過這個 CCNode 節點，獲取到，它其實就是壹個樹，所不同的是層級關系（樹節點的位置）

找到需要對象所在的 “樹枝”，後通過 getComponent 方法獲取所在的 CCComRender 對象

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

得到我們所需要的具體對象之後，我們就能夠對齊進行草，設置屬性，調用方法等，諸如此類

上一篇:如何快速提取網頁上所有的URL鏈接？

下一篇:查找php縮放處理函數