使用 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 資源的承載。