CocosBuilder使用说明文档

作者:scl1918

CocosBuilder使用说明文档
开始
   CocosBuilder是一个强大的,免费的工具用于创建UI,动画,场景,关卡布局,粒子系统或者几乎任何你能想象的东西。使用CocosBuilder制作的首页效果如下图所示:(带动画效果和粒子系统的喔,很炫的,想看的可以给大家跑下程序看下效果)
 
1. 获取例子和CCBReader
     将CocosBuilder用于cocos2d项目你将需要包含CCBReader。CCBReader是一个类集合用于解析CocosBuilder导出的文件并且为你建立cocos2d的场景节点图。它也将帮助你处理所有由美工人员编辑的动画。
	学习使用CocosBuilder和cocos2d的好方法是下载并阅读例子,他们有着很好的注释并且容易理解。
建立一个新的项目
   该章节将指引你用CocosBuilder建立一个新的项目,假设你已经熟悉了cocos2d,如果你还没有使用过它,请下载它并且看一下相关的一些教程。
1.	建立一个项目
   在建立CocosBuilder项目之前,最好先建立Xcode项目,确保在Xcode中cocos2d模板已经安装并且建立一个新的cocos2d-iphone 项目。
   当你建立好Xcode项目后,建立你的CocosBuilder项目。在File菜单中选择New Project。将CocosBuilder项目保存到Xcode项目的资源目录。
   Resources目录所有的图片和精灵表单(Sprite sheets)将自动在CocosBuilder 主窗口左侧的项目视图显示出来,但是记住如果你想在应用程序的编译版本中使用他们,你将需要将他们加入到Xcode项目中。
2. 添加接口文件
   CocosBuilder使用接口文件,或者ccb-files,来定义你将在代码导入的cocos2d节点图。在File菜单中选择New File来创建一个新的ccb-files。将显示出一个对话框,可以选择节点图的根节点的类和该文件支持的分辨率。
 
3. 发布你的项目
	在你可以导入CocosBuilder创建的文件到你的代码中之前你需要发布他们,在File菜单中选择Publish,来发布项目中所有的ccb-files文件。对于每一个ccb-files,一个新的ccbi-files将被创建。ccbi 文件是将不必要的信息去除掉的非常紧凑的二进制文件。在你的Xcode项目中包含ccbi-files。
	在你的代码里加载ccbi-file,确保你你已经在你的Xcode项目中包含了CCBReader类,然后调用CCBReader的nodeGraphFromFile方法。
CCNode* myNodeGraph = [CCBReader nodeGraphFromFile:@"myFile.ccbi"];


4.项目设置
   默认设置中,CocoBuilder将把ccb-files导出到项目文件所在目录,但是你可以改变该目录到CocosBuilder将要寻找资源的目录。将你的ccb-files和图片文件打包成一个zip-file也是可能的。
   在File菜单中选择Project settings将进入项目设,如下图所示:
 
5.发布到zip-file
   你可以选择发布成zip-file,假如你选择使用被叫做ccb.zip的zip文件并将其放置到你期望的目录,通过以下步骤你将能够加载zip-file:
在你的项目中除了CCBReader之外还需要包含SSZipArchive类。
在你的项目构建设置中,添加CCBENABLEUNZIP到 Preprocessor Macros。
在你的cocos2d被加载之前,通过调用[CCBFileUtils sharedFileUtils]来代替cocos2d默认的CCFileUtils(你可能需要导入CCBReader.h)
通过调用[CCBReader unzipResources:@"ccb.zip"]来解压缩zip文件。
6. Flatten file paths
   在项目设置中,你可以选择Flatten file paths(这是默认设置)。如果你这么做了,ccbi-file中所有的文件路径将会变得平整(举例说 mySubDirectory/myImage.png将被转换为myImage.png)。如果你使用了可选的zip功能,所有的文件将被拷贝到zip文件中。如果你没有使用zip功能来发布,文件结构将仍然被保持为原样。所以当资源被添加到Xcode,他们需要当作yellow folders添加进去(一般是默认项)。如果你选择了非平整路径你将把资源当blue folders添加到Xcode。
同ccb-files一同工作
   该章节假设你已经建立起自己的CocosBuilder项目。它将会对如何与ccb-files一同工作给出一些小提示。
