我的程式開發筆記: 12月 2013

2013年12月14日星期六

cocos2d-x与CocosBuilder笔记：HelloCocosBuilder

http://blog.csdn.net/wayne5ning/article/details/8652371

本文将一步一步展示怎样将CocosBuilder导出的东西加入到cocos2d-x工程中，生成可执行程序。这涉及到几个问题：

安装CocosBuilder，然后大致了解其功能
使用CocosBuilder编辑并保存
将CocosBuilder的输出加入到cocos2d-x工程中

下面逐一介绍。cocos2d-x有一个比较全面的例程，但是比较难于理解。本文只是抽取其中一部分，主要实现如下的功能：启动时，界面上有一个字标(Label)和一个按钮。这个字标具有一定的动画效果；当点击这个按钮时，要有响应。界面大致如下

1 CocosBuilder功能初探

CocosBuilder只能在Mac下边安装，直接从官网下载app文件即可。如果只有Windows系统，则需要在虚拟机中安装MAC系统，具体参考“[资料整理]虚拟机安装Lion及XCode4”。

安装好后，打开可以看到如下的界面（此图包含了一些注释，版本为2.1）：

从图中可以看了，此界面从逻辑上大致分为7个版块。5和6是可以伸缩的，通过拖动调整大小，5或6其中可以有一个不被显示。

1 菜单

包括CocosBuilder, File, Edit, Object, View, Animation, Window, Help等菜单。

CocosBuilder涉及至此软件的一些操作，如关闭、更新等；File针对一个工程的操作，如打开、关闭、发布等；Edit提供一般的编辑操作，如复制、粘贴等；Object提供场景内容上操作，如对齐，选择等；View为视图操作，如放大、缩小等；Animation提供动画编辑与相关的操作，如插入关键帧等；Window提供窗口管理；Help提供搜索及说明文档入口。

