【转】Cocos2dx.3x入门三部曲

原文链接：/article/4777233.html

Cocos2dx.3x入门三部曲-软件环境配置(一)

一、环境：

Win7 32位

二、必备软件：

l Java JDK

下载地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html

作者使用的版本：1.6

l android-sdk

下载地址：http://dl.google.com/android/android-sdk_r23.0.2-windows.zip

作者使用的版本：r23

l android-ndk

下载地址：http://dl.google.com/android/ndk/android-ndk32-r10-windows-x86.zip

作者使用的版本：r10

l Eclipse

下载地址：http://www.eclipse.org/downloads/packages/

作者使用的版本：Indigo

l Python

下载地址：https://www.python.org/downloads/windows/

作者使用的版本：2.7.9

l Cygwin

下载地址：https://cygwin.com/install.html

作者使用的版本：for x86

l cocos2d-x-3.3

下载地址：http://cn.cocos2d-x.org/download

作者使用的版本：3.3

l Visual Studio 2012

下载地址：http://download.microsoft.com/download/b/0/f/b0f589ed-f1b7-478c-849a-02c8395d0995/vs2012_ult_chs.iso

作者使用的版本：2012

三、安装配置：

特殊点：

生活在大神州可能需要先在hosts文件中加入以下内容才真正常安装配置

203.208.46.146 www.google.com

74.125.113.121 developer.android.com

203.208.46.146 dl.google.com

203.208.46.146 dl-ssl.google.com

l Java JDK安装配置

安装：基本上就是一路next按钮，安装的时候注意路径，我的路径是：C:\Java\jdk1.6

配置：

1、新建环境变量：JAVA_HOME 值为：C:\Java\jdk1.6



2、新建环境变量：CLASSPATH 值为：.;%JAVA_HOME%\lib;（注意：点号表示当前目录，不能省略）

3、在系统变量Path的值的前面加入以下内容：%JAVA_HOME%\bin;(注意:这里的分号不能省略)到这里，JDK安装完毕。

4、单击“开始”—>“运行”—>输入：cmd命令，在CMD窗口中输入：java -version

出现如下界面，就表示安装成功：



l android-sdk

安装：只需要解压缩到目录就好，我的路径是：C:\android-sdk-windows



配置：在下面Eclipse中进行配置

使用：双击安装目录中的SDK Manager.exe进行SDK Platform包的安装下载，根据你需要开发的android版本选择下载相应的包。



l android-ndk

安装：只需要解压缩到目录就好，我的路径是：C:\android-ndk-r10



配置：在下面Eclipse中进行配置

l Eclipse安装配置

安装：只需要解压缩到目录就好，我的路径是：C:\eclipse-indigo



配置：

1、 ADT（Android开发工具）安装配置：

开启Eclipse，进入菜单中的 "Help" -> "Install New Software"



进入Install界面后Add地址：http://dl-ssl.google.com/android/eclipse，



展开Developer Tools后勾选 "Android DDMS" 和 "Android Development Tools" 然后Next进行安装安装完毕后重启Eclipse即可。

2、 SDK(android-sdk)安装配置

进入菜单中的 "Window" -> "Preferences"



选择左边的Android然后右边选择SDK Location的路径，这个路径就是前面android-sdk的解压缩后放置的目录。

3、 NDK（android-ndk）安装配置

进入菜单中的 "Window" -> "Preferences"然后展开左侧的Android选中下面的NDK。



右边选择NDK Location的路径，这个路径就是前面android-ndk的解压缩后放置的目录。

l Python安装配置

安装：python安装的时候使用默认安装方式即可, 我的路径是：C:\Python27

配置：进行环境变量配置，在我的电脑（右键)->属性->高级系统设置->高级选项卡->环境变量->系统变量 中找到Path 变量，并在其值中增加 指向Python的环境变量。格式为 [Python安装路径]; 例如我安装在C盘 我的环境变量就新增为 C:\Python27;



l Cygwin安装配置

安装：cygwin安装的时候使用默认安装方式即可, 我的路径是：C:\cygwin

