CocosBuilder@H_301_13@与interface builder@H_301_13@类似，是cocos2d@H_301_13@下简单快速进行精灵，层，场景布局的工具。

CocosBuilder@H_301_13@可以快速完美的进行菜单和交互场景的布局，如果手动去做，这往往让人头疼。

@H_301_13@在CocosBuilder@H_301_13@之前，通过cocs2d@H_301_13@为游戏创建基本的接口确实很痛苦。当添加一个新的菜单或按钮到你的游戏时，你通常这样来做：

l@H_301_13@做个猜测：“@H_301_13@我认为这个按钮的大小是50@H_301_13@＊50”

l@H_301_13@编译运行：“@H_301_13@看来有点不太正确”

l@H_301_13@猜测调整：“60@H_301_13@＊50@H_301_13@或许更好”

l@H_301_13@整理重复：“@H_301_13@还他妈的不对，啊！！！！！”

@H_502_118@ CocosBuilder@H_301_13@简化了所有这些步骤，包括重复迭代设置检测精灵位置，这样使你关注的焦点移动到时了游戏逻辑，而不是在界面设计上令你费尽周折，让你成为一个更加高效的码工。这当然是件好事，不是吗？

@H_502_118@

@H_502_118@ @H_301_13@这个初级教程意在教会你使用CocosBuilder@H_301_13@去创建简单界面，你将学会如何如何设置菜单，按钮，粒子系统，基础关卡布局，将界面与代码关联。

@H_502_118@ @H_301_13@在这里我们将重新构建Cat Jump@H_301_13@这个游戏@H_301_13@，它最初由Ray and Rod’sCocos2D via Minigames@H_301_13@工作室开发，当然，此次构建@H_301_13@我们将节约大量的代码。你将看到CocosBuilder@H_301_13@是如何节约你的时间和代码的。

@H_502_118@

@H_502_118@ @H_301_13@我们来以简单的方式来构建一些界面。

@H_502_118@ Cat Jump@H_301_13@简介

@H_502_118@ Cat Jump@H_301_13@描述了一只猫的倒霉一天。当它走在路上思考工作时，突然所有的汽车，卡车，甚至是骑在自行车上的小孩子都朝它驶来。

@H_502_118@ @H_301_13@下图是游戏中的一张预览图：

@H_502_118@

@H_301_13@可怜的小猫只有9@H_301_13@条命，你的目标是使你的小猫通过躲避障碍物来来活的尽可能时间长。

@H_301_13@为了对我们要做的游戏有一个大致的了解，从这里下载没有使用过CocosBuilder@H_301_13@的CatJump@H_301_13@版本（链接我不加了）。运行并玩一会，挺有趣的。

@H_301_13@玩了一会游戏@H_301_13@，看了一遍代码，你会注意到有许多硬编码的偏移用于设置菜单，文本条，和精灵的位置。这确实很痛苦，不过接下来你将学会一种简单的方式。

@H_502_118@ @H_301_13@开始教程前，通过以下步骤来重新构建项目：

l@H_301_13@在CocosBuilder@H_301_13@中重新构建主菜单场景。刚刚主菜单场景中的布局通过硬编码实现，现在你可删除那些代码，这些工作就交给CocosBuilder@H_301_13@吧

l@H_301_13@添加选项场景。选项场景包含三个按钮用于设置难度：简单，中等，困难。点击每个按钮都会在代码中调用相应的触发事件。

l@H_301_13@添加关于场景。在关于场景添加一个小的粒子系统，通过CocosBuilder@H_301_13@你不用编写一行代码。

l@H_301_13@通过CocosBuilder@H_301_13@重新构建游戏场景。你将通过使用CocosBuilder@H_301_13@来代替手工设置精灵位置。

l@H_301_13@通过CocosBuilder@H_301_13@重新构建游戏结束场景。

@H_502_118@