常用：File/Publish, Animation/Insert Keyframe/*等, Object/*

2 调整视图

View菜单下的一些快捷操作

3 场景元素类型

由图中可以看出，能够放在cocos2d-x场景中的元素都可以在CocosBuilder中编辑。图中从左到右依次是

Node：CCNode；
Layer：CCLayer, CCLayerColor, CCLayerGradient, CCScrollView；
Sprites：CCSprite, CCScale9Sprite；
Label：CCLabelTTF, CCLableBMFont；// 还差CCLableAtlas
Menu：CCMenu, CCMenuItemImage； // 缺少CCMenuItemFont
Control：CCBControlButton； // 与CCMenuItem区别是什么？
FX：CCParticleSystemQuad； // 粒子编辑器，CCParticleSystemPoint已经不推荐了，所以有没有无所谓
CCB：CCBFile // 似乎是可以嵌套？
另外还有插件功能：TODO: 补充实用插件

加上菜单上的由此可见，功能相当强大了。

4 工程视图

当把ccbproj放到cocos2d工程下的Resources目录下时，用CocosBuilder打开此ccbproj，会显示此Resources目录下的所有资源文件，它们就显示在工程视图中。如下图所示

注意到plist和文件夹是可以展开的。关于plist请参考官方文档。

5 效果预览

CocosBuilder是所见即所得的，编辑结果可以立即在此窗口中预览。如下

6 场景元素列表及动画编辑区

这儿主要是动画编辑，可以设定关键帧、设置关键帧之间的过渡方式(EaseAction)、总动画时间等，每个元素可以单独进行动画编辑。本文对"Hello CocosBuilder"字标做了一个动画，设定了两个关键帧，使用BounceIn/Out的过渡方式，界面大致如下：

此区域左半部分列出了窗口中元素的层次关系，它们组成一个树状结构，也就是Cocos2d中场景描述的图形化展示。最顶层是一个CCLayer，它可以有很多元素作为孩子，每个孩子可以对它的一些属性设置动作，如Visibility, Position, Scale, Rotation, Opacity, Color。总之，cocos2d中Action能用Action来实现的东西都可以在这儿编辑。结点的位置决定了它的zOrder相对深度，越往下，则它离观察者越近（可以通过在左侧拖动或者Object菜单来调整它们的相对深度）。

7 场景元素参数设置(用于生成代码)

对于不同的场景元素有不同的参数需要设置，对于CCLabelTTF，其参数设置界面如下：

2 使用CocosBuilder编辑并保存

CocosBuilder自带有说明文档，主要的编辑可以参考此文档。CocosBuilder对内容的管理也是使用“工程”，首先需要新新建一个CocosBuilder工程(后缀名为ccbproj)。需要注意的是，CocosBuilder的工程只有在cocos2d工程目录下的Resources目录中时，才可以进行编辑。这一点在说明文档中说得不是很能让人注意到。

使用CocosBuilder编辑场景，主要在涉及三个方面

1 添加元素

可以从两个地方添加元素，一是从窗口区域4中选择一个资源，拖到到窗口区域6中左侧；二是点击窗口区域3中相应元素，此元素自动加入到窗口区域6中的列表中。

2 设置元素属性

如前所述，窗口区域6中左侧描述了场景中元素的组成关系，这是可以通过拖动来改变的；它们的位置可以通过在窗口区域5中拖动来实现，并且通过Object来辅助对齐并设置z-order；通过窗口区域7可以设置它们的更多参数。本文要关心的是有两个地方，一个是顶层Layer的类名，另个是按钮的响应函数，它们的设置会影响代码的实现。它们都涉及到怎样将CocosBuilder的描述产生出具体的实例与行为（函数）。为产生具体实例，在Cocos2d-X中实例的生产类与一个名字建立映射，这个名字再与CocosBuilder中的实体建立映射；为了得到函数，Cocos2d-X的函数指针与一名字(字符串)建立映射，这个名字与CocosBuilder中的按钮建立映射。

3 设置元素动作

在窗口区域6中，选中一个元素，然后通过Animation/Insert Keyframe来对其中一个可动作属性添加动作。可以添加多个关键帧。相邻两个关键帧之间自动建立插值机制，并且这个插值机制可以通过右击此插值区域，来选择其中一种插值机制。关于动画的编辑，请参考Skeletal animation。

3 将CocosBuilder的输出加入到cocos2d-x工程中

在CocosBuilder中选中一个ccb文件，然后点击File/Publish便会生成一个ccbi文件(本文的为HelloCocosBuilder.ccbi，注意先保存[Save]然后再发布[Publish]，否则生成的内容是不全的)。CocosBuilder的每一个场景内容(ccb文件)导出后为一个ccbi文件，将这些ccbi文件和资源文件一起放到cocos2d-x的Resources目录下边（目录结构不要改变），然后就可以开始在cocos2d-x工程中使用这些ccbi文件了。使用这些ccbi文件，cocos2d-x的例程中提供了一个比较复杂的实现，现在我整理一下对于单个ccbi文件需要做什么工作。

为了加载一个场景(由ccbi描述)，在cocos2d-x中需要做如下事情：

定义一个场景类，并定义这个类的生产类，然后还要做一引起字符串到类、字符串到函数的映射(cocos2d-x提供了一些宏来辅助映射)，具体如下(注：这里我将声明和实现放到一起以便更好理解，具体实现时请将声明和实现分离)：

定义场景类将做好映射

[cpp] view plaincopyprint?
// 类名可以是任意  
// 从这4个类(接口)继承是必要的，继承顺序可以不同  
class HelloCocosBuilderLayer  // 可以是任意名字  
    : public CCLayer  
    , public CCBSelectorResolver  
    , public CCBMemberVariableAssigner  
    , public CCNodeLoaderListener  
{  
public:  
    static CCScene* scene();  
    ~HelloCocosBuilderLayer(){};  
  
    // 封装实例创建方法, 必须  
    CCB_STATIC_NEW_AUTORELEASE_OBJECT_WITH_INIT_METHOD(  
        HelloCocosBuilderLayer, create);  
  
    // 响应按钮点击事件，非必须，如果方法，则事件不会有响应  
    void onButton1Clicked(CCObject * pSender,  
        CCControlEvent pCCControlEvent)  
    {  
        // 这里面的实现不重要  
        CCLabelTTF* pLabel = CCLabelTTF::create("Button Is Clicked", "Arial", 34);  
        pLabel->setColor(ccc3(255, 0, 0));  
        addChild(pLabel);  
        pLabel->setPosition(ccp(getContentSize().width/2,  
            pLabel->getContentSize().height));  
    }  
  
private: // 访问权限不一定要是private  
    // 将MenuItem名字与响应函数做映射  
    virtual SEL_MenuHandler onResolveCCBCCMenuItemSelector(  
        CCObject * pTarget, CCString * pSelectorName)  
    {  
        // 以后再讨论此问题  
    }  
    // 将CCControl名字与响应函数做映射  
    virtual SEL_CCControlHandler onResolveCCBCCControlSelector(  
        CCObject * pTarget, CCString * pSelectorName)  
    {  
        // 说明见注释“Control与响应函数映射”  
        CCB_SELECTORRESOLVER_CCCONTROL_GLUE(  
            this, "onButtonClicked", HelloCocosBuilderLayer::onButton1Clicked);  
        return NULL;  
    }  
    // 将变量名字与变量做映射  
    virtual bool onAssignCCBMemberVariable(  
        CCObject * pTarget, CCString * pMemberVariableName, CCNode * pNode)  
    {  
        // 以后讨论此问题  
    }  
    // 当此场景加载完成后，如果需要做一些操作，则在此方法中添加  
    virtual void onNodeLoaded(  
        CCNode * pNode, CCNodeLoader * pNodeLoader)  
    {  
    }  
  
    HelloCocosBuilderLayer(){};  
};  

定义场景生产类

[cpp] view plaincopyprint?
// 类名任意  
class MyLoader : public CCLayerLoader  
{  
public:  
    CCB_STATIC_NEW_AUTORELEASE_OBJECT_METHOD(  
        MyLoader, loader);  
  
private:  
    CCB_VIRTUAL_NEW_AUTORELEASE_CREATECCNODE_METHOD(  
        HelloCocosBuilderLayer);  
};  

使用场景类与场景生产类

在此场景的次结点(一般是Scene)中适当地方调用如下代码

[cpp] view plaincopyprint?
// 将ccbi中场景名与场景产生类建立映射  
CCNodeLoaderLibrary * ccNodeLoaderLibrary  
    = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();  
ccNodeLoaderLibrary->registerCCNodeLoader(  
    "MyLoader", MyLoader::loader());  
  
// 用CCBReader解析ccbi文件，生成场景对象node  
CCBReader * ccbReader = new CCBReader(ccNodeLoaderLibrary);  
CCNode * node = ccbReader->readNodeGraphFromFile("HelloCocosBuilder.ccbi", this);  
  
ccbReader->release();  
  
// 加入到父类中  
if(node != NULL) {  
    this->addChild(node);  
}  

完结。

注：cocos2d-x版本 -- cocos2d-2.0-x-2.0.3

此文还在完善过程中，欢迎各种意见与建议，谢谢。

1楼 Mikiller3 2013-06-21 15:42发表 [回复] [引用] [举报]

CCControlButton 和CCMenuItem区别很大啊~首先他们的背景图类型不一样,CCControlButton对应CCScale9Sprite, CCMenuItem对应CCSprite.之后的区别几乎都源自于这两种sprite,ControlButton可以缩放(不过有个bug,需要改源码,具体记不清了,网上一搜就有),具有点击后的动画效果(不是简单地图片切换,而是放大缩小之类的形变).另外,CCControlButton可以单独使用,CCMenuItem好像一定要配合CCMenu使用吧?
个人在用惯CCControlButton后,几乎就不再使用MenuItem了...CCSprite也几乎全用CCScale9Sprite替换了

Mac下配置cocos2d-x开发环境（android和ios）

http://www.cnblogs.com/ookcode/p/3214164.html

一、下载cocos2d-x

http://cocos2d-x.org/projects/cocos2d-x/wiki/Download

cocos2d-x-2.1.4.zip @ June.18, 2013

我们可以看到最新版本的2.1.4，这个版本提供了一个用python命令来建立各平台的项目，十分便利

下载，解压（建议解压到主目录下的）

二、下载python

http://www.python.org/getit/

建议选择2.7.5版本的下载

Python 2.7.5 Mac OS X 64-bit/32-bit x86-64/i386 Installer
Python 2.7.5 Mac OS X 32-bit i386/PPC Installer

下载，安装，然后在终端直接输入python，如果出现版本信息则安装成功。

三、建立cocos2d-x项目

进入终端，执行以下命令

cd ~/cocos2d-x-2.1.4/tools/project-creator/
python create_project.py -project game01 -package com.ookcode.game -language cpp

create_project.py要求提供3个参数（工程名：我这里是game01，包名：我这里是com.ookcode.game，语言：cpp | js | lua）

执行成功会显示以下信息

proj.ios        : Done!
proj.android        : Done!
proj.win32        : Done!
proj.mac        : Done!
proj.blackberry        : Done!
proj.linux        : Done!
proj.marmalade        : Done!
New project has been created in this path: /Users/ookcode/cocos2d-x-2.1.4/projects/game01
Have Fun!

进入game01目录，你可以看到这些项目

Classes    
Resources        
proj.android    
proj.ios    
proj.mac    
proj.win32
proj.blackberry    
proj.linux    
proj.marmalade

怎么样，全平台都给你搭好了，而且共用一个Classes文件夹，也就是说你在一个平台更新了代码，全平台都得到了更新。

四、编辑ios项目

进入game01/proj.ios/目录，直接双击打开game01.xcodeproj（别说你没装xcode）

然后点run就可以跑起来了

我在这里曾经犯了一个很2的错误，就是一直在cocos2dx这个目录下run，死活跑不起来

这里要选中game01，不然就变成一直在build cocos2dx了

这个HelloWorldScene.cpp就是你的代码了，你可以自己修改，不过由于所有平台用的都是这个，所以改了之后记得在其他平台也跑下

五、编辑安卓项目（重点，这个比较复杂）

1.下载ADT Bundle

http://developer.android.com/sdk/index.html

（解压到主目录，重命名为adt-bundle，为了下面写路径方便）

2.下载NDK（目前最新版本是：android-ndk-re8）

http://developer.android.com/tools/sdk/ndk/index.html

（解压到主目录）

3.为Eclipse安装CDT插件

打开eclipse，选择菜单Help／Install New Software

在Work With下拉框中选择自己eclipse的版本名，然后在插件里选中Programming Languages，打开下拉列表

选择C/C++ Development Tools安装，重启eclipse

这是你可以新建一个c++的HelloWorld项目试一试

当你运行的时候可能会有如下错误：

gcc: command not found

g++: command not found

打开xcode->preferences->Downloads

你需要下载安装Command Line Tools，安装完成后，重启Eclipse，然后重新运行那个c++项目，你会在Console中看到久违的HelloWorld！

4.配置全局变量

进入终端，执行以下命令

vim ~/.bash_profile

按i进行编辑，输入以下路径

export COCOS2DX_ROOT=/Users/ookcode/cocos2d-x-2.14/
export NDK_ROOT=/Users/ookcode/android-ndk-r8e
export ANDROID_NDK_ROOT=/Users/ookcode/android-ndk-r8e
export ANDROID_SDK_ROOT=/Users/ookcode/adt-bundle/sdk
export PATH=$ANDROID_NDK_ROOT:$PATH
export PATH=$ANDROID_SDK_ROOT:$PATH

按ESC，再输入:wq 保存并退出（基本的vi命令要会）

******这里是我的路径，切记得换成你自己的*******

5.用NDK编译android项目

进入终端，执行以下命令

cd ~/cocos2d-x-2.1.4/projects/game01/proj.android
./build_native.sh

然后就是漫长的编译

Compile++ thumb  : cocos2dcpp_shared <= main.cpp
Compile++ thumb  : cocos2dcpp_shared <= AppDelegate.cpp
Compile++ thumb  : cocos2dcpp_shared <= HelloWorldScene.cpp
Compile++ thumb  : cocos_extension_static <= AssetsManager.cpp
Compile++ thumb  : cocos_extension_static <= CCBFileLoader.cpp
………
………

当看到

Install        : libcocos2dcpp.so => libs/armeabi/libcocos2dcpp.so
make: Leaving directory `/Users/ookcode/cocos2d-x-2.1.4/projects/game01/proj.android'

就编译成功了

6.导入android项目

在eclipse中右键，new->project

选择Android Project from Existing Code

Browse到game01的proj.android目录

导入进来后我们发现有这样的错误

这是由于cocos2dx的文件没用正确的包含进来

右键项目->properties->Java Build Path

在Source里点Link Source

Browse到/cocos2d-x-2.1.4/cocos2dx/platform/android/java/src

然后随便取个名字，确定，刚才的错误就消除了！

--------------------------------------------------------------------------------------------------

2013年7月31日更新：

可以直接把/cocos2d-x-2.1.4/cocos2dx/platform/android/java当做一个安卓工程导入，然后都不用设置Link Source，一劳永逸！

--------------------------------------------------------------------------------------------------

7.创建AVD模拟器

注：cocos2d-x需要4.0.3以上的模拟器才能运行，真机无所谓

创建AVD是记得勾选Use Host GPU

右键项目->Run As -> Run Configurations-> Target

在最底部输入

8.运行项目

右键项目-> Run As -> Android Application

然后选择刚才创建的AVD，然后你可以去先喝杯茶（模拟器启动那叫一个慢~

9.编辑项目

千万别在eclipse里面写c++的代码， CDT真受不了。

前面说过，全平台的项目是共用一个classes的，所以，我们可以用xcode打开那个ios的项目

打开HelloWorldScene.cpp这个文件，我们进行一些简单的修改

找到这行代码，我们给他修改一个字体

CCLabelTTF* pLabel = CCLabelTTF::create("Hello World", "Arial", 24);

改成

CCLabelTTF* pLabel = CCLabelTTF::create("Hello World", "fonts/Marker Felt.ttf", 128);

你可能会奇怪，为什么字体要这样写"fonts/Marker Felt.ttf"

如果是要ios支持的话直接写Marker Felt就行，不过安卓却不能这样，我们可以看到，安卓项目的目录下有个fonts目录，所以得按这种写法来获得安卓的支持

（不过我疑惑的是，ios明明没用fonts这个目录，它是怎么判断出是这个字体的）

10.运行修改过的项目

在xcode中点击Run

发现了么，字体改变了！

然后接着是android项目，因为修改了代码，所以必须重新编译一次

再次进入终端，输入以下代码

cd ~/cocos2d-x-2.1.4/projects/game01/proj.android
./build_native.sh

这次不会想上一次编译一样花那么久，因为不会再编译一次cocos2dx的代码

Using prebuilt externals
make: Entering directory `/Users/ookcode/cocos2d-x-2.1.4/projects/game01/proj.android'
Compile++ thumb  : cocos2dcpp_shared <= HelloWorldScene.cpp
SharedLibrary  : libcocos2dcpp.so
Install        : libcocos2dcpp.so => libs/armeabi/libcocos2dcpp.so
make: Leaving directory `/Users/ookcode/cocos2d-x-2.1.4/projects/game01/proj.android'

出现以上代码就表示编译成功了

我们再回到eclipse，右键项目->Run As -> Android Application

六、结束语

　　cocos2d-x的环境实在是很烦人，花了整整一天的时间才搭建好，期间更是碰到各种乱七八糟的错误，所以特地注册个博客，就为了把这次艰辛的环境搭建给记录下来，也

给正在纠结的朋友们提供一些帮助。

　　慢慢悠悠写了两个小时，这是我第一次写东西，表达的不是很清楚，还请大家见谅，有什么问题可以回复给我，有什么错误也请指出。

　　我现在也在学cocos2d-x，不知道有没有朋友能一起交流-。-（本人93年大2屌丝，技术宅，未婚，木有妹纸0.0）

訂閱：文章 (Atom)

2013年12月14日 星期六

cocos2d-x与CocosBuilder笔记：HelloCocosBuilder

1 CocosBuilder功能初探

1 菜单

2 调整视图

3 场景元素类型

4 工程视图

5 效果预览

6 场景元素列表及动画编辑区

7 场景元素参数设置(用于生成代码)

2 使用CocosBuilder编辑并保存

1 添加元素

2 设置元素属性

3 设置元素动作

3 将CocosBuilder的输出加入到cocos2d-x工程中

定义场景类将做好映射

定义场景生产类

使用场景类与场景生产类

Mac下配置cocos2d-x开发环境（android和ios）

2013年12月14日星期六