配置：cygwin\home\文件夹中生成一个以你的登录名命名的新的文件夹,找到文件夹中的“.bash_profile ”文件，用记事本或editplus等文本编辑器打开，在最后增加： （C:\android-ndk-r10是安装ndk的路径）NDK_ROOT=/cygdrive/c/android-ndk-r10

export NDK_ROOT

然后保存关闭。



使用：双击安装目录中的Cygwin.bat即可（在命令行中进入cygwin目录，并执行cygwin.bat也可以）

l cocos2d-x-3.3安装配置

安装：只需要解压缩到目录就好，我的路径是：C:\cocos2d-x-3.3

配置：无

使用：后续详细介绍

l Visual Studio 2012安装配置

安装：这个没啥好说的

配置：无

到这里为止，cocos3dx 3.x开发的软件以及环境都已经准备好了，后续还会有一些其它的辅助小软件比如TexturePacker、Particles等在具体的使用时进行介绍。

ocos2dx.3x入门三部曲-Hello Game项目创建(二)

一、前提：

完成cocos2d-x-3.x开发环境的安装配置。

具体参考：Cocos2d-x.3x_软件配置篇

二、本篇目标：

l 创建一个名为hello game的cocos2dx 3.3的项目

l 编译hello game项目

l 在eclipse中运行调试hello game项目，并且在android手机上运行成功

三、行动：

l 创建一个名为hello game的cocos2dx 3.3的项目

说明：Cocos2dx 3.3提供了名为cocos.py的Python脚本可以用来新建项目，路径为：C:\cocos2d-x-3.3\tools\cocos2d-console\bin目录下。

第一步：在cygwin的安装目录中Cygwin.bat，开启Cygwin命令行界面输入命令：cd C:/cocos2d-x-3.3/tools/cocos2d-console/bin进入到cocos.py所在的目录。



第二步：输入命令：python cocos.py new hellogame -p com.game.hellogame -l cpp -d game 回车然后脚本开始创建项目直到创建成功。



hellogame为项目名称

-p后面为包名

-l后面接开发语言类型，有cpp, lua, js三种类型

-d后面接项目存放的目录

项目新建成功后在目录C:\cocos2d-x-3.3\tools\cocos2d-console\bin\game\hellogame下生成了我们所需要的项目，分别包含android、ios_mac、linux、win8、win32、wp8六个不同平台的项目。这里重点关注proj.android和proj.win32这2个项目，我们接下来的工作就是修改这2个项目,至于proj.ios_mac这个项目在后续移植到iphone的ios平台上的时候会讲到。



l 编译hello game项目

第一步：进入proj.win32这个文件夹，双击hellogame.sln用Microsoft Visual Studio 2012打开项目。



第二步：点击运行开始漫长的项目编译工作，编译成功后运行项目出现游戏界面，第一次编译非常费时间请超耐心等待。



第三步：我们简单的修改一下代码，把Hello World改成Hello Game。在vs中打开HelloWorldScene.cpp文件:

原来代码：auto label = Label::createWithTTF("Hello World", "fonts/Marker Felt.ttf", 24);

修改后代码：auto label = Label::createWithTTF("Hello Game", "fonts/Marker Felt.ttf", 24);

然后点击运行查看效果,看到运行起来的界面中的Hello World改成Hello Game。

l 在eclipse中运行调试hello game项目，并且在android手机上运行成功

说明：上一环节中我们修改了一下游戏代码并且用Microsoft Visual Studio 2012编译在windows上运行成功，接下来我们要在eclipse中运行这个项目并且在android手机上运行成功。

在proj.android项目下有名为build_native.py的Python脚本可以把C++代码编译成android平台的so文件， 首有先在Cygwin命令行编译一下。

第一步：开启Cygwin命令行界面输入命令：cd C:/cocos2d-x-3.3/tools/cocos2d-console/bin/game/hellogame/proj.android进入到cocos.py所在的目录。

第二步：输入./ build_native.py开始编译so文件，这个过程也比较费时需要耐心。



