学习使用Cocos制作《闹钟》

前端之家收集整理的这篇文章主要介绍了学习使用Cocos制作《闹钟》前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

学习使用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);

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

原文链接:https://www.f2er.com/cocos2dx/342971.html

猜你在找的Cocos2d-x相关文章