CocosBuilder 完全攻略
?
原文地址：http://blog.sina.com.cn/s/blog_6084f58801013voy.html
?歡迎加入開發(fā)群：285275050?
??????????????????????. .
?????????????????????'.-:-.`?
?????????????????????'??:??`
??????????????????.-----:????
????????????????.’???????`.
??????????,????/???????(o) \??
??????????\`._/??????????,__)
??????~~~~~~~~~~~~~~~~~~~~~~~~~~~~
歡迎加入開發(fā)群：285275050?
本文翻譯自：http://www.raywenderlich.com/23996/introduction-to-cocosbuilder
翻譯：彈涂魚
CocosBuilder與interface builder?類似，是cocos2d下簡單快速進(jìn)行精靈，層，場景布局的工具。
CocosBuilder可以快速完美的進(jìn)行菜單和交互場景的布局，如果手動(dòng)去做，這往往讓人頭疼。
在CocosBuilder之前，通過cocs2d為游戲創(chuàng)建基本的接口確實(shí)很痛苦。當(dāng)添加一個(gè)新的菜單或按鈕到你的游戲時(shí)，你通常這樣來做：
l??做個(gè)猜測：“我認(rèn)為這個(gè)按鈕的大小是50＊50”
l??編譯運(yùn)行：“看來有點(diǎn)不太正確”
l??猜測調(diào)整：“60＊50或許更好”
l??整理重復(fù)：“還他媽的不對(duì)，啊！！！！！”
?
?????CocosBuilder?簡化了所有這些步驟，包括重復(fù)迭代設(shè)置檢測精靈位置，這樣使你關(guān)注的焦點(diǎn)移動(dòng)到時(shí)了游戲邏輯，而不是在界面設(shè)計(jì)上令你費(fèi)盡周折，讓你成為一個(gè)更加高效的碼工。這當(dāng)然是件好事，不是嗎？
這個(gè)初級(jí)教程意在教會(huì)你使用CocosBuilder去創(chuàng)建簡單界面，你將學(xué)會(huì)如何如何設(shè)置菜單，按鈕，粒子系統(tǒng)，基礎(chǔ)關(guān)卡布局，將界面與代碼關(guān)聯(lián)。
在這里我們將重新構(gòu)建Cat Jump這個(gè)游戲?，它最初由?Ray and Rod’s?Cocos2D via Minigames工作室開發(fā)，當(dāng)然，此次構(gòu)建?我們將節(jié)約大量的代碼。你將看到CocosBuilder是如何節(jié)約你的時(shí)間和代碼的。
?
我們來以簡單的方式來構(gòu)建一些界面。
?
Cat Jump簡介
Cat Jump描述了一只貓的倒霉一天。當(dāng)它走在路上思考工作時(shí)，突然所有的汽車，卡車，甚至是騎在自行車上的小孩子都朝它駛來。
?
下圖是游戲中的一張預(yù)覽圖：
可憐的小貓只有9條命，你的目標(biāo)是使你的小貓通過躲避障礙物來來活的盡可能時(shí)間長。
為了對(duì)我們要做的游戲有一個(gè)大致的了解，從這里下載沒有使用過CocosBuilder的CatJump版本（鏈接我不加了）。運(yùn)行并玩一會(huì)，挺有趣的。
玩了一會(huì)游戲?，看了一遍代碼，你會(huì)注意到有許多硬編碼的偏移用于設(shè)置菜單，文本條，和精靈的位置。這確實(shí)很痛苦，不過接下來你將學(xué)會(huì)一種簡單的方式。
?
開始教程前，通過以下步驟來重新構(gòu)建項(xiàng)目：
l??在CocosBuilder中重新構(gòu)建主菜單場景。剛剛主菜單場景中的布局通過硬編碼實(shí)現(xiàn)，現(xiàn)在你可刪除那些代碼，這些工作就交給CocosBuilder吧
l??添加選項(xiàng)場景。選項(xiàng)場景包含三個(gè)按鈕用于設(shè)置難度：簡單，中等，困難。點(diǎn)擊每個(gè)按鈕都會(huì)在代碼中調(diào)用相應(yīng)的觸發(fā)事件。
l??添加關(guān)于場景。在關(guān)于場景添加一個(gè)小的粒子系統(tǒng)，通過CocosBuilder你不用編寫一行代碼。
l??通過CocosBuilder重新構(gòu)建游戲場景。你將通過使用CocosBuilder來代替手工設(shè)置精靈位置。
l??通過CocosBuilder重新構(gòu)建游戲結(jié)束場景。
?
最后，你將學(xué)習(xí)如何阻止或解決CocosBuilder中一些問題的技巧。使用CocosBuilder不易出錯(cuò)，不過我們?nèi)匀灰荛_一些障礙，有一點(diǎn)像騎三輪車的小孩子。你需要雷達(dá)去檢測，以便節(jié)約我們的后續(xù)時(shí)間。
?
開始CocosBuilder
?
如果沒準(zhǔn)備好，那么先下載CocosBuilder，確保下載最新版本，寫本文時(shí)使用的2.1版本，在下載界同時(shí)下載實(shí)例文件。
從歸檔文件解壓，并把它拷貝到應(yīng)用程序文件夾。
在開始使用CocosBuilder創(chuàng)建工程前為你的工程創(chuàng)建一個(gè)文件夾，在這里將存儲(chǔ)游戲的資源文件（resources/assets）。
注意：你也可以創(chuàng)建一個(gè)資源文件夾的引用，這個(gè)文件夾可以在你硬盤的任意位置，但是我發(fā)現(xiàn)創(chuàng)建類似這樣的文件夾結(jié)構(gòu)可以讓我知道所有我的文件所在同時(shí)保持合理組織?。
?
在桌面創(chuàng)建一個(gè)文件夾CocosBuilderFiles，在此目錄里創(chuàng)建兩個(gè)子目錄Resources和Scenes。
Resource文件夾包含游戲中用到的所有資源文件。如果你喜歡你可以從CatJump中拷貝所有資源文件，當(dāng)然為了簡單我把用到的資源打成zip包（鏈接原文中找），下載，解壓，拷貝到資源文件夾。
?
打開CocosBuilderFiles在菜單中選擇File\New\New Project，命名工程為CatJump并保存到CocosBuilderFiles目錄。
現(xiàn)在工程已經(jīng)創(chuàng)建，你會(huì)在CocosBuilder左側(cè)滑動(dòng)條中看到Resources和Scenes文件夾。當(dāng)然還有一個(gè)CocosBuilder自動(dòng)創(chuàng)建的一個(gè)文件夾ccbResources，在它旁邊你會(huì)看到一個(gè)新的文件HelloCocosBuilder.ccb，雙擊看到里面的內(nèi)容。
?
它是只包含了一個(gè)Label的基礎(chǔ)布局，顯示著Hello CocosBuilder
?
不用擔(dān)心，你的Cat Jump界面也只比這難一點(diǎn)。
?
?
無需代碼！
我們以創(chuàng)建CatJump的主場景開始，這個(gè)場景有三個(gè)按鈕：
l??開始按鈕—開始游戲
l??選項(xiàng)—設(shè)置游戲難度
l??關(guān)于—介紹玩家如何進(jìn)行游戲
首先，你需要?jiǎng)h除HelloCocosBuilder.ccb文件，它只是程序默認(rèn)創(chuàng)建的場景。
注意：你可能覺得通過CocosBuilder?工程去刪除文件很直接，但我沒能直接刪除。我不得不采取關(guān)閉CocosBuilder，在Finder中刪除HelloCocosBuilder.ccb。然后重新打開CocosBuilder。如果有人知道簡單的方式，請(qǐng)?jiān)谡搲谢靥?/span>
?
接下來，選擇File\New\New File，在下拉菜單中從菜單項(xiàng)中選擇iPhone Landscape?和?iPhone 5 Landscape，另外確保根類型為CCLayer。
點(diǎn)擊Create，命名文件為MainMenuScene，保存到Scenes文件夾。
此時(shí)工程面板看起來像這樣：
這時(shí)你已經(jīng)創(chuàng)建了你的第一個(gè)場景，那么我們來添加一些精靈吧。
點(diǎn)擊工具條的CCSprite按鈕。暗示：下圖圓圈標(biāo)出。
這將添加一個(gè)新的精靈到場景中。
?
選擇新添加的精靈，使它的frame與Title_catjump.png綁定。在右側(cè)的滑動(dòng)條會(huì)顯示出當(dāng)前選中對(duì)象的屬性。具體操作如下圖：
通過拖拽使精靈劇中，或者在右側(cè)滑動(dòng)條中交Anchor Point的X，Y值設(shè)置為0。
注意到只有當(dāng)位置設(shè)置為左下角時(shí)上述操作才會(huì)生效，當(dāng)位置改變時(shí)，你不得不重新設(shè)置X，Y的位置。試試設(shè)置其他值的效果。
?
接下來我們?yōu)閳鼍疤砑影粹o。
點(diǎn)擊下圖中的CCControl按鈕添加?一個(gè)按鈕到屏幕中。
新按鈕有一個(gè)漂亮的背景，這張背景圖可以在ccbResources文件夾找到。通過右側(cè)滑動(dòng)條將標(biāo)題改為Play.
調(diào)整按鈕位置，可以通過拖動(dòng)或右側(cè)滑動(dòng)條設(shè)置屬性來調(diào)整位置。重復(fù)上述操作添加兩個(gè)按鈕，一個(gè)為Option，一個(gè)為About。最終效果如下圖
第一個(gè)場景布局完成了。
?
連接場景到類！
?
開始工作前先來進(jìn)行一些調(diào)整。當(dāng)你通過CocosBuider?創(chuàng)建的CCLayer來設(shè)置場景時(shí)，如果你想使場景層為自定義類，你需要為CocosBuilder指明那個(gè)類。
例如，如果你用MainMenuScene初始化了一個(gè)場景并且你希望它的場景層是你自定義的類，你需要在CocosBuilder的代碼連接區(qū)指明類名。
選中MainMenuScene.ccb，在TimeLine中CCLayer根節(jié)點(diǎn)。
在右側(cè)代碼連接區(qū)設(shè)置自定義類為MainMenuLayer，這樣當(dāng)你初始化場景時(shí)，CocosBuilder會(huì)尋找名叫MainMenuLayer的類去初始化場景層。接下來是要發(fā)布CocosBuilder界面文件，點(diǎn)南擊File，選擇Publish，這將在場景目錄創(chuàng)建一個(gè)名字為MainMenuScene.ccbi的文件。
CocosBuilder介紹到這，接下來介紹如何在Cocos2D下工作。
?
編碼時(shí)間！
首先確保你安裝了最新的Cocos2D，寫本文時(shí)是2.1版。
在Xcode里創(chuàng)建一個(gè)新的Cocos2D工程，并命名為CatJump，設(shè)置目標(biāo)設(shè)備為Iphone：
創(chuàng)建工程并保存到硬盤。
接下來創(chuàng)建一個(gè)新的文件夾Scenes，將后綴為CCBI的文件拷貝到此文件夾，確保“Copy items to destination group’s folder (if needed)”為選中狀態(tài)，另外?CatJump Target也為選中狀態(tài)。
現(xiàn)在需要添加CCBReader文件夾到你的工程中，確保“Copy items to destination group’s folder (if needed)”為選中狀態(tài)。對(duì)CCControlExtension執(zhí)行相同操作。
在CatJump下創(chuàng)建新目錄Layers，創(chuàng)建一個(gè)新的類MainMenuLayer使它繼承自CCLayer。在開始寫代碼前在AppDelegate.m文件中添加頭文件：
＃import “CCBReader.h”
另外將application: didFinishLaunchingWithOptions:中的本行
[director runWithScene: [IntroLayer scene]];
?
替換為：
[director runWithScene: [CCBReader sceneWithNodeGraphFromFile:@"MainMenuScene.ccbi"]];
?
上面就是你要運(yùn)行由CocosBuilder創(chuàng)建的場景所需要的所有代碼，CCBReader會(huì)解析MainMenuScene.ccbi并創(chuàng)建場景。
在運(yùn)行這個(gè)程序前還需要最后一步，還記在CocosBUilder中添加到時(shí)場景中的背景圖和來自ccbReource文件夾下的按鈕圖片嗎？
所有這些文件還沒有添加?到你的工程中，你需要添加?這些文件到你的工程，否則程序會(huì)崩潰。
將下圖中的文件拷貝到你的工程，記住勾選Copy items to destination group’s folder (if needed)。
現(xiàn)在編譯工程，如果?在編譯文件CCBReader.m時(shí)出現(xiàn)?錯(cuò)誤，用下面這行代碼替換錯(cuò)誤行。
運(yùn)行程序，如果一切OK，你會(huì)看到：
主要事件！
?
恭喜，你以經(jīng)有了一個(gè)通過CocosBuilder布局的場景，并且加載場景只需一行代碼。但是，當(dāng)用戶點(diǎn)擊按鈕時(shí)你如何去捕捉事件。
事實(shí)上，CocosBuilder簡化了這個(gè)過程。它可以指定當(dāng)用戶點(diǎn)擊按鈕時(shí)要調(diào)用的方法名，你也可以指定調(diào)用方法時(shí)所需要的觸發(fā)事件（功過?checkbox）。
?
我們來為MainMenuScene添加這個(gè)功能。打開MainMenuScene.ccb，選中Play按鈕，在右側(cè)面板的CCNode部分設(shè)置其Tag屬性為1。接下來CCControl部分，在Selector對(duì)應(yīng)的文本框中填寫要被調(diào)用的方法名-- buttonPressed:。同時(shí)設(shè)置Target選項(xiàng)為?Document root。（又到了與層連接的時(shí)候了）
以同樣的方式設(shè)置其他兩個(gè)按鈕，不同的是設(shè)置Options的Tag為2?，About的Tag為3。
?
現(xiàn)在你已經(jīng)為你的按鈕綁定了事件，保存更改并發(fā)布，將發(fā)布的文件拷貝到Xcode。
接下來，打開MainMenuLayer.m?，添加以下頭引用。
#import "CCControlButton.h" #import "CCBReader.h"同時(shí)在＃import下添加以下宏定義
#define PLAY_BUTTON_TAG 1
#define OPTIONS_BUTTON_TAG 2
#define ABOUT_BUTTON_TAG 3
?
接下來在 MainMenuLayer.m 中添加 buttonPressed: 方法
編譯運(yùn)行，現(xiàn)在你的主菜單場景已經(jīng)可能實(shí)現(xiàn)功能。
現(xiàn)在點(diǎn)擊按鈕程序會(huì)崩潰，因?yàn)槠渌麍鼍斑€沒有創(chuàng)建。下一步我們將去創(chuàng)建。
?
不選難的！
?
難度選擇場景也有三個(gè)按鈕，這里的三個(gè)按鈕用于設(shè)置游戲難度，但是還要有一個(gè)返回按鈕。創(chuàng)建一個(gè)場景命名為OptionsScene，保存到Scenes目錄。
添加三個(gè)按鈕分別為Easy，Medium和Hard，并設(shè)置其Tag分別為1，2，3。接著注冊事件difficultyButtonPressed并設(shè)置目標(biāo)為Document Root。
注意：什么是Document Root？它代表Time Line下的根節(jié)點(diǎn)。一會(huì)你會(huì)設(shè)置根節(jié)點(diǎn)為自定義類。這意味著OptionsLayer就是根節(jié)點(diǎn)。
布局如下：
現(xiàn)在添加?返回按鈕。這次我們用CCMenu的菜單項(xiàng)來代替CCControlButton來創(chuàng)建返回按鈕。
單擊工具條的CCMenu按鈕：
將創(chuàng)建的CCMenu節(jié)點(diǎn)添加到OptionsScene Layer,現(xiàn)在點(diǎn)擊?CCMenuItemImage
按鈕來添加 ? 一個(gè) CCMenuItemImage 按鈕
就像你對(duì)MainMenuScene的操作，為OptionsScene添加自定義類。命名為
創(chuàng)建OptionsLayer，并在OpetionsLayer.m中
添加粒子—火焰！
?
點(diǎn)擊工具條的CCParticleSystemQuad按鈕
最終效果圖如下：
同上，綁定自定義類。
?
最后介紹關(guān)于精靈的綁定，由于原文比較啰唆，這里我只給出綁定過程。
選中精靈：在右側(cè)面板中找到
選中Doc root var，在文本框中輸入對(duì)應(yīng)精靈的變量名：
ok，關(guān)于CocosBuilder的使用就介紹到這。
?
翻譯：彈涂魚
PS ：歡迎加入開發(fā)群： 285275050總結(jié)
以上是生活随笔為你收集整理的CocosBuilder 完全攻略的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 桌面窗口管理器和csrss导致Windo
- 下一篇： 20 多个国外优秀Android开源 A