CocosBuilder 教程

转自泰然网，原文地址：http://www.tairan.com/archives/2614，感谢作者分享。

CocosBuilder是Cocos2d系列的配套开源工具,最新的版本是3.0a,也是我们这个文章所采用的版本.CocosBuilder目前只有OS X版本,没有Windows的版本,而且开发语言是Objective-c,估计移植难度会比较大. 我想这个也是其不够流行的原因吧.

如果你是CocosBuilder的熟客,那么你一定会记得CocosBuilder v2.x以前版本附带的例子(以下我们提到例子即为这个例子).[http://cocosbuilder.com/?page_id=11] 而CocosBuilder v3.0采用了一个叫做CocosDragonJS的例子,主要是展示CocosBuilder 的Javascript的调用能力.我虽然很喜欢JS,但是正在学习2d-x,又很想学好,所以还是打好基础,学好原滋原味的2d-x才好,以后换用无论是Html5,还是JS,Lua,心里才会觉得踏实.我无论C++,还是2d-x都是新手,又是第一次想正儿八经的写文章,难免有很多错误,还望各位看客踊跃拍砖.

对CocosBuilder不熟悉的朋友,可以先去CocosBuilder网站看下其例子,或者运行下cocos2d-x源代码目录下sample/TestCpp项目,可以在ExtensionsTest里面找到CocosBuilderTest这个例子.

这次的目的是基本实现原来v2.0中的例子. 我采用的2d-x的版本是:cocos2d-2.1beta3-x-2.1.0,以OS X版本为主,以sample目录下的HelloCpp为基础改进. CocosBuilder 的版本是v3.0alpha0.

(一)
万事开头难,我们先来建立基本的开发环境,保证最基本的运行.

我们需要一份cocos2d-2.1beta3-x-2.1.0的源代码,并将其sample/HelloCpp目录重命名为sample/CocosBuilderTest. 打开CocosBuilder,在sample/CocosBuilderTest/ccb-source/目录中创建一个新的CocosBuilder项目. 将CocosBuilder官方例子中的图片等资源文件复制到该目录. 我们对该目录下的文件结构做了一些调整,以便于使用. 具体可以参见我打包后的整体项目文件.

我们可以在CocosBuilder菜单中找到Project/Publish Settings,应该被设置成如图的样子.

这时我们可以Publish下项目,CocosBuilder会将ccb文件输出成二进制的ccbi文件,ccbi文件是我们在Xcode项目中使用的格式.

然后我们使用Xcode打开samples/CocosBuilderTest/proj.mac/HelloCpp.xcodeproj,我们首先要将资源文件纳入项目. 然后再将cocos2d-x源码中的extensions目录也加入到项目中来,其中负责ccbi文件解析的模块CCBReader即包含在该目录中.但并不是该目录所有文件都需要引入,参见下图或者代码包.

1.添加一个新类MainScene如下
MainScene.h

#ifndef __HelloCpp__MainScene__
#define __HelloCpp__MainScene__

#include "cocos2d.h"
"cocos-ext.h"

class MainScene
: public cocos2d::CCLayer //从CCLayer派生{
public
    staticCCScene* scene();};

#endif/* defined(__HelloCpp__MainScene__) */

MainScene.cpp

"MainScene.h"

USING_NS_CC;
USING_NS_CC_EXT

MainScene::scene()
    CCScene scene =create

    CCNodeLoaderLibrarylib CCNodeLoaderLibrarynewDefaultCCNodeLoaderLibrary//生成一个默认的Node LoaderCCBReaderreader newCCBReader(lib);//用node load lib 初始化一个ccb readerCCNodenode  reader->readNodeGraphFromFile("MainScene.ccbi",//从ccbi文件中加载node

    readerrelease//注意手动释放内存

    ifnode!=NULL)
    
        sceneaddChild//将node 添加到scene中}return}

2.修改AppDelegate.cpp中默认的启动scene

pScene //HelloWorld::scene();

3.注意CocosBuilder 中发布选项的设置,并发布一次.

4.如果没有错误的话,你应该可以看到运行的效果.

需要说明的一点是CocosBuilder v3.0新增了一个自动缩放资源到匹配分辨率的功能. 我们这次没有使用该功能.

(二)
这一小节我们主要实现CocosBuilder官方例子中HelloCocosBuilder这一例子.

1
在CocosBuilder 中打开MainScene.ccb,按delete键删除已经存在的几个Sprite.

2
添加一个CCLayerGradient到屏幕,如果有问题的话,可以参见下CocosBuilder的帮助文档. 选中该节点,我们可以在右侧看到他的属性,常规的属性有比如位置,大小,锚点,缩放,旋转,标签. 我们现在将其设置为大小为100%x100%的大小,即满屏.