第三步：编译成功后会在proj.android\libs\armeabi的目录下生成名为：libcocos2dcpp.so的文件。



第四步：开启eclipse，菜单File -> Import



第五步：Select root directory中选择proj.android的路径：C:\cocos2d-x-3.3\tools\cocos2d-console\bin\game\hellogame\proj.android



第六步：然后点击Finish后开启项目



第七步：然后点击运行在我的手机上开启游戏界面。



到此为止我们的hello game成功的跑在了android真机上，下一篇中，将对这个hello game的项目组成和基本知识进行讲解说明，让大家对cocos2d-3.x的项目有一定的认识。

Cocos2dx.3x入门三部曲-Hello Game项目解析(三)

一、前提：

完成Hello Game项目的创建编译。

具体参考：Cocos2dx.3x_Hello Game项目创建篇

二、本篇目标：

l 分析proj.win32工程的主要构成

l 分析proj.android工程的主要构成

l 新建一个MyScene.cpp然后在游戏中显示出来

l 在android真机上运行查看效果

三、分析：

我们游戏开发通常是这样的，首先在Microsoft Visual Studio 2012中proj.win32工程编写代码并且在windows上调试运行，当游戏主体开发完成后，进行so文件的编译打包，然后继续在eclipse的proj.android工程中编写少量的代码完成游戏在android平台下的打包开发。

l 分析proj.win32工程的主要构成

用Microsoft Visual Studio 2012打开proj.win32工程



组成：

整个hellogame的解决方案由hellogame、libbox2d、libcocos2d、libSpine四个工程项目构成。

1、Hellogame工程：游戏主工程，我们开发工作主要在这个工程中完成

2、libbox2d工程：模拟2D刚体物体的C++物理引擎，大名鼎鼎植物大战僵尸、愤怒的小鸟等游戏均有这个引擎的功劳

3、libcocos2d工程：这个不用说了，整个cocos2dx核心

4、libSpine工程：工具软件支持库

接下来主要对Hellogame工程的代码进行解析，libbox2d工程在后面的物理引擎篇的时候在进行讲解，至于其它2个工程在后续使用到的篇幅中在进行讲解。

Hellogame工程的源代码：

工程主要由src目录下的AppDelegate.cpp、AppDelegate.h、HelloWorldScene.cpp、HelloWorldScene.h四个源文件和win32目录下的main.cpp、main.h两个源文件组成。

src目录下的源文件是所有6个平台共用的代码文件，不管是android还是ios都使用这个目录下的源文件，属于真正跨平台部分的代码。

win32目录下的源文件只是一个main主入口文件，负责win32平台下对游戏的调用。其实在对应的proj.android的工程里也有一个android平台对应的main主入口文件，只是由于平台的不同实现代码也各有不同，但是目的一样。

AppDelegate.cpp源代码：

AppDelegate类似于android的Application的作用，提供一些应用程序级别的状态的回调，整个游戏应用程序由这个文件方法进行控制。下面是几个主要方法的说明和解释：

#include "AppDelegate.h"
#include "HelloWorldScene.h"
//命名空间宏，偷懒引入cocos2d的头文件
USING_NS_CC;
AppDelegate::AppDelegate() {

}

AppDelegate::~AppDelegate()
{
}

//设置 OpenGL context
//这个设置对所有平台都有效
void AppDelegate::initGLContextAttrs()
{
//设置 OpenGL context 属性,目前只能设置6个属性
//red,green,blue,alpha,depth,stencil
GLContextAttrs glContextAttrs = {8, 8, 8, 8, 24, 8};
GLView::setGLContextAttrs(glContextAttrs);
}

