[置頂] Cocos2d-x使用Cocos Studio制作界面并應用---之游戲開發《趙云要格斗》（11）

         這里是Evankaka的博客，歡迎大家前來討論與交換～～～～～～

        轉載請注明出處http://blog.csdn.net/evankaka/article/details/42883881

        本文主要講了怎樣用Cocos Studio制做登陸界面，并導出成Json文件，直接在coco2d-x中來調用。這樣做的好處就是界面和代碼是分離的，你如果想改界面的話，就能夠直接在外面用Cocos Studio來修改，只要不修改按鈕之類的名稱，你的功能代碼完全不用修改，只要將導出的Json文件和圖片資源替換下就OK了，這模樣的開發效力將會大大提高！

cocos2d-x版本：2.2.5

工程環境：windows7+VS2010

打開方式：將工程放在cocos2d-x安裝目錄下的project文件夾下用VS打開

1、Cocos Studio制做登陸界面

       首先，這里1定要注意Cocos2d-x和CocosStudio對應的版本，要不Cocos2d-x可能會用不了你制作的界面或動畫等。

   版本對應列表： 
Studio2.x 
CocosStudio版本      對應Cocos2d-x版本    JS版本       備注 
v2.1beta                         v3.4beta0                 None             已分離出reader，可以將reader拉取到其他版本cocos2d-x，以支持新版本的CocosStudio 
v2.0.6                             v3.3final                   None  
v2.0.5                             v3.3rc2                     None 
v2.0.2                             v3.3rc2                     None 
v2.0beta0                       v3.3rc0                     v3.1 

Studio1.x 

   這里要注意，你是甚么版本的就下甚么版本的，要不可能沒法調用。。Cocos Studio自己去找下資源然后安好。基本沒啥問題。

下面我們來開始1個簡單的教程吧，

1.首先，打開Cocos Studio，然后選擇界面編輯器，這里還可以選擇其它的，比如動畫、場景

2.然后這是UI Editor的界面，里面有1些范例，你也能夠直接拿去用，或自己把圖片改下

3.點擊文件，新建

4.點擊畫布，更改界面大小為你的游戲的界面的大小

5.然后直接將要用到的圖片，背景圖片和按鈕圖片，拖到右上角的Resources。以下：

6.然后我們來看下如何更改界面的背景，其實就是直接拖圖片，記得要先選好panel_14：

7.然后是效果，同時要在上面放按鈕，并加圖片，這里要記得圖片的名字：命名為Begin：

效果

8.依照上面的流程，把圖片都放上去好了以后，順次添加其它按鈕，并將它們對齊

9.最后1步，文件-》導出項目

10.導出的東西就在你這個項目Export文件夾下：

這是導出選擇大圖的情況：

這是導出時選擇小圖的情況：

看到了吧。圖片少的時候，這就是導出的區分了，圖片多的時候還是推薦用導出大圖的，要不會有1大堆的圖片。

這模樣，界面就做好了，我們可以直接在cocos2dx中來調用了。

2、Cocos2dx使用Json文件

1.在這里，我們隨意新建1個工程,先把上面的資源Json、圖片所有都放到工程的Resource文件夾下：

2.在新建工程HelloWorldScene.h中添加頭文件

3.然后在Init（）函數中增加：

4.回調函數的實現

然后我們來看看效果：

 這就是1個簡單的例子，界面制作很簡單，而且以后要更換圖片甚么的也很方便，開發的效果大大提高。這1講就到這里了，下1講我們將把這個利用到我們的游戲中去。

這就是下1講的效果：

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