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);

HelloWorldScene.cpp最后面添加代码：

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);

HelloWorldScene.cpp最后面添加代码：

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。