//当应用程序启动时执行,游戏程序启动入口
//在这里我们启动了第一个scene（场景）
//在具体游戏中通常在这里启动loading界面
//你的游戏从这里开始！
bool AppDelegate::applicationDidFinishLaunching() {
// 初始化 director
auto director = Director::getInstance();
auto glview = director->getOpenGLView();
if(!glview) {
glview = GLViewImpl::create("My Game");
director->setOpenGLView(glview);
}
// 在屏幕上显示FPS数
// 开发阶段建议开启这个设置，可以通过这个对自己游戏性能有个大体了解
// 等游戏正式发布时关闭这个设置
director->setDisplayStats(true);
// 设置 FPS数 默认值为 1.0/60
director->setAnimationInterval(1.0 / 60);
// 创建一个HelloWorld的scene.这个是自动回收的对象
auto scene = HelloWorld::createScene();
// 告诉director运行HelloWorld的scene
director->runWithScene(scene);
return true;
}

// 当游戏进入后台时会调用这个方法
// 比如玩游戏时按下android手机的home按键
// 比如当游戏时有电话打入直接显示来电界面
void AppDelegate::applicationDidEnterBackground() {
Director::getInstance()->stopAnimation();
// 如果你的游戏使用了SimpleAudioEngine,必须在这里进行暂停
// 暂停代码如下：
// SimpleAudioEngine::getInstance()->pauseBackgroundMusic();
}

// 当游戏恢复到前台运行时会调用这个方法
// 比如接电话结束是游戏界面又恢复到前台时
void AppDelegate::applicationWillEnterForeground() {
Director::getInstance()->startAnimation();
// 如果你的游戏使用了SimpleAudioEngine, 必须在这里进行恢复
// 恢复代码如下：
// SimpleAudioEngine::getInstance()->resumeBackgroundMusic();
}

上述代码解释中的提到的director（导演：负责游戏场景的显示切换等，像电影导演一样掌控整个电影的一切）、scene（场景：负责显示一个游戏场景，就像电影的一个场景镜头）。

上面代码中最重要的方法为applicationDidFinishLaunching()，因为你的游戏从这个方法开始！

HelloWorldScene.cpp源代码：

上面代码中在AppDelegate类的applicationDidFinishLaunching()方法中创建了一个HelloWorldScene的场景，并且运行这个场景，HelloWorldScene.cpp就是这个场景具体的代码实现。下面是几个主要方法的说明和解释：

#include "HelloWorldScene.h"
USING_NS_CC;
//创建场景
Scene* HelloWorld::createScene()
{
//创建一个自释放的场景对象
auto scene = Scene::create();
//创建一个自释放的画面层对象
auto layer = HelloWorld::create();
//把创建的画面层添加到场景中
//一个场景可以添加多个画面层
scene->addChild(layer);
//返回这个创建的场景
return scene;
}

// 场景初始化方法
bool HelloWorld::init()
{
// 1. 首先进行父类初始化
if ( !Layer::init() )
{
//如果初始化父类失败返回false
return false;
}

//获取整个手机可视屏幕尺寸
Size visibleSize = Director::getInstance()->getVisibleSize();
//获取手机可视屏原点的坐标
Vec2 origin = Director::getInstance()->getVisibleOrigin();
// 创建一个带图标的关闭按钮
// 点击后调用menuCloseCallback方法退出游戏
auto closeItem = MenuItemImage::create(
"CloseNormal.png",
"CloseSelected.png",
CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
// 设置关闭按钮的显示位置
// 显示在可视屏幕的右下角
closeItem->setPosition(Vec2(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,
origin.y + closeItem->getContentSize().height/2));
// 创建一个可自释放的菜单
auto menu = Menu::create(closeItem, NULL);
menu->setPosition(Vec2::ZERO);
this->addChild(menu, 1);
//创建一个显示"Hello Game"文字的Label
auto label = Label::createWithTTF("Hello Game", "fonts/Marker Felt.ttf", 24);
// 设置label在屏幕中的显示位置
label->setPosition(Vec2(origin.x + visibleSize.width/2,
origin.y + visibleSize.height - label->getContentSize().height));
// 把label添加到画面层
this->addChild(label, 1);
// 创建一个带图片的精灵
auto sprite = Sprite::create("HelloWorld.png");
// 设置图片精灵的显示位置
sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
// 添加图片精灵到画面层
this->addChild(sprite, 0);
return true;
}

// 退出按钮事件
void HelloWorld::menuCloseCallback(Ref* pSender)
{
//当是wp8或者winrt平台的时候
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WP8) || (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT)
MessageBox("You pressed the close button. Windows Store Apps do not implement a close button.","Alert");
return;
#endif
//结束Director
Director::getInstance()->end();
//当是ios平台的时候退出
#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
exit(0);
#endif
}

