歡迎加入開發羣：285275050
. .
'.-:-.`
' : `
.-----:
.’ `.
, / (o)
`._/ ,__)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
歡迎加入開發羣：285275050
本文翻譯自：http://www.raywenderlich.com/23996/introduction-to-cocosbuilder
翻譯：彈塗魚
CocosBuilder與interface builder 類似，是cocos2d下簡單快速進行精靈，層，場景佈局的工具。
CocosBuilder可以快速完美的進行菜單和交互場景的佈局，如果手動去做，這往往讓人頭疼。
在CocosBuilder之前，通過cocs2d爲遊戲創建基本的接口確實很痛苦。當添加一個新的菜單或按鈕到你的遊戲時，你通常這樣來做：
l 做個猜測：“我認爲這個按鈕的大小是50＊50”
l 編譯運行：“看來有點不太正確”
l 猜測調整：“60＊50或許更好”
l 整理重複：“還他媽的不對，啊！！！！！”
![[轉載]CocosBuilder <wbr>完全攻略 <wbr>（譯）](https://pic1.xuehuaimg.com/proxy/csdn/http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif "[轉載]CocosBuilder <wbr>完全攻略 <wbr>（譯）")
CocosBuilder 簡化了所有這些步驟，包括重複迭代設置檢測精靈位置，這樣使你關注的焦點移動到時了遊戲邏輯，而不是在界面設計上令你費盡周折，讓你成爲一個更加高效的碼工。這當然是件好事，不是嗎？
這個初級教程意在教會你使用CocosBuilder去創建簡單界面，你將學會如何如何設置菜單，按鈕，粒子系統，基礎關卡布局，將界面與代碼關聯。
在這裏我們將重新構建Cat Jump這個遊戲 ，它最初由 Ray and Rod’s Cocos2D via Minigames工作室開發，當然，此次構建 我們將節約大量的代碼。你將看到CocosBuilder是如何節約你的時間和代碼的。
我們來以簡單的方式來構建一些界面。
Cat Jump簡介
Cat Jump描述了一隻貓的倒黴一天。當它走在路上思考工作時，突然所有的汽車，卡車，甚至是騎在自行車上的小孩子都朝它駛來。
下圖是遊戲中的一張預覽圖：
可憐的小貓只有9條命，你的目標是使你的小貓通過躲避障礙物來來活的儘可能時間長。
爲了對我們要做的遊戲有一個大致的瞭解，從這裏下載沒有使用過CocosBuilder的CatJump版本（鏈接我不加了）。運行並玩一會，挺有趣的。
玩了一會遊戲 ，看了一遍代碼，你會注意到有許多硬編碼的偏移用於設置菜單，文本條，和精靈的位置。這確實很痛苦，不過接下來你將學會一種簡單的方式。
開始教程前，通過以下步驟來重新構建項目：
l 在CocosBuilder中重新構建主菜單場景。剛剛主菜單場景中的佈局通過硬編碼實現，現在你可刪除那些代碼，這些工作就交給CocosBuilder吧
l 添加選項場景。選項場景包含三個按鈕用於設置難度：簡單，中等，困難。點擊每個按鈕都會在代碼中調用相應的觸發事件。
l 添加關於場景。在關於場景添加一個小的粒子系統，通過CocosBuilder你不用編寫一行代碼。
l 通過CocosBuilder重新構建遊戲場景。你將通過使用CocosBuilder來代替手工設置精靈位置。
l 通過CocosBuilder重新構建遊戲結束場景。
最後，你將學習如何阻止或解決CocosBuilder中一些問題的技巧。使用CocosBuilder不易出錯，不過我們仍然要避開一些障礙，有一點像騎三輪車的小孩子。你需要雷達去檢測，以便節約我們的後續時間。
開始CocosBuilder
如果沒準備好，那麼先下載CocosBuilder，確保下載最新版本，寫本文時使用的2.1版本，在下載界同時下載實例文件。
從歸檔文件解壓，並把它拷貝到應用程序文件夾。
在開始使用CocosBuilder創建工程前爲你的工程創建一個文件夾，在這裏將存儲遊戲的資源文件（resources/assets）。
注意：你也可以創建一個資源文件夾的引用，這個文件夾可以在你硬盤的任意位置，但是我發現創建類似這樣的文件夾結構可以讓我知道所有我的文件所在同時保持合理組織 。
在桌面創建一個文件夾CocosBuilderFiles，在此目錄裏創建兩個子目錄Resources和Scenes。
Resource文件夾包含遊戲中用到的所有資源文件。如果你喜歡你可以從CatJump中拷貝所有資源文件，當然爲了簡單我把用到的資源打成zip包（鏈接原文中找），下載，解壓，拷貝到資源文件夾。
打開CocosBuilderFiles在菜單中選擇FileNewNew Project，命名工程爲CatJump並保存到CocosBuilderFiles目錄。
現在工程已經創建，你會在CocosBuilder左側滑動條中看到Resources和Scenes文件夾。當然還有一個CocosBuilder自動創建的一個文件夾ccbResources，在它旁邊你會看到一個新的文件HelloCocosBuilder.ccb，雙擊看到裏面的內容。
它是隻包含了一個Label的基礎佈局，顯示着Hello CocosBuilder
不用擔心，你的Cat Jump界面也只比這難一點。
無需代碼！
我們以創建CatJump的主場景開始，這個場景有三個按鈕：
l 開始按鈕—開始遊戲
l 選項—設置遊戲難度
l 關於—介紹玩家如何進行遊戲
首先，你需要刪除HelloCocosBuilder.ccb文件，它只是程序默認創建的場景。
注意：你可能覺得通過CocosBuilder 工程去刪除文件很直接，但我沒能直接刪除。我不得不採取關閉CocosBuilder，在Finder中刪除HelloCocosBuilder.ccb。然後重新打開CocosBuilder。如果有人知道簡單的方式，請在論壇中回帖。
接下來，選擇FileNewNew File，在下拉菜單中從菜單項中選擇iPhone Landscape 和 iPhone 5 Landscape，另外確保根類型爲CCLayer。
點擊Create，命名文件爲MainMenuScene，保存到Scenes文件夾。
此時工程面板看起來像這樣：
這時你已經創建了你的第一個場景，那麼我們來添加一些精靈吧。
點擊工具條的CCSprite按鈕。暗示：下圖圓圈標出。
這將添加一個新的精靈到場景中。
選擇新添加的精靈，使它的frame與Title_catjump.png綁定。在右側的滑動條會顯示出當前選中對象的屬性。具體操作如下圖：
通過拖拽使精靈劇中，或者在右側滑動條中交Anchor Point的X，Y值設置爲0。
注意到只有當位置設置爲左下角時上述操作纔會生效，當位置改變時，你不得不重新設置X，Y的位置。試試設置其他值的效果。
接下來我們爲場景添加按鈕。
點擊下圖中的CCControl按鈕添加 一個按鈕到屏幕中。
新按鈕有一個漂亮的背景，這張背景圖可以在ccbResources文件夾找到。通過右側滑動條將標題改爲Play.
調整按鈕位置，可以通過拖動或右側滑動條設置屬性來調整位置。重複上述操作添加兩個按鈕，一個爲Option，一個爲About。最終效果如下圖
第一個場景佈局完成了。
連接場景到類！
開始工作前先來進行一些調整。當你通過CocosBuider 創建的CCLayer來設置場景時，如果你想使場景層爲自定義類，你需要爲CocosBuilder指明那個類。
例如，如果你用MainMenuScene初始化了一個場景並且你希望它的場景層是你自定義的類，你需要在CocosBuilder的代碼連接區指明類名。
選中MainMenuScene.ccb，在TimeLine中CCLayer根節點。
在右側代碼連接區設置自定義類爲MainMenuLayer，這樣當你初始化場景時，CocosBuilder會尋找名叫MainMenuLayer的類去初始化場景層。接下來是要發佈CocosBuilder界面文件，點南擊File，選擇Publish，這將在場景目錄創建一個名字爲MainMenuScene.ccbi的文件。
CocosBuilder介紹到這，接下來介紹如何在Cocos2D下工作。
編碼時間！
首先確保你安裝了最新的Cocos2D，寫本文時是2.1版。
在Xcode裏創建一個新的Cocos2D工程，並命名爲CatJump，設置目標設備爲Iphone：
創建工程並保存到硬盤。
接下來創建一個新的文件夾Scenes，將後綴爲CCBI的文件拷貝到此文件夾，確保“Copy items to destination group’s folder (if needed)”爲選中狀態，另外 CatJump Target也爲選中狀態。
現在需要添加CCBReader文件夾到你的工程中，確保“Copy items to destination group’s folder (if needed)”爲選中狀態。對CCControlExtension執行相同操作。
在CatJump下創建新目錄Layers，創建一個新的類MainMenuLayer使它繼承自CCLayer。在開始寫代碼前在AppDelegate.m文件中添加頭文件：
＃import “CCBReader.h”
另外將application: didFinishLaunchingWithOptions:中的本行
[director runWithScene: [IntroLayer scene]];
替換爲：
[director runWithScene: [CCBReader sceneWithNodeGraphFromFile:@"MainMenuScene.ccbi"]];
上面就是你要運行由CocosBuilder創建的場景所需要的所有代碼，CCBReader會解析MainMenuScene.ccbi並創建場景。
在運行這個程序前還需要最後一步，還記在CocosBUilder中添加到時場景中的背景圖和來自ccbReource文件夾下的按鈕圖片嗎？
所有這些文件還沒有添加 到你的工程中，你需要添加 這些文件到你的工程，否則程序會崩潰。
將下圖中的文件拷貝到你的工程，記住勾選Copy items to destination group’s folder (if needed)。
現在編譯工程，如果 在編譯文件CCBReader.m時出現 錯誤，用下面這行代碼替換錯誤行。
運行程序，如果一切OK，你會看到：
主要事件！
恭喜，你以經有了一個通過CocosBuilder佈局的場景，並且加載場景只需一行代碼。但是，當用戶點擊按鈕時你如何去捕捉事件。
事實上，CocosBuilder簡化了這個過程。它可以指定當用戶點擊按鈕時要調用的方法名，你也可以指定調用方法時所需要的觸發事件（功過 checkbox）。
我們來爲MainMenuScene添加這個功能。打開MainMenuScene.ccb，選中Play按鈕，在右側面板的CCNode部分設置其Tag屬性爲1。接下來CCControl部分，在Selector對應的文本框中填寫要被調用的方法名-- buttonPressed:。同時設置Target選項爲 Document root。（又到了與層連接的時候了）
以同樣的方式設置其他兩個按鈕，不同的是設置Options的Tag爲2 ，About的Tag爲3。
現在你已經爲你的按鈕綁定了事件，保存更改併發布，將發佈的文件拷貝到Xcode。
接下來，打開MainMenuLayer.m ，添加以下頭引用。
#import "CCControlButton.h"
#import "CCBReader.h"
同時在＃import下添加以下宏定義
#define PLAY_BUTTON_TAG 1
#define OPTIONS_BUTTON_TAG 2
#define ABOUT_BUTTON_TAG 3
接下來在MainMenuLayer.m中添加buttonPressed:方法
編譯運行，現在你的主菜單場景已經可能實現功能。
現在點擊按鈕程序會崩潰，因爲其他場景還沒有創建。下一步我們將去創建。
不選難的！
難度選擇場景也有三個按鈕，這裏的三個按鈕用於設置遊戲難度，但是還要有一個返回按鈕。創建一個場景命名爲OptionsScene，保存到Scenes目錄。
添加三個按鈕分別爲Easy，Medium和Hard，並設置其Tag分別爲1，2，3。接着註冊事件difficultyButtonPressed並設置目標爲Document Root。
注意：什麼是Document Root？它代表Time Line下的根節點。一會你會設置根節點爲自定義類。這意味着OptionsLayer就是根節點。
佈局如下：
現在添加 返回按鈕。這次我們用CCMenu的菜單項來代替CCControlButton來創建返回按鈕。
單擊工具條的CCMenu按鈕：
將創建的CCMenu節點添加到OptionsScene Layer,現在點擊 CCMenuItemImage
按鈕來添加 一個CCMenuItemImage按鈕
就像你對MainMenuScene的操作，爲OptionsScene添加自定義類。命名爲
創建OptionsLayer，並在OpetionsLayer.m中
添加粒子—火焰！
點擊工具條的CCParticleSystemQuad按鈕
最終效果圖如下：
同上，綁定自定義類。
最後介紹關於精靈的綁定，由於原文比較囉唆，這裏我只給出綁定過程。
選中精靈：在右側面板中找到
選中Doc root
var，在文本框中輸入對應精靈的變量名：
ok，關於CocosBuilder的使用就介紹到這。
翻譯：彈塗魚
PS：歡迎加入開發羣：285275050
