大家好今天请跟我一起做一个游戏的开始画面,就像保卫大萝卜一样的.



其中我们会学到：

1.texturepacker 软件的基本使用

2.cocosbuilder 的基本使用

3.代码的简单编写


第一步：提取图片


我们先提取一下所用的图片，当然我们要从《保卫萝卜》这个游戏中提取，下载《保罗》的android 版本之后解压（直接解压不了的改文件后缀zip）用textpacker打开文件 assets - > Thems->scene->mainscene1-hd.pvr.ccz 将它保存成png图片。如图：







保存之后我们再用imac自带的预览功能打开刚刚保存的文件，用矩形选择工具星花+c ，星花 + N （就是选择矩形区域复制，之后从剪切板新建文件），抠出我们需要用的图片并起好名字。



之后我们打开texturepacker ，将刚刚我们弄好的图片托进右边的sprites窗口，之后在左边的Output窗口中修改Texture Format 为(.pvr.ccz)的那个选项，之后导出，填写文件名 sence01 。



第二步：cocosbulider

打开cocosbuilder 新建一个工程，将没用的资源文件都删除掉，之后将我们texturepacker中生成的2个文件 “sence01.pvr.ccz”和“sence01.plist”拷贝到cocosbuilder工程中的资源文件夹“ccbResources”中,之后我们新建立一个层，New->New File


选择文件的类型，我选的是ccnode，当我选择CClayer的时候，动画不会循环播放，不知道为什么。


之后我们拖动左边窗口的图片，调整一下




之后关闭通过右边的属性窗口调整各个图片的位置。也可以通过几个快捷键调整。


这要说说“锚点”和“旋转”，“锚点”在视图窗口中有一个小点表示，如图：


“旋转”是以锚点的位置来旋转的，还有很多都是跟“锚点”有关。


好了，有了上面的几个要点相信大家很快就能把这些图片排列好了，下面咱就给图片加点动画。


还有比如上图的一片叶子压着另一片叶子只需要托动其中一个叶子改变一下排列顺序就可以了。




这样就可以点播放按钮看看效果了，咱的叶子就抖动起来了。好了，下面就要在xcode中编写代码了。


第三步：xcode 中编写代码

将builder生成的几个文件拷贝进xcode中

之后别忘了在xcode中添加进去。

添加代码吧，很简单只需要添加几行代码就可以了。（因为我们没用button事件响应所以很简单）

/* 创建一个自动释放的 Node 加载库 */
    CCNodeLoaderLibrary * ccNodeLoaderLibrary = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();
                     
    /* 创建一个 CCBReader，并设置自动释放 */
    cocos2d::extension::CCBReader * ccbReader = new cocos2d::extension::CCBReader(ccNodeLoaderLibrary);
    ccbReader->autorelease();
                     
    /*读取一个ccbi的文件,生成一个CCNode实例*/
    CCNode *animationsTest = ccbReader->readNodeGraphFromFile(pCCBFileName, this);
    //放回一个CCnode，剩下就的是添加到场景了。
    return animationsTest;


当然了你也可以放在一个函数中

CCNode *  HelloWorld::openCBBI(const char * pCCBFileName, const char * pCCNodeName, CCNodeLoader * pCCNodeLoader)
{
    //创建一个自动释放的CCNode加载库
    CCNodeLoaderLibrary * ccNodeLoaderLibrary = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();
    ccNodeLoaderLibrary->registerCCNodeLoader(pCCNodeName, pCCNodeLoader);
      
    //创建一个自动释放的CCB读取类（CCBReader）
    cocos2d::extension::CCBReader * ccbReader = new cocos2d::extension::CCBReader(ccNodeLoaderLibrary);
    ccbReader->autorelease();
      
    //读取ccbi文件获取根节点
    CCNode * node = ccbReader->readNodeGraphFromFile(pCCBFileName, this);
      
    return node;
}