在最新的cocos集成环境中，CocosStudio已经集成到cocos中了，至于界面的制作和编辑器的基本使用在cocos官网有详细教程，

这里就不细说，资源下载和详情请参看官网教程：http://cn.cocos2d-x.org/tutorial/show?id=1650

 

接下来就是使用cocos2d-x3.4完成接下来的代码操作与打包，一步一步来。

1、cocos2d-x3.4环境问题，cocos2d-x3.4对NDK的要求是最新的，这里我使用的是r10d。如果使用eclipse进行打包，需要

eclipse版本在23以上，这里我是用的是2014年7月2号的版本（Eclipse IDE for Android Developers 23.0.2.1259578 ）。

相应的SDKcocos2d-x3.4项目默认是20，（2014年7月2号的版本的ADT里面集成的SDK就是20）请自行下载。另外Python

和java请自行安装，并且配置好环境变量。建议新手直接下载cocosframeworks3.4进行安装，这样cocos相关的环境变量会自

动配置好。

2、使用eclipse进行android编译的还有一个重要的参数需要配置：NDK_MODULE_PATH，我嫌麻烦，直接配置在环境变量里。

3.4的这三个目录分别是cocos引擎根目录，external目录，和cocos目录，例如我的配置：

FrameWorks\frameworks\cocos2d-x-3.4rc1;D:\CocosFrameWorks\frameworks\cocos2d-x-3.4rc1\external;D:\CocosFrameWorks\frameworks\cocos2d-x-3.4rc1\cocos

3、接下来就是工程的创建和代码编写了，这里我使用c++开发，编辑器使用vs2013update4。

首先打开命令行窗口，使用cocos命令行创建工程：cocos new KissBear -p com.KissBear.cn -l cpp -d D:\cocosProjects

解释下命令参数：new是新建工程命令，-p是包名称，-l是开发语言，-d是工程存放目录

4、将cocosStudio导出的资源文件全部拷贝到工程目录下的Resources目录下。嗯，先看下cocosStudio的效果图：

 
每个窗口里面的小熊是不可见的，这样我们只需要在代码里面实现随机出现就可以了。
5、接下来，分析下具体的逻辑实现，第一步：加载出来界面，然后九个窗子里的小熊随机出现，如果触摸判断到触点在小熊上面，
那么分数往上加，很简单的。
6、话不多说，分析下代码需求开整。首先我们需要一个函数用来产生一个随机编号，大小在1-9之间，用来决定哪个小熊显示出来，
然后需要一个函数用来显示相对应的小熊，此外还此外还需要一个函数用来进行分数的显示。数据方面需要一个表用来存储所有的小熊，
一个表示当前显示小熊的变量，还有点中小熊之后的嘴唇图片变量，一个分数变量。为了小熊的显示不会接连两次重复显示同一个，还
需要一个变量存储上一次小熊的序号。
7、上代码开始，创建创建新类BearMainScene，引入相关头文件，定义函数以及变量：
 1 /************************************************************************/
 2 /* 头文件：BearMainScene.h*/
 3 /************************************************************************/
 4 
 5 #ifndef __HELLOWORLD_SCENE_H__
 6 #define __HELLOWORLD_SCENE_H__
 7 
 8 #include "cocos2d.h"
 9 #include "ui/CocosGUI.h"
10 USING_NS_CC;
11 using namespace cocos2d::ui;
12 
13 class BearMainScene : public cocos2d::Layer
14 {
15 public:
16     static cocos2d::Scene* createScene();
17 
18     virtual bool init();
19     
20   
21     CREATE_FUNC(BearMainScene);
22 
23 public:
24     int GetRandNum();
25 
26     void update(float delta); //帧循环
27     void GetshowBear(); //获取要显示的小熊并且显示小熊
28     void setScore(); //设置分数
29     Vector<Node*> bearNodeArray; //存储所有的小熊列表
30     Node *alivebear;    //当前显示的小熊
31     Sprite *sp_kiss;  //嘴唇精灵
32     Text *scoreText;  //分数控件
33 
34     static float beginclock;   //显示计时
35     int preBearNum;    //上次显示的小熊编号
36     static float difftime;     //显示时间差
37     static int totalScore;   //总分数
38 };
39 
40 #endif // __HELLOWORLD_SCENE_H__