1. 添加节点
	当创建一个新的ccb-file时,你定义了它将使用何种类型的根节点。根节点不能被删除并且你不能够改变它的类型(除非你创建一个新的文件)。有一些属性,比如说位置,你不能改变他们,这些属性在属性指示器里将是灰色的。
 
   点击工具栏里的图标即可添加一个新的节点。每一个图标对应了cocos2d的一个类。CocosBuilder已经支持许多cocos2d的标准节点和少数的扩展(像CCControlButton和CCScale9Sprite)。默认的,新添加的节点将被当作被选中的节点的兄弟对待,或者,如果当前没有节点被选中,作为根节点的孩子被加入。当添加一个对象时,可以通过按下SHIFT键来使新添加的节点作为当前节点的孩子加入。
   你可以通过拖拽的方式,将图片从左手边的项目视图托到画布区域或者时间线上。你拖拽的图片将自动变为CCSprite节点。如果你拖动一个图片到一个CCMenu上,它将成为CCMenuItemImage。
2. 编辑属性
	当选中ccb-files中的一个节点时,它的属性将显示在右手边的指示器中,通过编辑值可以改变属性。
 
	影响一个节点的属性可以在画布区域被可视化的编辑,简单的选中一个节点并拖拽它即可以改变它的位置,选中四周的点并拖拽可以改变缩放,先按下option键盘(即WINDOW键),然后选中四周的点即可以旋转,选中中间的点并拖拽即可以改变锚点。
3. 改变zOrder
    
   不像其他属性,zOrder并没有在属性指示器里面显示,而是通过在继承视图的顺序来决定zOrder。所添加到ccb-file中的所有对象都将被显示在继承视图中,按你的需求简单的选中拖动放到合适的位置即可。
   当载入到你的程序中,节点的zOrder将从0到(N-1)编号,N是父节点所拥有的子节点的数目。如果需要用特定的zOrder可编程的插入对象,建议的方法是,用一个CCNode作为占位符,直接在代码中替换或添加你的子节点到CCNode。
4. 参考线和便签
 
   当加载到应用程序中时,参考线和便签不会对其造成影响,但是可以容易的在ccb-file中给其他开发者或者设计者排列对象或者保存注释。(参考线用于排列对象,便签用于保存注释)。
	通过从底部和左边的刻度线拖拽到画布区域,可以创建一个新的参考线,按下Command键(即ALT键),可以移动参考线。你也可以通过把参考线移到可视区域的外面来删除一个参考线。
	通过选择在View菜单中的Add Sticky可以创建新的便签。双击便签可以编辑或者移除它。
将ccb-files连接到你的项目中
使用自定义类
 
   使用自定义类可以将你的代码与CocosBuilder连接起来。
在CocosBuilder中赋予对象一个自定义类,仅仅需要选中该对象并在属性指示器中输入自定义类的名字。记住你的自定义类需要是选中对象的子类。当载入ccbi-file时,CCBReader将会调用父类的init方法来初始化你的自定义类,然后设置所有对象的属性。如果希望在属性被设置以后做一些其他的初始化工作,CCBReader将会调用didLoadFromCCB方法。
   请注意CCBReader不会使用任何自定义的init方法。对于所有自定义的类你可能需要一个能够使用的init方法。你可以使用ccb-file中任意节点的自定义类,然后最通常的用法是覆盖根节点。
连接成员变量
当载入文件时,ccbi-file中对象的引用可以连接到成员变量,
这些成员变量可以在文档的根节点,这种情况下必须被赋予自定义类。你也可以赋予他们一个自定义的对象,将当作owner对象可选的传递给CCBReader。载入ccbi-file并且将成员赋给所有者,需要调用nodeGraphFromFile:owner:或者sceneWithNodeGraphFromFile:owner:来载入节点图。
 
   连接一个对象,在头文件简单的声明他们,或者你计划将他们作为所有者或者文档的根对象来进行传递。在CocosBuilder中选择对象,在Code Connections中改变Don’t assign菜单为或者是Doc root var或者是Owner var。然后在右边输入你成员变量的名字。
为Menu添加回调
   当CCMenuItemImage被点击,为其添加回调的方法是,简单的选择CCMenuItemImage,在Selector区域添加你想调用方法的名字。将目标设置为Document root或者是Owner。
 
   回调将会传递CCMenuItemImage作为唯一的参数给你指定的方法。你也可以选择省去该参数。