@H_502_118@ 最后，你将学习如何阻止或解决CocosBuilder中一些问题的技巧。使用CocosBuilder不易出错，不过我们仍然要避开一些障碍，有一点像骑三轮车的小孩子。你需要雷达去检测，以便节约我们的后续时间。

@H_502_118@ 开始CocosBuilder

@H_502_118@ @H_301_13@如果没准备好，那么先下载CocosBuilder@H_301_13@，确保下载最新版本，写本文时使用的2.1@H_301_13@版本，在下载界同时下载实例文件。

@H_502_118@

@H_502_118@ @H_301_13@从归档文件解压，并把它拷贝到应用程序文件夹。

@H_502_118@ @H_301_13@在开始使用CocosBuilder@H_301_13@创建工程前为你的工程创建一个文件夹，在这里将存储游戏的资源文件（resources/assets@H_301_13@）。

@H_502_118@ 注意：你也可以创建一个资源文件夹的引用，这个文件夹可以在你硬盘的任意位置，但是我发现创建类似这样的文件夹结构可以让我知道所有我的文件所在同时保持合理组织。

@H_502_118@ @H_301_13@在桌面创建一个文件夹CocosBuilderFiles@H_301_13@，在此目录里创建两个子目录Resources@H_301_13@和Scenes@H_301_13@。

@H_502_118@

@H_502_118@ Resource@H_301_13@文件夹包含游戏中用到的所有资源文件。如果你喜欢你可以从CatJump@H_301_13@中拷贝所有资源文件，当然为了简单我把用到的资源打成zip@H_301_13@包（链接原文中找），下载，解压，拷贝到资源文件夹。

@H_502_118@ @H_301_13@打开CocosBuilderFiles@H_301_13@在菜单中选择File\New\New Project@H_301_13@，命名工程为CatJump@H_301_13@并保存到CocosBuilderFiles@H_301_13@目录。

@H_502_118@ @H_301_13@现在工程已经创建，你会在CocosBuilder@H_301_13@左侧滑动条中看到Resources@H_301_13@和Scenes@H_301_13@文件夹。当然还有一个CocosBuilder@H_301_13@自动创建的一个文件夹ccbResources@H_301_13@，在它旁边你会看到一个新的文件HelloCocosBuilder.ccb@H_301_13@，双击看到里面的内容。

@H_502_118@ @H_301_13@它是只包含了一个Label@H_301_13@的基础布局，显示着Hello CocosBuilder

@H_502_118@

@H_502_118@ @H_301_13@不用担心，你的Cat Jump@H_301_13@界面也只比这难一点。

@H_502_118@

@H_502_118@ 无需代码！

@H_502_118@ @H_301_13@我们以创建CatJump@H_301_13@的主场景开始，这个场景有三个按钮：

l@H_301_13@开始按钮—@H_301_13@开始游戏

l@H_301_13@选项—@H_301_13@设置游戏难度

l@H_301_13@关于—@H_301_13@介绍玩家如何进行游戏

@H_502_118@ 首先，你需要删除HelloCocosBuilder.ccb文件，它只是程序默认创建的场景。

@H_502_118@ 注意：你可能觉得通过CocosBuilder工程去删除文件很直接，但我没能直接删除。我不得不采取关闭CocosBuilder，在Finder中删除HelloCocosBuilder.ccb。然后重新打开CocosBuilder。如果有人知道简单的方式，请在论坛中回帖。

@H_502_118@ 接下来，选择File\New\New File，在下拉菜单中从菜单项中选择iPhone Landscape和iPhone 5 Landscape，另外确保根类型为CCLayer。

@H_502_118@

@H_502_118@

@H_502_118@ 点击Create，命名文件为MainMenuScene，保存到Scenes文件夹。

@H_502_118@ 此时工程面板看起来像这样：

@H_502_118@

@H_502_118@ 这时你已经创建了你的第一个场景，那么我们来添加一些精灵吧。

@H_502_118@ 点击工具条的CCSprite按钮。暗示：下图圆圈标出。

@H_502_118@