实现文件：

  1 #include "BearKissScene.h"
  2 #include "cocostudio/CocoStudio.h"
  3 #include "ui/CocosGUI.h"
  4 
  5 USING_NS_CC;
  6 
  7 float BearMainScene::difftime = 1.5;
  8 int BearMainScene::totalScore = 0;
  9 float BearMainScene::beginclock = 0.0;
 10 
 11 Scene* BearMainScene::createScene()
 12 {
 13     auto scene = Scene::create();
 14     auto layer = BearMainScene::create();
 15     scene->addChild(layer);
 16     return scene;
 17 }
 18 
 19 bool BearMainScene::init()
 20 {
 21     if ( !Layer::init() )
 22     {
 23         return false;
 24     }
 25 
 26     auto manilayer = CSLoader::createNode("MainScene.csb");
 27     this->addChild(manilayer);
 28 
 29     char index[4];
 30     for (int i = 1; i < 10; i++)
 31     {
 32         std::string nodename = "ProjectNode_";
 33         memset(index, 0, sizeof(char) * 4);
 34         sprintf(index, "%d", i);
 35         nodename = nodename.append(index);
 36         auto sp_w = manilayer->getChildByName(nodename);
 37         bearNodeArray.pushBack(sp_w);
 38     }
 39 
 40     scoreText = (Text*)manilayer->getChildByName("Text_Score");
 41     setScore();
 42        
 43     sp_kiss = Sprite::create("m.png");
 44     sp_kiss->setVisible(false);
 45     sp_kiss->setAnchorPoint(Vec2(0.5, 0.5));
 46     this->addChild(sp_kiss);
 47 
 48     GetshowBear();
 49 
 50          //拉姆达表达式做碰撞监听
 51     auto bearListener = EventListenerTouchOneByOne::create();
 52     bearListener->onTouchBegan = [&](Touch *touch, Event* event){
 53         auto bearrect = Rect(0, 0, alivebear->getContentSize().width, alivebear->getContentSize().height);
 54         auto startpos = alivebear->convertToNodeSpace(touch->getLocation());
 55 
 56         if (bearrect.containsPoint(startpos) && alivebear->isVisible())
 57         {
 58             sp_kiss->setVisible(false);
 59             sp_kiss->setPosition(touch->getLocation());
 60             sp_kiss->setVisible(true);
 61             totalScore += 100;
 62                         //如果显示时间间隔大于0.1秒，那么分数每增长1000分，时间差减去0.1，这样子，就会随着分数的提高难度增加
 63             if (difftime != 0.1)
 64             {
 65                 if (totalScore % 1000 == 0)
 66                 {
 67                     difftime -= 0.1;
 68                 }
 69             }
 70             
 71             setScore();
 72         }
 73 
 74         return true;
 75     };
 76 
 77     bearListener->onTouchMoved = [](Touch *touch, Event* event){
 78     };
 79 
 80     bearListener->onTouchEnded = [&](Touch *touch, Event* event){
 81 
 82     };
 83 
 84     _eventDispatcher->addEventListenerWithSceneGraphPriority(bearListener, alivebear);
 85     
 86     this->scheduleUpdate();
 87 
 88     return true;
 89 }
 90 
 91 int BearMainScene::GetRandNum()
 92 {
 93     int num = 0;
 94     while (1)
 95     {
 96         num = rand_0_1() * 10;
 97         if (num >= 0 && num < 9)
 98         {
 99             break;
100         }
101     }
102     return num;
103 }
104 
105 void BearMainScene::GetshowBear()
106 {
107     int idx = GetRandNum();
108     while (idx == preBearNum)
109     {
110         idx = GetRandNum();
111     }
112     preBearNum = idx;
113     std::string spritename = "Sp_bear";
114     auto bearNode = bearNodeArray.at(idx);
115     alivebear = bearNode->getChildByName(spritename);
116     if (sp_kiss->isVisible())
117     {
118         sp_kiss->setVisible(false);
119     }
120     alivebear->setVisible(true);
121 }
122 
123 void BearMainScene::update(float delta)
124 {
125     beginclock += delta;
126     if (beginclock >= difftime)
127     {
128         beginclock = 0;
129         alivebear->setVisible(false);
130         GetshowBear();
131     }
132 }
133 
134 
135 void BearMainScene::setScore()
136 {
137     char scorestr[10];
138     memset(scorestr, 0, sizeof(scorestr));
139     sprintf(scorestr, "%d", totalScore);
140     scoreText->setString(scorestr);
141 }


8、然后，修改appdelegate的glview属性：glview = GLViewImpl::createWithRect("MyKissBear", Rect(0, 0, 640, 960));

这里需要注意，如果想要跑WP8的工程createWithRect这个函数是没有的，需要使用setFrameSize去设置大小。

9、最后进入项目目录，打开命令行窗口：cocos run -p android -m release --ap-20 ,当然请把android手机连上电脑。这里需要

注意，这里编译的是release版本，是需要签名的，如果嫌麻烦，将release改成debug或者直接去掉，因为默认是debug版本编译的。

那么要签名的话，需要先生成签名文件，这里简单说下方法，同样进入项目目录，打开命令行窗口：keytool -genkey -alias demo.keystore -keyalg RSA -validity 3650 -keystore demo.keystore

demo.keystore是签名文件名称，RSA是加密方式，3650是有效天数，-alias是别名，还有个keysize，这里就不设置，默认就好。

签名文件生成之后，在执行前面的run命令，根据提示输入keystore路径，就好了。

10、如果使用ecliose编译，相关路径一定要配置好，我遇到的问题就是提示c++空指针，原因是因为我在首次打开eclipse是NDK路径

没有设置正确，即使NDK之后设置正确，打开也会报错，解决方法：删除android工程下的.cproject文件。

 

最后，上一张手机上的效果图：

 

好啦，到这里就结束了。