第八章 cocos2d游戏编辑器
这个世界总有一部分人不满足现有的方法去实现目标，他们会发明一些新的方法。让我们的工作变的更简单和轻松。我们一定都非常喜欢xcode的Interbuilder的界面化编辑器，在coco2d里面也有一款十分强大的界面编辑器。
cocosBuilder编辑器正是作为可视化编辑的补充，成为cocos2D-iphone和cocos2D-x的可视化编辑器，cocos2D-x从2.0版本开始支持cocosBuilder，同样cocosBuilder也是2.0版本与之对应，本篇来就介绍cocoBuilder编辑器的使用和将cocosBuilder工程倒入到cocos2D-x的程序工程里。
做为一个程序员，如果能掌握好cocosBuilder，那么就可以把界面工程外包给美术，让游戏开发成为一件十分愉快的事情。
8.1. 认识CocosBuilder
可以通过cocosBuilder的官方网站http://cocosbuilder.com/下载cocosBuilder，下载后解压下载文件双击便可运行cocosBuilder[Microsoft1]
启动cocos2d后可以看到如下的界面：
图 8.1_01
最上端是工具条区，可以添加各类控件，如节点，层，精灵等。
左侧是资源文件区，工程中的项目文件可以都显示在这里，但是可以没有文件预览的功能，这样你就不得不记住每个图片的名字。
中间是界面区，我们可以所见即所得，直接将工具条里的各类控件拖放到界面，这也是cocosBuilder存在的最大意义，程序员们不必像过去一样计算每个元素的坐标位置，而是直接通过界面来调整，而且这类型的工作也可以有美术工作人员来完成。
下面是动画区，通过时间轴可以控制各类动画的行为。
右面是参数，在界面调整的参数会及时反映到参数去，当然你也可以在参数区里面对界面的控制进行修改，已达到精确的控制位置的信息。
8.2．创建CoscosBudilder项目
8.2.1 创建cocosBuilder目录
在桌面创建一个文件夹CocosBuilderFiles，在此目录里创建两个子目录Resources和Scenes。
我们把资源文件放到Resources文件中，新建cocosBuilder项目的时候，我们最好在xcode的工程的资源目录中建立，这样xcode工程中的资源都可以被cocosBuilder所使用。
8.2.2 创建cocosBuilder项目
cocosBuilder项目保存在ccbproj文件中，由多个ccb文件组成，而这些ccb文件需要发布后布成ccbi文件，才能被游戏程序所读取。
我们可以通过file中的选项新建工程或者打开工程。打开CocosBuilderFiles在菜单中选择File\New\NewProject，命名工程为MyTest并保存到CocosBuilderFiles目录。
现在工程已经创建，你会在CocosBuilder左侧滑动条中看到Resources和Scenes文件夹。当然还有一个CocosBuilder自动创建的一个文件夹ccbResources[Microsoft3] ，
在它旁边你会看到一个新的文件HelloCocosBuilder.ccb，双击看到里面的内容。它是只包含了一个Label的基础布局，显示着HelloCocosBuilder
接下来，我们需要新建文件，就是产生一个一个的ccb文件，这就是一个一个的界面，首先我们需要确定界面的大小，我们可以通过file->创建一个新的文件：
点击+号可以选择自定义大小，也即是说我们的界面不一定和手机的屏幕一样大，如果比屏幕大，将来我们可以通过程序让背景滚动即可。
通过cocosBuilder我们可以在一个工程中创建多个界面，这些文件名称为ccb，需要发布成ccbi文件，才可以被程序读取，就想phoneshope也有的发布过程一样。下面是我们生成的ccb文件。
我们可以通过file菜单中的publish，就可以将ccb文件发布成ccbi文件
8.2.3 读取ccbi文件
在cocos2d工程中很容易把ccbi文件读取到文件内存中，并根据此生成我们想要的界面[Microsoft6] :
当然也可以生成CCNode
不过这么做的前提条件是我们需要把相关的文件的类库文件添加到工程。这些文件都在cocosBuilder的发布包中。
CCBReader包含了cocosBuilder读取ccb文件的相关类；
CCCOontrollExtension中包含了扩展的控件按钮，颜色选择器，滚动条等；
CCScrollView包含了可滚动的界面；
SSZipArchive包含了压缩和解压缩的代码；
8.2.4 构建我们的界面
下面就要是到构建我们的界面的时候了，在这之前我们需要了解可以添加那些元素到界面上
从左到右我们将依次讲解各个图标代表的含义：
节点：一般很少用，如果用到了话，我们需要在代码中去使用，因为它是不可见的。
层：有普通层，颜色层和渐变层，还有一个滚动按钮，这可是cocos2d中没有的。
精灵：有普通的精灵和可以带圆角拉伸的精灵。
标签：有普通的标签和用图片组成文字的标签。
菜单：可以加菜单和菜单条。
按钮：在cocos2d基本功能中确实的按钮，这里给补上了，只不过不叫utton，叫control。
粒子效果：可以随意添加，但是参数均需要手工调整。
子界面：可以通过封装一些控件到子界面，再添加到别的界面，便于复用。
插件：可以添加第三方插件。
[Microsoft7] 有了这些插件的帮助，我们便可以把精力放到如何布局上，而不是仔细的去计算每个元素的坐标，你可以尝试一下，随意缩放控件各类控件到界面上，然后调整相关的参数。
我们创建一个渐变的背景，一个logo，一个开始游戏的按钮，和几片云彩的动画为例来讲解下cocosBuilder的元素使用。首先，让我们开始加入渐变的背景。在窗口顶部的工具栏点击CCLayerGradient 按钮
我们希望渐变层（gradientlayer）充满整个屏幕。选择这个层，设置填充（contentsize）大小单位为“%”并且设置宽高为100×100.
让我们把颜色修改为其他值以遍更适合我们游戏的主色调。点击开始颜色（start color）和完成颜色（ endcolor）以至RGB值为下图显示这样。
继续添加logo到主界面（ menu scene）。在左边的工程视图（projectview）中，拖拽图片到canvas 区域。你添加的图片就会像如下那样显示[Microsoft9]
下面就是一个用cocosBuilder制作的界面，很炫吧，而这么炫的界面，不用我们去写一行代码，就可以实现，是不是让人很兴奋。
下章我们将要讲如何用最简单的方法用代码把它们显示到游戏中去。
8.3．连接界面和代码
8.3.1 使用定制类
把代码和cocosBuilder连接起来的方法是使用定制类，在cocosBuilder中，只要在对象中输入定制类的名字即可，当然我们在代码中的定制类应该是这个对象对应的类或子类。
当我们需要再定制类中初始化某些属性时，CCBReader提供了didLoadCocosBUilder方法，可以让我们有机会加入初始化代码。
设置连接的例子如下，这是我们将某个对象对应的类名取名为TestOneBuilder[Microsoft11]
8.3.2 链接类成员
当我们读入ccb文件时，可以指定将界面上的对象绑定到成员变量上，要链接到对象，我们需要在头文件中申明该变量。然后在cocosBuilder中选中该对象，并按如下类似的例子，将Doc root var属性修改为成员变量的名称，本例中是sprtBurst
8.3.3 添加回调
当我们添加菜单条时，我们需要指定菜单条对应的回调方法。在cocosBuilder中选中菜单条，并在其属性中添加方法名称即可：
菜单条的功能比较简单，为此cocosBuilder集成了CCControlButton，类似于苹果的UIButton功能，添加上CCControlButton后，我们也可以指定其回调方法：
我们也可以像UIBtton一样，可以选择按钮动作的状态，以即是否可点击。
8.4．创建动画
用cocosBuilder可以创建角色动画，帧动画，骨骼动画和时序动画等多种规格的动画。
在主窗体的下方可以找到时间轴，我们用时间轴来创建动画：
8.4.1 精灵动画
ccb文件默认的时间是10s，cocosBuilder以每秒30帧的频率来播放动画，当然回到cocos2d中，频率是由代码决定，当先时间是显示到右上角，蓝色的垂直线用来显示当前时间。
CCSprite是动画属性最多的控件，可见性，位置[Microsoft13] ，大小，选装，精灵帧，透明度，颜色等都可以做成动画：
如上例的精灵就是在放大缩小和旋转方面做了动画定义。
添加动画的方法是首先选中控件，然后从菜单中选择Insert Keyframe，然后在选择需要添加的动画的属性，如大小和位置等：
8.4.2 帧动画
一般的动画重复添加若干Keyframe即可完成，而帧动画有时候数量非常多，如植物大战僵尸中僵尸的动画，一个动作就由20多副图完成，因此帧动画可以采用一次性导入的方法，
首先在左侧的资源文件区中选中所有的动画图片，然后选中在时间轴的精灵，在从动画菜单中选择 Creat Frames from Selected Resouce选型，系统会自动帮我们生成一系列动画帧，
8.4.3 改变动画速速
如果添加的动画帧不合适，我们只需要选中所有的动画帧（用鼠标框选中），然后在动画菜单上选择Stretch Selected keyframes，再输入一个放大缩小的因子即可：
在加入动画的同时，我们也可以添加如case in 的动画属性，只需要在动画轴上点击右键即可：
8.4.4 多个时间轴
cocosBuilder的动画编辑中最强大的功能之一就是在同一个文件中有多个时间轴。我们可以定义不同的时间序列，然后在代码中播放，甚至可以做到无缝的衔接不同时间的轴动画。
要选择，添加和编辑时间轴，我们需要采用时间轴弹出菜单：
在时间轴对话框中我们可以看到所有的时间轴，可以修改和编辑，可以重新命名，可以添加，也可以把某个时间轴设为自动播放：
我们也可以将时间轴串起来，当一个时间轴动画播放完成后，会去播放另一个时间轴，利用这一个特性，我们甚至可以做出自动循环播放的动画:
要将几个动画串联起来，只要选中某个动画，然后点击动画编辑器最先面的No Chained Timeline，会弹出如上的菜单，这时候我们就可以选中我们想要串联的动画即可。
8.4.5在代码中播放动画
如果需要在代码中播放动画，我们要用到CCBAnimationManger。当ccbi文件被加载时，我们能获得userObject节点：
当获得CCBAnimationManager对象后，我们就可以通过方法来运行某个动画[Microsoft17] ：
[Microsoft1]标点符号呢
[Microsoft2]大图最大不能超出正文宽度图片下方命名 规范如图代码 下同
[Microsoft3]这后面应该是，还是。
[Microsoft4]下图居中 命名
[Microsoft5]截图完整些
[Microsoft6]这种一句代码的情况下换行缩进即可 不必要加代码框和标题
[Microsoft7]此部分内容制表 表格下方命名 命名标准同示例代码
[Microsoft8]这种图片全部居中
[Microsoft9]冒号呢
[Microsoft10]截取整个模拟器
[Microsoft11]注意标点下不提醒
[Microsoft12]图片截取完整美观些
[Microsoft14]空行太大
[Microsoft15]给每个图片添加名称 修改图片格式 位置
[Microsoft16]文本字体颜色字体在文本框下面 不是写在代码框里
[Microsoft17]一行代码没必要添加 代码框
扫一扫
2780
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