3
从左侧的文件列表中将burst.png拖入屏幕,也可以使用工具栏添加然后再选择属性Sprite frame.
可以在节点树上双击该节点给其重命名,我们将该节点命名为CCSprite-burst,便于识别.
同样我们将其中心的设置到屏幕中心50%x50%,缩放到2.5倍.
然后将Blend src,Blend dst 都设置为One,好吧,我暂时还不知道这个Blend是什么东西. 有知道的朋友不妨在评论中告诉我下,或者参考资料.
大概是透明之类的东西吧.

4
然后我们再添加一个CCParticleSystemQuad粒子系统,就是工具栏的那个Fx按钮.
将其位置设为最下居中,在最下边Particle Texture设置为ccbParticleSnow.png效果,粒子系统还是很复杂的,估计能单独讲很久了. 这里就不再展开了.

5
将logo-icon.png拖入屏幕,放在左上角合适位置,并将其缩放到0.5. 节点重命名为CCSprite-logo-icon.
接下来就是动画的制作了.选中节点,可以在菜单栏中Animation => Insert KeyFrame找到插入Framekey的各种快捷键.或许我们需要记熟他们.
首先让我们给Timeline设置下时间.双击时间可以编辑,我们输入00:03:00,就是3秒钟. 后面最后一位是帧数,每秒30帧.
按下小三角可以展开当前节点的各种KeyFrame.
拖动时间轴游标到1秒10帧,按下键盘S,可以插入一个Scale类型的KeyFrame,这时将当前节点Scale属性改为0.
然后继续拖动时间轴游标到2秒10帧,再插入一个Scale KeyFrame,并将Scale属性改为0.5. 这时点击播放按钮,可以看到logo会蹦出来.
然后在紫色条上点击右键,可以看到动作菜单,我们选择Bounce Out,这个时候再点击播放,就可以看到logo蹦出的时候会有一个弹震的效果.
再来说明两点,紫色条设置不同的动作,可以看到上面会有一点阴影变化,可以帮助我们快速确认设置的是什么动作.
如果不小心加多了KeyFrame,那么可以点击选择KeyFrame,然后点击delete键删除.
还有需要注意的是,如果游标不在KeyFrame的点上,那么此时无法编辑该节点属性,移动到相应的KeyFrame点即可.

6
然后依法炮制,将logo.png加入,你可以给其设置想要的动画效果.

7
我们再添加一个CCLabelBMFont,字体设置为markerfelt24shadow.fnt.Label的内容设置为”Hello Cocos2d-x!!!”,然后调整下位置,换个喜欢的颜色.

8
我们再添加一个CCControlButton,Title设置为Menu & Item.
然后再分别设置State Normal,State Highlighted的Sprite frame为btn-test-0.png btn-test-1.png.
然后再设置下弹出效果.
将这个节点再复制5份,对齐. 再分别设置下Title和弹出效果.设置对齐的时候可能会比较麻烦. 可以从标尺那里拉出几条线,可以用于对齐.按下cmd键,将该对齐线拉出显示区域即可删除.

9
最后将左右的两片叶子加入屏幕,设置个动画即可. 然后将CocosBuilder 项目发布一下,在Xcode里面将项目运行一下. 就可以看到效果了.

10
我们接下来研究文件和类的绑定,控件和变量的绑定,以及事件和函数的绑定.
我们在CocosBuilder 中将根节点的Custom class设置为MainScene.
我们在Xcode中打开MainScene.h,给MainScene增加一个新的函数CCB_STATIC_NEW_AUTORELEASE_OBJECT_WITH_INIT_METHOD(MainScene,create);.
最后的代码应该如下:

MainScene类



    CCB_STATIC_NEW_AUTORELEASE_OBJECT_WITH_INIT_METHOD( create};

然后在MainScene.h中添加一个新类MainSceneLayerLoader代码如下:

MainSceneLayerLoaderextensionCCLayerLoader
    CCB_STATIC_NEW_AUTORELEASE_OBJECT_METHODMainSceneLayerLoader loaderprotected
    CCB_VIRTUAL_NEW_AUTORELEASE_CREATECCNODE_METHOD 如果需要探究的话,可以点开相应的函数定义. 也都是些简单的工作.
 吐槽下,这些名字真的是太难记. 可能需要多熟悉下,搞清楚其原理了才好. 
 然后我们在MainScene.cpp中添加一行注册将ccb文件和类绑定起来. 