@H_502_118@ 这将添加一个新的精灵到场景中。

@H_502_118@ 选择新添加的精灵，使它的frame与Title_catjump.png绑定。在右侧的滑动条会显示出当前选中对象的属性。具体操作如下图：

@H_502_118@

@H_502_118@ 通过拖拽使精灵剧中，或者在右侧滑动条中交Anchor Point的X，Y值设置为0。

@H_502_118@ 注意到只有当位置设置为左下角时上述操作才会生效，当位置改变时，你不得不重新设置X，Y的位置。试试设置其他值的效果。

@H_502_118@ 接下来我们为场景添加按钮。

@H_502_118@ 点击下图中的CCControl按钮添加一个按钮到屏幕中。

@H_502_118@

@H_502_118@ 新按钮有一个漂亮的背景，这张背景图可以在ccbResources文件夹找到。通过右侧滑动条将标题改为Play.

@H_502_118@

@H_502_118@

@H_502_118@ 调整按钮位置，可以通过拖动或右侧滑动条设置属性来调整位置。重复上述操作添加两个按钮，一个为Option，一个为About。最终效果如下图

@H_502_118@

@H_502_118@ 第一个场景布局完成了。

@H_502_118@ 连接场景到类！

开始工作前先来进行一些调整。当你通过CocosBuider创建的CCLayer来设置场景时，如果你想使场景层为自定义类，你需要为CocosBuilder指明那个类。

例如，如果你用MainMenuScene初始化了一个场景并且你希望它的场景层是你自定义的类，你需要在CocosBuilder的代码连接区指明类名。

选中MainMenuScene.ccb，在TimeLine中CCLayer根节点。

在右侧代码连接区设置自定义类为MainMenuLayer，这样当你初始化场景时，CocosBuilder会寻找名叫MainMenuLayer的类去初始化场景层。接下来是要发布CocosBuilder界面文件，点南击File，选择Publish，这将在场景目录创建一个名字为MainMenuScene.ccbi的文件。

CocosBuilder介绍到这，接下来介绍如何在Cocos2D下工作。

@H_502_118@ 编码时间！

@H_502_118@ 首先确保你安装了最新的Cocos2D，写本文时是2.1版。

@H_502_118@ 在Xcode里创建一个新的Cocos2D工程，并命名为CatJump，设置目标设备为Iphone：

@H_502_118@ @L_301_16@

创建工程并保存到硬盘。

@H_502_118@ 接下来创建一个新的文件夹Scenes，将后缀为CCBI的文件拷贝到此文件夹，确保“Copy items to destination group’s folder (if needed)”为选中状态，另外CatJump Target也为选中状态。

@H_502_118@ 现在需要添加CCBReader文件夹到你的工程中，确保“Copy items to destination group’s folder (if needed)”为选中状态。对CCControlExtension执行相同操作。

@H_502_118@ 在CatJump下创建新目录Layers，创建一个新的类MainMenuLayer使它继承自CCLayer。在开始写代码前在AppDelegate.m文件中添加头文件：

@H_502_118@ ＃import “CCBReader.h”

@H_502_118@ 另外将application: didFinishLaunchingWithOptions:中的本行

@H_502_118@ [director runWithScene: [IntroLayer scene]];

@H_502_118@ 替换为：

@H_502_118@ [director runWithScene: [CCBReader sceneWithNodeGraphFromFile:@"MainMenuScene.ccbi"]];

@H_502_118@ 上面就是你要运行由CocosBuilder创建的场景所需要的所有代码，CCBReader会解析MainMenuScene.ccbi并创建场景。

@H_502_118@ 在运行这个程序前还需要最后一步，还记在CocosBUilder中添加到时场景中的背景图和来自ccbReource文件夹下的按钮图片吗？

@H_502_118@ 所有这些文件还没有添加到你的工程中，你需要添加这些文件到你的工程，否则程序会崩溃。

@H_502_118@ 将下图中的文件拷贝到你的工程，记住勾选Copy items to destination group’s folder (if needed)。