上述的代码是一个简单的Scene（场景）实现代码，当我们真正开发游戏时，其实就是制作一个一个的场景，并且通过Director进行调度组织构成一个完整的游戏。

l 分析proj.android工程的主要构成

用eclipse打开proj.android工程



组成：

整个hellogame的相比win32的要简单多了，除了android项目必须的一些组成部分之外：

1、 Classes文件夹：这里面的源文件和上面proj.win32中的属于同一份共享。

2、 jni/hellocpp/main.cpp:这个相当于proj.win32中的win32目录下的源文件，主入口。

3、 libs/armeabi/libcocos2dcpp.so：这个是整个游戏代码的编译包，其实真正游戏代码实现都最终由C++文件编译打包成这个so类库供android代码调用运行游戏。

整个游戏的开发基本上不需要在eclipse中编写代码，android平台只需要调用编译好的so文件即可运行游戏，eclipse中只需要把包含了so文件的android工程打包成apk文件发布即可。

l 新建一个MyScene.cpp然后在游戏中显示出来

用Microsoft Visual Studio 2012打开proj.win32工程，我们将在这个工程里新加一个自己的Scence(场景)并且显示出来。这个看着是个很简单的任务但是对新手来说还是会碰到很多困难，所以这里特别的做一下演示。

文件新建：cpp文件这里有2个新建方法,

1、第一种方式

第一步：在右边的解决方案资源管理器中右键src新建类。





问题：到这里你会发现“浏览”按钮不可以用，新建的cpp只能新建到目录hellogame\proj.win32下，这样会导致一个问题。

第二步：先不管这个我们按照提示继续点击“添加”进入类向导界面输入类名MyScene然后点击完成类的创建，这个时候在proj.win32目录下新加MyScene.cpp和MyScene.h两个文件。



2、第二种方式

第一步：在右边的解决方案资源管理器中右键src新建项





问题：到这里你会发现“浏览”按钮可以用，点击修改一下目录为hellogame\Classes下，而且需要选择是新建.ccp文件还是.h文件.

第二步：这里先选择.cpp类型然后输入MyScene.cpp然后完成创建，然后继续前面的步骤新建MyScene.h文件。这个时候在Classes目录下会出现新加的MyScene.cpp和MyScene.h两个文件。

代码编写：

MyScene.h：

#include "cocos2d.h"
class MyScene : public cocos2d::Layer
{
public:
static cocos2d::Scene* createScene();
virtual bool init();
CREATE_FUNC(MyScene);

};
MyScene.cpp：
#include "MyScene.h"
USING_NS_CC;
Scene* MyScene::createScene()
{
auto scene=Scene::create();
auto layer=MyScene::create();
scene->addChild(layer);
return scene;
}
bool MyScene::init()
{
if(!Layer::init())
{
return false;
}
//获取整个手机可视屏幕尺寸
Size visibleSize = Director::getInstance()->getVisibleSize();
//获取手机可视屏原点的坐标
Vec2 origin = Director::getInstance()->getVisibleOrigin();
//创建一个显示"MyScene"文字的Label
auto label = Label::createWithTTF("MyScene", "fonts/Marker Felt.ttf", 24);
//设置白色
label->setColor(Color3B::WHITE);
// 设置label在屏幕中的显示位置
label->setPosition(Vec2(origin.x + visibleSize.width/2,
origin.y + visibleSize.height - label->getContentSize().height));
// 把label添加到画面层
this->addChild(label, 1);
return true;
}

完成MyScene编写后，我们要先在游戏开启后的界面中添加一个按钮菜单点击后进入MyScene 场景。游戏开启后的界面场景是HelloWorldScene，所以我们需要在HelloWorldScene中添加一个按钮，并且为这个按钮添加一个点击启动MyScene的事件。

