之前的文章《用cocostudio創建cocos2d-x序列幀和骨架動畫》和《如何使用cocostudio UI編輯器實現豆豆館的設定界面》介紹了如何用動畫編輯器創建動畫，用UI編輯器創建遊戲配置界面。本文將兩者結合起來，使用cocostudio場景編輯器創建壹個遊戲場景，包括遊戲UI和動畫，自定義壹個遊戲主界面。
2.使用cocostudio完成魔卡幻想的場景剪輯。
對於環境的搭建和使用，可以參考之前的文章或者實時關註最新正式版的安裝和使用。
2.1 UI編輯器制作遊戲主界面
A.創建項目(項目名:神秘卡)，導入項目UI資源，添加圖片框設置背景圖片。註意設置工具欄中“畫布”的大小(如果需要的話)，這將決定妳的設計分辨率。在操作過程中，還需要註意屏幕的適配，比如放大縮小，位置偏移等。，視具體情況而定。
B.添加UI元素，圖片框等。到界面，請根據自己的需求定制。
C.實踐中的註意事項
添加控件時，請註意必要的屬性設置。
控件，這將有助於我們將來在後臺編寫代碼以獲取界面元素。
交互式控件的交互式屬性已打開。
2.2關鍵幀動畫的建立
除了主界面中壹些必要的UI控件，我們還需要壹個“對話框指示”的動畫效果。這是壹個幀動畫。
A.準備工作。
打開CocoStudio，啟動動畫編輯器。
創建壹個新項目，然後導入資源(在資源窗口中，單擊“文件”或“文件夾”標簽來添加所需的材料資源)。
在“資源窗口”中，單擊關鍵幀動畫的持幀圖片，並將其拖動到“渲染窗口”。
B.將第壹個關鍵幀拖到渲染窗口的中心。可以使用工具欄快速定位窗口中心，使圖片顯示在中間，這樣可以使動畫更好的定位。
C.添加其他圖片框架。請註意，我們需要選擇剩余的圖片，然後將它們“拖動”到“對象結構”視圖中“第壹個關鍵幀”所在的對象上。
關鍵幀和骨骼動畫的操作區別:使用骨骼動畫時，我們直接將骨骼中的所有元素拖拽添加到“渲染窗口”中，以顯示每塊骨骼的位置關系，而在“對象結構”視圖中，則顯示為列表，表示每個E-bone對象，不同的幀改變每個骨骼對象的位置，以達到骨骼動畫的效果。
但是，在關鍵幀動畫中，只有壹個對象結構，並且在每壹幀中修改的不是它的位置而是它的顯示內容。這就是兩者的區別，操作方式也不同。他們輸出的資源是壹樣的，用法也是壹樣的。
D.添加完剩余幀後，我們可以看到“關鍵幀”視圖中已經有多幀動畫了，可以播放動畫，檢查效果，通過修改“速率”來控制動畫的播放速度。
導出動畫資源。導出的資源文件可以通過代碼直接加載到Cocos2d-x中，然後播放其動畫。也可以作為場景編輯器中的元素添加到場景編輯器中，下面的內容就是使用場景編輯器加載動畫的方式。
2.3場景編輯資源的“整合”
CocoStudio可以幫助遊戲開發過程中的分工合作。動畫編輯器和UI編輯器可以多人編輯，最後壹個人整合資源，這就是場景編輯器的優勢。除了支持CocoStudio本身的動畫編輯器和UI編輯器，還可以支持粒子編輯器的Tmx貼圖資源、粒子效果資源和聲音資源，並且還在不斷擴展。
下面將展示如何在場景編輯器中整合我們之前創建的動畫和UI資源，實現我們其中壹個場景的運行效果。其步驟如下:
A.啟動場景編輯器並創建壹個新的場景項目。並設置畫布大小。畫布大小要合適。
B.我們將壹個UI控件拖到畫布上，畫布充當我們之前導出的UI資源的宿主。
C.我們將之前UI編輯器導出的資源導入到當前場景項目中，方式和UI編輯器壹樣，如下圖。
D.給UI控件的“file”屬性賦值:我們在資源視圖中找到UI編輯器導出的UI資源，其目錄中包含json文件資源(如這裏的“神秘卡片_ 1.json”)，將其拖動到UI控件的file屬性中，如下圖所示:
E.UI資源已經在前面的步驟中導入到場景中，現在您需要添加之前創建的動畫資源。
我們用同樣的方法導入動畫編輯器導出的動畫資源文件。
拖動骨骼控件到場景界面，如下圖所示。
為骨骼控件的“file”屬性賦值，其值為動畫資源中的ExportJson(或Json文件，取決於動畫資源的導出方式)文件。
F.運行效果:我們建立好場景後，可以點擊工具欄上的運行按鈕，查看效果，也就是說不用在代碼中手動將所有的資源文件添加到Cocos2d-x中，就可以看到效果。
在運行效果中，所有的控件都是可操作的，如下圖，但是這裏只有壹個點擊效果。如果需要實現它的邏輯，需要將其加載到Cocos2d-x項目中，並編寫後臺代碼來實現。
3.在Cocos2d-x中加載場景資源並運行。
3.1加載場景內容
在前面的步驟中，CocoStudio用於創建UI、動畫和場景。在實際項目中運行非常簡單方便，只需要幾行代碼就可以加載到項目中。當然，在此之前，我們需要將場景編輯器的資源(場景項目目錄中的“Resources”目錄，其中會包含壹個json文件)復制到項目資源目錄中:
123456789101112131414 & lt；OL style = " COLOR:# 5c 5c 5c " class = DP-c & gt；& lt“繼承”class = alt & gt& ltSPAN style = " BACKGROUND-COLOR:inherit；顏色:黑色" >；& ltSPAN style = " BACKGROUND-COLOR:inherit；COLOR:# 008200 " class = comment & gt；//加載場景資源
通過CCJsonReader讀取並解析json，從而得到場景中的節點內容，直接添加到當前場景中運行。
3.2在場景中播放動畫
不播放默認加載的場景資源動畫組件。您需要手動獲取動畫組件對象，然後調用其播放方法。當然，這壹步也很簡單:
12345678910112131415161718192021222324252627 & lt；OL style = " COLOR:# 5c 5c 5c " class = DP-c & gt；& lt“繼承”class = alt & gt& ltSPAN style = " BACKGROUND-COLOR:inherit；顏色:黑色" >；& ltSPAN style = " BACKGROUND-COLOR:inherit；COLOR:# 008200 " class = comment & gt；// pNode是之前獲取的場景資源的根節點，通過這個節點獲取動畫對象，獲取方式取決於場景編輯中設置的層次關系
3.3場景的壹些編碼說明
CocoStudio是用來幫助我們快速搭建壹個UI原型，然後我們可以通過編碼得到裏面的任意元素對象，修改它的屬性值，調用它的方法，就像上面展示的播放壹個動畫的方法壹樣。步驟如下:
通過CCJsonReader類讀取json文件會自動解析build對象並返回壹個節點CCNode。
任何元素都可以通過這個CCNode節點獲得，這個節點實際上是壹棵樹，不同的是層次關系(樹節點的位置)
找到所需對象所在的“分支”，然後通過getComponent方法獲取CCComRender對象。
通過CCComRender的getRender方法獲取最終對象。
在得到我們需要的具體對象後，我們可以對齊草，設置屬性，調用方法等等。