为CCControl添加回调
   为一个CCControl添加回调和为CCMenuItemImage相像,只是有一些额外的可选项。
	 
	选择你希望回调接收的事件类型。对于CCControlButton,仅仅使用Up inside回调是最常见的。选择你的目标,Document root 或者Owner。和你回调方法的名字。回调函数可以有2个参数,发送者和事件的类型。事件类型定义在CCControl.h中。
使用自定义属性
   有的时候为一个自定义类指定一个额外的数字属性将会很有用。如果你为一个节点设置了自定义类,一个Edit Custom Propertis按钮将会显示在指示器的下面。点击该按钮将会显示除自定义属性窗口。
 
	这里你可以添加自定义属性,确保在你的代码中定义相同的属性。你可以使用int,float,bool或者是NSSring 属性。
加载ccb-files的选择
   在你可以加载到你的程序之前,CocosBuilder文档,或者ccb-files,需要发布到一个紧凑的二进制格式,ccbi。一旦发布,只需要一行代码就可以简单的进行加载。加载一个节点图,需要添加CCBReader.h到你的项目中,然后像下面这样调用nodeGraphFromFile方法。
CCNode* myNode = [CCBReader nodeGraphFromFile:@"MyNodeGraph.ccbi"];
	根据根节点在ccbi-file中是什么类型的对象和你将要在代码中如何他们,你可能需要将返回值进行转换。比如,如果你加载一个CCParticleSystem,使用如下的代码。
CCParticleSystem* myParticles = (CCParticleSystem*) [CCBReader nodeGraphFromFile:@"MyParticleSystem.ccbi"];
	为了方便使用,CCBReader可以将节点图封装在一个Scene里,加载你的ccbi-file到一个scene,调用sceneWithNodeGraphFromFile:
CCScene* myScene = [CCBReader sceneWithNodeGraphFromFile:@"MyScene.ccbi"];
传递一个所有者变量
  有时候你需要访问另一个对象的成员变量和获取回调而不是ccb-file的根节点。这个时候你需要传递所有者给CCBReader。获取拥有者的变量或者回调,确保在CocosBuilder中当声明成员变量和回调时选中了所有者。然后调用nodeGraphFromFile:owner:或者sceneWithNodeGraphFromFile:owner:载入你的文件。
在 子ccb-file中访问变量和回调
如果你使用子ccb-file指定根节点作为目标将引用子ccb-file的根节点。所有者的目标是你传递给CCBReader的对象。
使用多分辨率
     当创建一个应用或者游戏时通常的方案是适配拥有不同屏幕大小的多个设备。CocosBuilder提供先进的工具来支持多分辨率和相对定位。你可以使用相同的文件来支持iPhone和iPad和多数的安卓设备。
		当创建一个新的文件你会选择你希望支持的分辨率。每一个分辨率有一些参数,比如宽度,高度,资源扩展和全局缩放。
 
		CocosBuilder的分辨率设置仅仅影响CocosBuilder中的显示,并不会导出到ccbi-file中。然而,CocosBuilder中默认的设置对应于cocos2d中的默认设置。如果你改变了默认设置,
请意识到你可能在载入文件的时候在你的代码中做相应的改变。
		如果你希望在创建文件之后编辑分辨率,可以选择在View菜单中的Edit Resolutions。
选择正确的资源
		让多分辨率能够满意的工作的一个重要方面就是选择正确的资源来正确的显示。对于一个特定的分辨率Resource extension 决定了使用哪一资源。例如,对于ipad hd 设置了带有-ipad扩展的资源优先使用,如何没有这种资源,则使用带有-hd扩展的资源。如果表里的扩展都没有,则使用不带扩展的资源。你可以这样放置资源,将不同分辨率扩展的图片,放到项目资源目录下的一个目录。
		项目视图仅仅列出不带资源扩展的资源。带有资源扩展的将被隐藏。
支持Retina显示
   CocosBuilder完全使用点来工作而并非像素,这意味着在CocosBuilder中你只能看到non-Retina显示的布局。当你在cocos2d中导入ccbi-files时,cocos2d将会选择-hd或者-ipadhd的资源。这就是当你编辑分辨率设置的时候不能选择-ipadhd的原因。