libregisterCCNodeLoader"MainScene"loader()); 
 然后运行下,确保没有错误.
 这几行代码,就是ccb文件和类绑定的最简模式了. 
 11
 接着我们研究下控件和变量的绑定.
 我们先在CocosBuilder 中给CCLabelBMFont添加一个Doc root var类型的绑定mLabelText.
 一个需要注意的地方就是CocosBuilder v3.0alpha似乎无法将jsControlled设置为false,所以可能需要手工打开MainScene.ccb将其改为false. 
 MainScene.ccb 
jsControlled 
 然后在Xcode中给MainScene增加一个从CCBMemberVariableAssigner的继承并实现其虚函数. 并且添加相应的变量. 
CCBMemberVariableAssigner~virtualbool onAssignCCBMemberVariablecocos2dCCObject pTargetconstchar pMemberVariableNameCCNode pNodeprivate
    cocos2dCCLabelBMFontmLabelText 在MainScene.cpp中需要添加的是:
 MainScene.cpp 
()//构造函数 mLabelText{}::~//析构函数中释放内存不能忘
    CC_SAFE_DELETEonAssignCCBMemberVariableCCObjectpTargetcharpMemberVariableNamepNode
    CCB_MEMBERVARIABLEASSIGNER_GLUE(this"mLabelText"CCLabelBMFont*,100)">true 需要注意的是,由于绑定较晚,所以无法在init函数中使用变量mLabelText. 
 12
 接下来我们研究事件和函数的绑定.
 在CocosBuilder 中找到Menu & Item这个CCControlButton,并设置其Selector为onButtonTest.Target设置为Document root.
 这里需要注意的是,设置值的时候,cocos2d-iphone似乎比较喜欢设置成onButtonTest:即多个:的形式. 我们在cocos2d-x中保持一致即可.不必加:.
 然后打开MainScene.h给MainScene再增加一个继承. 
 MainScene 
CCBSelectorResolver 
 还有需要实现的函数 
SEL_MenuHandler onResolveCCBCCMenuItemSelector pSelectorNameSEL_CCControlHandler onResolveCCBCCControlSelectorvoid onButtonTestpSenderCCControlEvent pCCControlEvent); 
 接下来是增加的函数的实现
 MainScene.cpp 
SEL_MenuHandler onResolveCCBCCMenuItemSelectorpSelectorName NULL

SEL_CCControlHandler onResolveCCBCCControlSelector
    CCB_SELECTORRESOLVER_CCCONTROL_GLUE"onButtonTest"onButtonTestsetString"Hello CocosBuilder!!!" 好了,现在运行一下,点击按钮,就会看到Hello Cocos2d-x!!!变成了Hello CocosBuilder!!!了. 
 13
 刚才我们提到变量绑定较init函数(更别提运行更早的构造函数了)更晚. 那么如何运行后就控制这些控件呢?
 方法当然是有,我们需要增加一个CCNodeLoaderListener,并实现其接口.新增代码如下:
 MainScene 
CCBSelectorResolverCCNodeLoaderListener
    ///......代码省略鸟 onNodeLoadedCCNodeLoader pNodeLoaderonNodeLoadedpNodeLoader"All Loaded" 好啦,运行就能看到All Loaded啦.
  
 (三)
 这一节要说的内容比较轻松,重要的知识点也不多.
 目标是实现Menus & Items,Sprites & 9 Slice,Buttons & Labels. 
 1
 首先我们在CocosBuilder中建立一个新的Header.ccb.具体请参见CocosBuilder的项目.
 在创建的时候,勾选Full Sceen,并且将分辨率的Height都修改为40.
 这个文件很简单,根节点下只包含一个CCLayerColor,根节点的Custom class设置为HeaderLayer.
 CCLayerColor下面包含一个CCLabelTTF和CCMenu.
 CCLabelTTF的变量绑定为类型Owner var,值为mTitleLabelTTF.
 CCMenu包含一个CCMenuItemImage. CCMenuItemImage的Selector属性设置为onBackClicked.
 这个ccb作为一个公用的元素被其他ccb文件所引用. 是属于模块化的一个例子.
 然后我们在Xcode中新建一个HeaderLayer类,并同时声明一个HeaderLayerLoader类. 
 HeaderLayer.h 
HeaderLayer
    CCB_STATIC_NEW_AUTORELEASE_OBJECT_WITH_INIT_METHODHeaderLayer onBackClicked