HelloWorldScene.h：

在这个文件中首先声明一个按钮点击事件：

//切换到下一个scene事件

void menuNextCallback(cocos2d::Ref* pSender);

HelloWorldScene.cpp：
1、首先引入MyScene.h
#include "HelloWorldScene.h"
#include "MyScene.h"
USING_NS_CC;
……

2、实现menuNextCallback事件代码
// 按钮点击事件，点击后启动MyScene
void HelloWorld::menuNextCallback(Ref* pSender)
{
//新建MyScene实例
auto scene = MyScene::createScene();
//用这MyScene实例替换当前scene
Director::getInstance()->replaceScene(scene);
}

4、    添加在屏幕上添加启动按钮
……
// 设置关闭按钮的显示位置
// 显示在可视屏幕的右下角
closeItem->setPosition(Vec2(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,
origin.y + closeItem->getContentSize().height/2));
// 新建一个带图片的按钮菜单
auto goItem=MenuItemImage::create("next_1.png","next_2.png",
CC_CALLBACK_1(HelloWorld::menuNextCallback, this));
goItem->setPosition(Vec2(origin.x + visibleSize.width/2 - closeItem->getContentSize().width/2 ,origin.y/2 + closeItem->getContentSize().height/2));
// 创建一个可自释放的菜单
auto menu = Menu::create(closeItem,goItem, NULL);
menu->setPosition(Vec2::ZERO);
this->addChild(menu, 1);
……

好了到此为止我们完成了所有代码的编写，现在开始调试运行查看一下效果。

问题：

这个时候如果你是用第二中方法创建的MyScene能正常编译运行而第一种方法创建的MyScene会发无法通过编译没办法运行会报如下错误：

IntelliSense: 无法打开 源 文件 "MyScene.h"

error C1083: 无法打开包括文件:“MyScene.h”: No such file or directory

解决：

第一步：项目名点击右键属性



第二步：选择左边的C/C++然后在右边的附加包含目录追添加：;$(ProjectDir)

这个是我本人的附加包含目录，每个人环境不同应该有点区别

$(EngineRoot)cocos\audio\include;$(EngineRoot)external;$(EngineRoot)external\chipmunk\include\chipmunk;$(EngineRoot)extensions;..\Classes;..;%(AdditionalIncludeDirectories) ;$(ProjectDir)





完成如上设置后在进行项目调试运行就能正常运行起来了，并且点击按钮后成功的显示MyScene的画面达到了我们设定的目标。

l 在android真机上运行查看效果

要在android真机运行，首先需要进行so文件的打包编译。

第一步：如果上面的步骤中是按照第一种方法创建的MyScene那么请把MyScene.cpp、MyScene.h两个文件从proj.win32文件拷贝到Classes文件夹下。如果是按照第二种方法创建的MyScene那么可以忽略本步骤。

[b]第二步：用EditPlus等文本编辑器打开proj.android\jni目录下的Android.mk文件，把MyScene.cpp添加到需要编译的源文件清单中然后保存，如下：[/b]

……

LOCAL_SRC_FILES := hellocpp/main.cpp \

../../Classes/AppDelegate.cpp \

../../Classes/HelloWorldScene.cpp \

../../Classes/MyScene.cpp

……

第三步：开启Cygwin开始编译打包so文件，如果不会请参考：Cocos2dx.3x_Hello Game项目创建篇

第四步：打包so文件成功后，然后开启eclipse打开游戏工程并且连接android手机运行工程看看真机运行的效果是否跟前面windows中的效果是否一样。



结束语：

Cocos2d-x3.3入门三部曲到这里就算是完成了，接下来将以具体一个游戏为一个系列的方式继续深入实战，第一个实战系列为：《Cocos2d-x3.x塔防游戏（保卫萝卜）从零开始》，这个系列总共有多少篇待定，目标是直到做完一个完整的符合上线标准的游戏为止绝非草草的练习之作。