内容大小
   默认的,cocos2d对设置一个节点的contentSize只支持绝对的大小。CCBReader一个扩展功能就是允许设置相对于父节点的contentSize(如果你想可编程的使用该功能,包含CCNode+CCBRelativePostioning.h文件)
     有6种可选择的方法设置一个节点的大小:
 
绝对的:这个设置大小为绝对的值(点)
容器大小的百分比:这个设置内容大小为它的父亲内容大小的百分比。
相对于容器大小:用父节点内容的大小减去你输入的值
水平百分比,高度固定:宽度是按百分比计算,高度是绝对值
垂直百分比,宽度固定:和水平百分比刚好相反。
乘以分辨率的缩放因子:该选项将你输入的值乘以当前分辨率的分辨率缩放因子。
相对位置
   CocosBuilder中所有相对的位置都跟父节点的位置和内容大小有关。特别的,如果你使用百分比,那仅仅在父节点有大小才可以工作。
 
绝对的(相对于左下脚):这个位置为绝对值,同cocos2d通常使用的一样。
相对于左上脚:这个设置位置为相对于父节点的左上角
相对于右上脚:这个设置位置为相对于父节点的右上脚
相对于右下脚:这个设置位置为相对于父节点的右下脚
容器的百分比:使用一个父节点内容大小的百分比将把位置设置为相对于父节点的左下脚的值。例如:值50,50将把节点放置到父节点的中央。
乘以缩放因子:这个选项将输入的值乘以当前分辨率的缩放因子。
相对缩放
	你可以为一些对象的缩放或者基于浮点数的属性使用相对缩放。(比如CCLabelTTF字体的大小)
 
绝对值:CocosBuilder将使用你提供的缩放而不管当前分辨率使用的。
乘以缩放因子:输入的值乘以当前分辨率的缩放因子
加载ccbi-files时的可选项
		分辨率的大小并没有保存在ccbi-file中,当文件被载入时,父节点的大小默认为屏幕的大小。如果你有一个自定义的大小你需要传递这个大小给加载器。如下代码所示:
	CGSize mySize = CGSizeMake(100.0f, 100.0f);
CCNode* myNode = [CCBReader nodeGraphFromFile:@"myNode.ccbi" owner:NULL parentSize:mySize];
有用的技巧
在一个项目的初期,设计多分辨率总比尝试将已经存在的布局 转化为多个不同的设备要好。
如果你计划使用上下边框,乘以分辨率缩放因子会非常有用。
结合设置对象的锚点和相对的位置选项可以将节点定在屏幕的角落或边缘上。
通过嵌套不同的位置和大小选项你可以达到为不同分辨率设置非常负责行为的目的。
不要害怕实验不同的选项,在刚开始看起来比较复杂,但是当你熟悉以后,你将会有许多方法布局你的场景。
使用动画
		你可以使用CocosBuilder创建角色动画,富有生气的完整的场景和任何你能想象到的动画。动画编辑器完全支持多个分辨率,关键帧之间的缓冲,骨骼动画和多个时间线来命名一些功能。
基本功能
   在主窗口的下面你可以找到时间线。你将使用时间线来创建你的动画。
 
		默认的,你的ccb-file包含一个10秒钟的单独的事件线。CocosBuilder 以30帧每秒的帧速率进行动画编辑,但是当在程序中进行播放时将使用你在cocos2d中设置的帧速率(默认为60fps)。当前时间显示在右上角,格式为分钟:秒:帧。蓝色的垂直的线显示了当前的时间,双击事件显示可以改变时间线的持续时间。
2. 添加关键帧
	 CocosBuilder中的动画是基于关键帧的,你可以添加节点的不同属性的关键帧,CocosBuilder将自动的在关键帧之间进行插值,还有可选的不同类型的缓冲动画。
		添加一个关键帧,首先点击节点名字右边的三角形来展开节点的视图。这样将节点所有的可以用来进行动画操作的属性显示出来。节点的类型将稍微影响什么可以用来进行动画操作。一旦属性显示出来,你可以按下Option键(WINDOW键)并在时间线上点击对应的属性,这样就在点击的时候创建了一个关键帧。另一种方法是,选择一个节点,并且选择一个时间点(通过拖拽垂直的时间线),并且选择Animation菜单里的Insert Keyframe,选择其中的一个属性即可。