HeaderLayerLoaderHeaderLayerLoader HeaderLayer.cpp 
    CCB_SELECTORRESOLVER_CCMENUITEM_GLUE"onBackClicked"onBackClickedCCDirectorsharedDirector()->popScene 2
 在CocosBuilder中新建一个Menus.ccb,并将根节点Custom class设置为MenuLayer.
 再加入几个CCMenuItemImage,Selector分别设置为onPressA,onPressB,onPressC.
 再加入一个CCLabelBMFont,绑定Doc root var,值为mMessageLabelBMFont.
 在Xcode中新建一个类MenuLayer,并且在MenuLayer.h中同时声明一个MenuLayerLoader类. 
 MenuLayer.h 
MenuLayerMenuLayer onPressA onPressB onPressCmMessageLabelBMFontMenuLayerLoaderMenuLayerLoader MenuLayer.cpp 
 mMessageLabelBMFont"mMessageLabelBMFont"false

SEL_MenuHandler "onPressA"onPressA"onPressB"onPressB"onPressC_NO_Match"onPressC
   //注意这里,我们给第三个绑定了一个不存在的SelectorName."A pressed.""B pressed.""C pressed." 3
 或许有点着急了吧,我们如何让这个运行起来呢?
 首先给MainScene增加一个新函数的声明及定义,还需要增加一个变量用于和Header.ccb中的mTitleLabelTTF绑定. 
 MainScene.h 
 openTest pCCBFileName pCCNodeName  pCCNodeLoader CCLabelTTFmTitleLabelTTF; 
openTest pCCNodeName pCCNodeLoader

    lib"HeaderLayer"());
    libpCCNodeNamepCCBFileName
    readerautoreleasepushScene"mTitleLabelTTF"CCLabelTTF"ccb/Menus.ccbi""MenuLayer" 运行一下吧,看看效果.
  
 4
 Sprites & 9 Slice 这个比较简单,只是靠CocosBuilder就能完成任务了.我这里就不在赘述了.
  
 我拼的不太好,嘿嘿. 主要是着重代码,并非设计,漂亮的事情交给美术妹纸吧. 
 5
 Buttons这块主要是研究了CCControlEvent的各种情况. 我们只贴出核心代码. 
 ButtonsLayer.cpp 
ButtonsLayeronBtnClickedswitchpCCControlEvent
        caseCCControlEventTouchCancel
            mEventLabelBMFont"Cancel"breakCCControlEventTouchDown"Touch Down"CCControlEventTouchDragEnter"Drag Enter"CCControlEventTouchDragExit"Drag Exit"CCControlEventTouchDragInside"Drag Inside"CCControlEventTouchDragOutside"Drag OutSide"CCControlEventTouchUpInside"Up Inside"CCControlEventTouchUpOutside"Up Outside"default://所有的定义都在上面了,TestCPP里面有句经典的点评,想看的可以去翻一下. (四)
 这一节也是很轻松,主要是牵涉到Timeline的切换. 其他的都是简单的界面制作.
 所以CocosBuilder的威力也体现在这里,很少的代码就能驱动界面了. 
 我们这次先做Particle System,Scroll View,最后以Animations收官. 
 1
 制作Particle System和Scroll View的界面很简单,我们也是以程序为重点,所以不再赘述.
 只需要一句this->openTest(“ccb/Scroll.ccbi”);就可以调用新的界面了.
 其他诸如绑定之类相信大家已经是轻车熟路啦. 
 
  
 2
 好吧,我承认一点,制作Animations的界面的时候,我直接复制了例子中的节点.
 5个Timeline,还是很复杂的,应该是一个非常精细的工作. 向美术们致敬. 
 AnimationsLayer.h 
AnimationsLayerAnimationsLayer setAnimationManagerCCBAnimationManagerpAnimationManager onIdle pSender onWave onJump onFunkymAnimationManagerAnimationsLayerLoaderAnimationsLayerLoader AnimationsLayer.cpp 
 mAnimationManager
    CC_SAFE_RELEASE_NULL"onIdle"onIdle"onJump"onJump"onWave"onWave"onFunky"onFunkysetAnimationManager
    mAnimationManager  pAnimationManager
    CC_SAFE_RETAINrunAnimationsForSequenceNamedTweenDuration"Idle" 0.3f"Jump""Wave""Funky" 整个代码还是很简单. 和以前的几个例子稍微有点不同的是在调用的时候,需要把CCBReader里面的AnimationManger传入.
 好,还是看下调用的代码吧. 
onAnimations pCCBFileName "ccb/Animations.ccbi""AnimationsLayer"NULL &amp;&
        lib
        //获取AnimationManger 并传给AnimationsLayer
        ((*)readergetAnimationManager

        scene

CocosBuilder 教程

相关文章