学习使用Cocos制作《闹钟》
SweetLover 2015-03-02 09:58:35 10311 次阅读
1.安装环境搭建：VS2013 + Cocos v2.1
(1)安装VS2013
-
下载VS2013旗舰版（下载地址）
-
VS2013旗舰版安装教程：
进入360云盘：http://yunpan.cn/QTtbZW8SIjZte，输入密码：a701
打开“主流CCPP开发环境工具文档视频”，打开文件夹“8.VS2013开发环境搭建”，下载里面的mp4视频“VS2013环境搭建以及简单C程序测试.mp4”。
(2)安装Cocos引擎Cocosv2.1
进入Cocos引擎中文官网下载页面，选择Cocos正式版引擎下载，这里我们以Windows的为例：
安装好了记得启动它，然后下载安装商店里面的CocosFrameWork即可：
如果不明白具体过程，那么可以参考VS2013的安装教程（选择“主流CCPP开发环境工具文档视频”中的“15.搭建Windows-cocos2dx开发环境cocos2dx2.2.1”，注意这里面我们暂时只需要安装商店里面的）：
(3)开发前的素材准备
相关素材和完成好的代码链接：ClockDemo.zip
视频教程（转码问题视频非高清，高清视频请点击下载）
2.具体开发过程指导
(1)Cocos Studio部分
1.打开Cocos工具，新建一个项目：
2.设置好相关的配置，点击完成，从而发布到Cocos Studio中：
3.Cocos Studio IDE介绍：
左上角的是开发常用的游戏元素、UI控件、容器等，可以像VS2013一样拖拽，并在右边设置对应的属性；左下角是资源导入，可以导入所需的图片背景；下面是时间戳，用于设置基于时间戳的动画，在Cocos2dx模板中默认是FPS=60。
4.导入下载的资源，一般我们只导入图片即可：
5.给场景添加精灵节点：
6.添加好相关的精灵到Clock节点中：
7.设置时针分针秒针的锚点重合：
8.保存clock.csd节点设计文件，返回到MainScene.csd中，把clock.csd节点拖动到合适的位置，并且设置其在MainScene.csd中的名称：
9.保存所有设计文件（*.csd），然后将其发布到VS2013中：
10.点击确定，打开VS2013工程，但是不要关闭CocosStudio工程：
(2)VS2013结合Cocos Studio部分
1.在VS2013的文件“HelloWorldScene.h”中添加3个精灵：
HelloWorldScene.h底下CREATE_FUNC(HelloWorld);之后添加代码：
private:
cocos2d::Sprite* hour;
cocos2d::Sprite* minute;
cocos2d::Sprite* second;
2.编写初始化时，查找并加载加载精灵的函数seekFromRootByName：
HelloWorldScene.h底下cocos2d::Sprite*second;之后添加代码：
private:
cocos2d::Node* seekFromRootByName(cocos2d::Node* root,std::string& name);
Node* HelloWorld::seekFromRootByName(Node* root,std::string& name)
{
if (!root)
return nullptr;
if (root->getName() == name)
return root;
const auto& arrayNode = root->getChildren();
for (auto& child : arrayNode)
{
Node* pNode = dynamic_cast<Node*>(child);
if (pNode)
{
Node* res = seekFromRootByName(pNode,name);
if (res)
return res;
}
}
return nullptr;
}
3.在初始化中加载这些精灵：
HelloWorldScene.cpp底下addChild(rootNode);之后添加代码：
hour = dynamic_cast<Sprite*>(seekFromRootByName(rootNode,std::string("h")));
minute = dynamic_cast<Sprite*>(seekFromRootByName(rootNode,std::string("m")));
second = dynamic_cast<Sprite*>(seekFromRootByName(rootNode,std::string("s")));
4.添加定时器事件，让秒针、分针、时针走动：
HelloWorldScene.cpp底下
second = dynamic_cast<Sprite*>(seekFromRootByName(rootNode,std::string("s")));
schedule(schedule_selector(HelloWorld::timeChanged),1.0);
void HelloWorld::timeChanged(float dt)
{
static int cnt = 0;
static float h = hour->getRotation();
static float m = minute->getRotation();
static float s = second->getRotation();
s += 6.0;
m += 0.1;
cnt = ++cnt % 12;
if (cnt == 0)
{
h += 0.1;
hour->setRotation(h);
}
minute->setRotation(m);
second->setRotation(s);
}
5.编译运行，此时已经完成95%，只差声音部分了：
6.把clock.mp3复制到项目Resource文件夹下的res目录下面：
7.编写声音代码：
HelloWorldScene.cpp前面按照先后顺序分别插入两条代码：
#include "SimpleAudioEngine.h"
using namespace CocosDenshion;
在HelloWorldScene.cpp的HelloWorld::timeChanged中添加代码：
SimpleAudioEngine::getInstance()->playEffect("clock.mp3");
8.编译运行，打完收工……
注意，右下角的音符符号，不是Cocos工程的，是Y470笔记本的智能影音功能。
感谢本教程作者（SweetLover）的分享，Cocos引擎中文官网欢迎更多的开发者分享开发经验。来稿请发送至：support@cocos.org。