@H_502_118@

@H_502_118@ 现在编译工程，如果在编译文件CCBReader.m时出现错误，用下面这行代码替换错误行。

@H_502_118@ 运行程序，如果一切OK，你会看到：

@H_502_118@

@H_502_118@

@H_502_118@ 主要事件！

@H_502_118@ 恭喜，你以经有了一个通过CocosBuilder布局的场景，并且加载场景只需一行代码。但是，当用户点击按钮时你如何去捕捉事件。

事实上，CocosBuilder简化了这个过程。它可以指定当用户点击按钮时要调用的方法名，你也可以指定调用方法时所需要的触发事件（功过checkBox）。

@H_502_118@ 我们来为MainMenuScene添加这个功能。打开MainMenuScene.ccb，选中Play按钮，在右侧面板的CCNode部分设置其Tag属性为1。接下来CCControl部分，在Selector对应的文本框中填写要被调用的方法名-- buttonPressed:。同时设置Target选项为Document root。（又到了与层连接的时候了）

@H_502_118@

@H_502_118@ 以同样的方式设置其他两个按钮，不同的是设置Options的Tag为2，About的Tag为3。

@H_502_118@ 现在你已经为你的按钮绑定了事件，保存更改并发布，将发布的文件拷贝到Xcode。

@H_502_118@ 接下来，打开MainMenuLayer.m，添加以下头引用。

#import "CCControlButton.h"

#import "CCBReader.h"

@H_502_118@ 同时在＃import下添加以下宏定义

#define PLAY_BUTTON_TAG 1

#define OPTIONS_BUTTON_TAG 2

#define ABOUT_BUTTON_TAG 3

@H_502_118@

接下来在 MainMenuLayer.m 中添加 buttonPressed: 方法 @H_502_118@

@H_502_118@

@H_502_118@ 编译运行，现在你的主菜单场景已经可能实现功能。

@H_502_118@

@H_502_118@ 现在点击按钮程序会崩溃，因为其他场景还没有创建。下一步我们将去创建。

@H_502_118@ 不选难的！

@H_502_118@ 难度选择场景也有三个按钮，这里的三个按钮用于设置游戏难度，但是还要有一个返回按钮。创建一个场景命名为OptionsScene，保存到Scenes目录。

@H_502_118@ 添加三个按钮分别为Easy，Medium和Hard，并设置其Tag分别为1，2，3。接着注册事件difficultyButtonPressed并设置目标为Document Root。

@H_502_118@ 注意：什么是Document Root？它代表Time Line下的根节点。一会你会设置根节点为自定义类。这意味着OptionsLayer就是根节点。

@H_502_118@ 布局如下：

@H_502_118@

@H_502_118@ 现在添加返回按钮。这次我们用CCMenu的菜单项来代替CCControlButton来创建返回按钮。

@H_502_118@ 单击工具条的CCMenu按钮：

@H_502_118@

@H_502_118@ 将创建的CCMenu节点添加到OptionsScene Layer,现在点击CCMenuItemImage

按钮来添加 一个 CCMenuItemImage 按钮

@H_502_118@

就像你对MainMenuScene的操作，为OptionsScene添加自定义类。命名为

@H_502_118@

@H_502_118@ 创建OptionsLayer，并在OpetionsLayer.m中

@H_502_118@

@H_502_118@ 添加粒子—火焰！

点击工具条的CCParticleSystemQuad按钮

@H_502_118@ 最终效果图如下：

@H_502_118@

@H_502_118@ 同上，绑定自定义类。

@H_502_118@

@H_502_118@ 最后介绍关于精灵的绑定，由于原文比较啰唆，这里我只给出绑定过程。

@H_502_118@ 选中精灵：在右侧面板中找到

@H_502_118@

选中Doc root var，在文本框中输入对应精灵的变量名：

@H_502_118@

@H_502_118@ ok，关于CocosBuilder的使用就介绍到这。