3. 编辑关键帧
		可以通过移动垂直时间线到关键帧的时间点并且选中对应的节点来进行编辑。也可以通过双击关键帧来实现。(将自动选中节点并移动垂直时间线)。
		你可以通过在关键帧的周围拖动出一个选择框来选择关键帧并一起移动他们。你也可以在两个节点之间拷贝粘贴关键帧。在粘贴关键帧的时候确保你只选择了一个节点。关键帧将被复制到时间线的开始处。
		如果你已经选中了一些关键帧,你可以通过选择Animation菜单中的Reverse Selected Keyframes来进行反转他们的顺序(其实就是反方向的动画)。使用Stretch Selected Keyframes选项通过一个缩放因子来加速或者减速一个动画。
4. 导入一个序列图片
		如果你一个精灵帧创建创建的动画,把每一个独立的帧移到的时间线上会是很乏味的事情。CococsBuilder通过自动的导入一个序列图片来简化这一过程。在左手边的项目视图中选择你希望导入的帧(即图片),然后在时间线上选择一个精灵,然后在Animation菜单中选择Create Frames from Selected Resources。帧就会在垂直时间线的开始部分被自动创建。如果你需要放慢动画的速度,选择新创建的关键帧并使用Stretch Selected Keyframes命令。
5. 使用缓冲
	CocosBuidler仔细的从cocos2d提供的缓冲里面挑选出一个子集。在两个关键帧之间右击然后选择你希望使用的缓冲类型。	
	一些缓冲有一些附加项,在添加缓冲之后可以在弹出的菜单中再次右击并选择Easing Setting。
 
6. 使用多个时间线
	CocosBuilder动画编辑器的一个非常有用的功能是可以在一个文件中使用多条时间线。你可以命名不同的序列并且通过他们的名字在代码中进行播放。甚至可以在不同的时间之间进行平滑的过度。
	使用时间线的弹出菜单进行选择,添加或者编辑你的时间线。
 
	在编辑时间线对话框你可以看到你的时间线,你可以进行重命名,添加一个新时间线和(可选的)设置其中一个时间线作为当ccbi-file被加载时默认播放的时间线。
 
	在时间线内没有关键帧的属性将在所有的时间线上共享他们属性值。例如,如果你将一个节点移进时间线,那么它将被移进所有的时间线,只要他们没有用于位置属性的关键帧集。
7. 链接时间线
	你可以通过将时间线链接起来来自动播放他们的序列。你也可以用这个功能来循环播放一个时间线。
 
	让时间线按顺序播放,点击No chained timeline文本然后选择你想在当前时间线后面播放的时间线。
在代码中播放动画
	需要用代码的方式控制你所创建的动画,你需要检索CCBAnimationManager。当ccbi-file被加载时,动画控制器将被节点的userObject赋值。
CCNode* myNodeGraph = [CCBReader nodeGraphFromFile:@"myFile.ccbi"];
CCBAnimationManager* animationManager = myNodeGraph.userObject;
动画控制器将被作为自动释放的对象返回。播放一个特定的时间线将调用runAnimationsForSequenceNamed: method。当调用这个方法时如果当前正在播放一个时间线,它将会马上停止。
[animationManager runAnimationsForSequenceNamed:@"My Timeline"];
可选的,你可以使用一个两者的持续时间来平滑的过度到一个新的时间线。线性插值将被使用在过度中。
[animationManager runAnimationsForSequenceNamed:@"My Timeline" tweenDuration:0.5f];
当时间线播放结束时可以接收到一个回调,在其他时间线链接起来时你也可以获得这个回调。使用CCBAnimationManagerDelegate来接收这个回调。
发表评论

0个评论

我要留言×

技术领域:

我要留言×

留言成功,我们将在审核后加至投票列表中!

提示x

知识工程知识库已成功保存至我的图谱现在你可以用它来管理自己的知识内容了

删除图谱提示×

你保存在该图谱下的知识内容也会被删除,建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗?

删除节点提示×

无法删除该知识节点,因该节点下仍保存有相关知识内容!

删除节点提示×

你确定要删除该知识节点吗?