1?CocoStudio 場景編輯器

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

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

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

2.1?UI 編輯器制作游戲主界面

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

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

實踐過程中的注意事項

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

• 控件的命名規范，這有助于我們今后在后臺編寫代碼獲取界面元素

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

2.2?建立關鍵幀動畫

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

準備工作。

如下圖所示：

• 打開 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 控件的文件 屬性中去，如下圖所示：

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

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

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

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

運行效果：當我們建立好場景之后，可以通過工具欄運行按鈕，點擊查看效果，這意味著你不用將所有的資源文件，手動以代碼的方式添加到 Cocos2d-x 中，便能看到效果。在運行效果中，所有的控件都是可操作的，如下圖，但這里只有點擊效果，如果需要實現其邏輯，那么現在需要將其加載到 Cocos2d-x 項目中，編寫后臺代碼實現。

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

3.1?加載場景內容

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

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

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

3.2?在場景中播放動畫

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

// 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

轉載于:https://blog.51cto.com/kenkao/1554709

總結

以上是生活随笔為你收集整理的如何使用CocoStudio场景编辑器制作魔卡幻想的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。