cocos2d-x 3.6版连连看开始界面

最新推荐文章于 2017-07-23 17:33:00 发布
置顶 最新推荐文章于 2017-07-23 17:33:00 发布
阅读量4.1k 收藏 2
点赞数 2
分类专栏： cocos2d-x游戏开发 cocos2d-x 3.6实例入门 文章标签： cocos2d-x 游戏开发 连连看 开始界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dawn_moon/article/details/46486977
版权

我的博客：http://blog.csdn.net/dawn_moon
上一节讲了一个loading的动画界面，其实没有loading资源。
怎么样loading资源，如何预加载资源呢。

直接上代码

 // 创建一个一直重复的动画
    loading->runAction(RepeatForever::create(Sequence::create(fadeIn, fadeIn->reverse() ,NULL)));

    // loading resources
    {
        // 帧缓存
        auto spriteFrameCache = SpriteFrameCache::getInstance();
        // 纹理缓存
        auto textureCache = Director::getInstance()->getTextureCache();
        textureCache->addImage(s_backgound);
        textureCache->addImage(s_backgound_cloud1);
        textureCache->addImage(s_backgound_cloud2);
        textureCache->addImage(s_backgound_sea1);
        textureCache->addImage(s_backgound_sea2);
        textureCache->addImage(s_beach_adornment);
        textureCache->addImage(s_island);

        spriteFrameCache->addSpriteFramesWithFile(s_boat_plist);

        // 加载声音资源
        SimpleAudioEngine::getInstance()->preloadBackgroundMusic(s_music_Back2new);
        SimpleAudioEngine::getInstance()->preloadBackgroundMusic(s_music_Back3new);
        SimpleAudioEngine::getInstance()->preloadBackgroundMusic(s_music_class);
        SimpleAudioEngine::getInstance()->preloadBackgroundMusic(s_music_mainmenu);
        SimpleAudioEngine::getInstance()->preloadEffect(s_music_2);
        SimpleAudioEngine::getInstance()->preloadEffect(s_music_3);
        SimpleAudioEngine::getInstance()->preloadEffect(s_music_4);
        SimpleAudioEngine::getInstance()->preloadEffect(s_music_12);
        SimpleAudioEngine::getInstance()->preloadEffect(s_music_14);
        SimpleAudioEngine::getInstance()->preloadEffect(s_music_15);
        SimpleAudioEngine::getInstance()->preloadEffect(s_music_16);
        SimpleAudioEngine::getInstance()->preloadEffect(s_music_19);

    }

这段预加载资源是写在init（）函数里面的，接着上一章讲的代码。
可以看出，这里的加载资源是同步加载。就是init以后，一个一个去加载资源，一个加载完了加载另一个。
可以在开始加载的地方打个时间，加载完的地方再打个时间，算一下加载资源需要多少时间。
获取系统时间，单位秒

utils::gettime();

这个加载资源比较快，不到一秒就加载完毕了。

加载完毕以后需要进入场景了，就是开始场景。

那这里如何实现这个机制。

scheduleOnce(SEL_SCHEDULE(&StartGame::initUi), 2);

加载完以后直接用一个自定义调度器，调了一个函数，initUi，延迟2秒调用。

简单粗暴。

在这个initUi（）函数里面，我会把游戏开始前的场景实现完成。大概有一个海洋背景，几片云朵，倒影，岛屿，船等。

void StartGame::initUi(float t)
{
    removeAllChildren();

    auto textureCache = Director::getInstance()->getTextureCache();

    auto spriteFrameCache = SpriteFrameCache::getInstance();

    {// 加载背景
        auto background = Sprite::createWithTexture(textureCache->getTextureForKey(s_backgound));

        background->setPosition(wSize.width / 2, wSize.height / 2);

        addChild(background);
    }

    {   // 白云1
        auto cloud1 = Sprite::createWithTexture(textureCache->getTextureForKey(s_backgound_cloud1));
        // 设置锚点，左下角
        cloud1->setAnchorPoint(Vec2(0, 0));

        cloud1->setPosition(0, wSize.height - cloud1->getContentSize().height);

        addChild(cloud1);

        // 白云倒影
        auto cloudShadow = Sprite::createWithTexture(textureCache->getTextureForKey(s_backgound_cloud1));

        cloudShadow->setAnchorPoint(Vec2(0, 0));

        cloudShadow->setFlippedY(true);

        cloudShadow->setOpacity(40);

        cloudShadow->setPosition(40, wSize.height - cloud1->getContentSize().height * 2);

        addChild(cloudShadow);

        // 白云2
        auto cloud2 = Sprite::createWithTexture(textureCache->getTextureForKey(s_backgound_cloud2));
        // 设置锚点，左下角
        cloud2->setAnchorPoint(Vec2(0, 0));

        cloud2->setPosition(cloud1->getContentSize().width, wSize.height - cloud2->getContentSize().height);

        addChild(cloud2);

        // 岛
        auto land = Sprite::createWithTexture(textureCache->getTextureForKey(s_island));

        land->setAnchorPoint(Vec2(1, 0));

        land->setPosition(wSize.width - 40, wSize.height - land->getContentSize().height - 47 * 2);

        addChild(land);

        // 岛倒影
        auto landShadow = Sprite::createWithTexture(textureCache->getTextureForKey(s_island));

        landShadow->setAnchorPoint(Vec2(1, 0));

        landShadow->setFlippedY(true);

        landShadow->setOpacity(40);

        landShadow->setPosition(wSize.width - 40, wSize.height - land->getContentSize().height - 78 * 2);

        addChild(landShadow);

        // 取第一帧
        auto frame = spriteFrameCache->getSpriteFrameByName("sailing_boat1.png");
        auto boat = Sprite::createWithSpriteFrame(frame);
        boat->setPosition(wSize.width - boat->getContentSize().width-50*2,230*2);

        // 创建一个帧动画
        auto animation = Animation::create();
        for (int i = 1; i < 4; i++) {
            char bname[64] = {0};
            sprintf(bname, "sailing_boat%d.png", i);
            animation->addSpriteFrame(spriteFrameCache->getSpriteFrameByName(bname));
        }
        animation->setDelayPerUnit(0.5);
        animation->setRestoreOriginalFrame(true);
        addChild(boat);
        auto animate = Animate::create(animation);
        boat->runAction(RepeatForever::create(animate));

        // 船来回游荡，并会掉头
        auto flipxAction = FlipX::create(true);
        auto moveBy = MoveBy::create(10, Vec2(-240, 0));
        auto action = Sequence::create(moveBy, flipxAction, moveBy->reverse(), flipxAction->reverse(), NULL);
        boat->runAction(RepeatForever::create(action));

        // 第二条船
        auto boat2 = Sprite::createWithSpriteFrame(frame);
        boat2->setFlippedX(true);
        boat2->setPosition(100, 400);
        addChild(boat2);
        boat2->runAction(animate->clone());
        auto moveBy2 = MoveBy::create(12, Vec2(300, 0));
        auto action2 = Sequence::create(moveBy2, flipxAction->clone()->reverse(), moveBy2->reverse(), flipxAction->clone(), NULL);
        boat2->runAction(RepeatForever::create(action2));
    }

}

3.x版的动作系统和2.x有很大区别，比如MoveTo动作没有reverse()方法了，就是说MoveTo不能直接逆动作了。还有帧动画简化了很多。

大概会是这么个样子：
这里写图片描述
还有一些元素，下一张再来说明。

早上起来又加了一些注释，这样看起来清楚一些。

void StartGame::initUi(float t)
{
    // 干掉所有的子节点，这里主要是要干掉loading的精灵和其动作
    removeAllChildren();

    // 纹理缓存，预加载的资源可以直接从缓存取出来
    auto textureCache = Director::getInstance()->getTextureCache();

    // 帧缓存，直接从缓存取帧
    auto spriteFrameCache = SpriteFrameCache::getInstance();

    {// 加载背景
        auto background = Sprite::createWithTexture(textureCache->getTextureForKey(s_backgound));

        background->setPosition(wSize.width / 2, wSize.height / 2);

        addChild(background);
    }

    {   // 白云1
        auto cloud1 = Sprite::createWithTexture(textureCache->getTextureForKey(s_backgound_cloud1));
        // 设置锚点，左下角
        cloud1->setAnchorPoint(Vec2(0, 0));

        cloud1->setPosition(0, wSize.height - cloud1->getContentSize().height);

        addChild(cloud1);

        // 白云倒影
        auto cloudShadow = Sprite::createWithTexture(textureCache->getTextureForKey(s_backgound_cloud1));

        cloudShadow->setAnchorPoint(Vec2(0, 0));

        // 垂直翻转
        cloudShadow->setFlippedY(true);

        // 设置透明度
        cloudShadow->setOpacity(40);

        cloudShadow->setPosition(40, wSize.height - cloud1->getContentSize().height * 2);

        addChild(cloudShadow);

        // 白云2
        auto cloud2 = Sprite::createWithTexture(textureCache->getTextureForKey(s_backgound_cloud2));
        // 设置锚点，左下角
        cloud2->setAnchorPoint(Vec2(0, 0));

        cloud2->setPosition(cloud1->getContentSize().width, wSize.height - cloud2->getContentSize().height);

        addChild(cloud2);

        // 岛
        auto land = Sprite::createWithTexture(textureCache->getTextureForKey(s_island));

        // 设置锚点，右下角
        land->setAnchorPoint(Vec2(1, 0));

        land->setPosition(wSize.width - 40, wSize.height - land->getContentSize().height - 47 * 2);

        addChild(land);

        // 岛倒影
        auto landShadow = Sprite::createWithTexture(textureCache->getTextureForKey(s_island));

        landShadow->setAnchorPoint(Vec2(1, 0));

        landShadow->setFlippedY(true);

        landShadow->setOpacity(40);

        landShadow->setPosition(wSize.width - 40, wSize.height - land->getContentSize().height - 78 * 2);

        addChild(landShadow);

        // 取第一帧
        auto frame = spriteFrameCache->getSpriteFrameByName("sailing_boat1.png");

        // 用帧创建一个船精灵
        auto boat = Sprite::createWithSpriteFrame(frame);
        boat->setPosition(wSize.width - boat->getContentSize().width-50*2,230*2);

        // 创建一个帧动画
        auto animation = Animation::create();

        // 循环取船的序列帧
        for (int i = 1; i < 4; i++) {

            char bname[64] = {0};

            sprintf(bname, "sailing_boat%d.png", i);

            animation->addSpriteFrame(spriteFrameCache->getSpriteFrameByName(bname));
        }

        // 设置每一个动画帧的间隔
        animation->setDelayPerUnit(0.5);

        // 动画完毕后保持第一帧
        animation->setRestoreOriginalFrame(true);

        addChild(boat);

        // 创建一个动作
        auto animate = Animate::create(animation);

        boat->runAction(RepeatForever::create(animate));

        // 向左移动
        auto moveBy = MoveBy::create(10, Vec2(-240, 0));

        // 水平翻转，船掉头
        auto flipxAction = FlipX::create(true);

        // 组合动画，船来回游荡，并会掉头
        auto action = Sequence::create(moveBy, flipxAction, moveBy->reverse(), flipxAction->reverse(), NULL);

        boat->runAction(RepeatForever::create(action));

        // 第二条船，动画同上，不过是在左边
        auto boat2 = Sprite::createWithSpriteFrame(frame);

        boat2->setFlippedX(true);

        boat2->setPosition(100, 400);

        addChild(boat2);

        // 这里不能直接用animate，因为boat1已经使用，这里必须要用另一个动作，所以clone一下
        boat2->runAction(animate->clone());

        auto moveBy2 = MoveBy::create(12, Vec2(300, 0));

        // 这里的flipx跟boat1相反，所以这里先reverse一下，后面不reverse
        auto action2 = Sequence::create(moveBy2, flipxAction->clone()->reverse(), moveBy2->reverse(), flipxAction->clone(), NULL);

        boat2->runAction(RepeatForever::create(action2));
    }

}

这段代码其实很清晰了。不过这里有很多知识点，比如纹理缓存，组合动作，帧动画，锚点等，后面一一讲解，这里先看代码吧。

大掌教
关注
专栏目录
cocos2d-x的初步学习二十五之连连看一
wangdaren的专栏
10-21 7845
这篇文章中，我们将简单的做一个连连看的demo,这里也会涉及到寻径算法，连连看有三种情况，一条直线的，一个拐点的，两个拐点的，  情况一：要连接的两点在同一条直线上                             0 0 0 0 0 0                 0 2 0 0 0 2        * ------ *                 0 0 0
跟着BOY学习--史上最通俗易懂的连连看算法--cocos2d-x 环境下开发
郑州|boy的专栏
08-19 3530
兄弟们大家好，本来说好的是星期五出连连看的。不过被我给睡过去了，这些天一直都很瞌睡。不过睡眠好了做事的效率就高。希望兄弟们不要见怪。废话话不多说，首先我先说明说明一下《连连看地图布局之谜》 先上一张图给大家看看 当大家看到这张图片的时候会看到周围一圈对号，这个是我做标记用的，当然 真正的开发游戏过程中 这些对号是不存在的。我这里想给大家说明的是 假如我们的 地图是14*8的 那么其实真正的
cocos2d-x 3.6版连连看
weixin_33743661的博客
02-03 86
写个连连看来讲游戏开发，我认为实例解说效果会好一些。 终端以下cd到源代码文件夹，敲命令： cocos new LLK -p com.goonear.llk -l cpp -d ./Goonear 脚本就会创建一个project了。看脚本的输出提示： 事实上脚本创建新project原理非常easy，引擎原码文件夹下有非常多project模板。安卓，ios，mac...
cocos2d-x3.6 连连看完整源代码
weixin_34205826的博客
07-23 218
我的博客：http://blog.csdn.net/dawn_moon 好了，这个连连看是用最新版cocos2d-x 3.6版写的，里面使用了非常多新特性。基本完工了。另一个积分和关卡没有做。有兴趣的同学能够拿到源代码自己做一个。练练手。 后面我准备写一个cocos2d-x3.6物理游戏。由于cocos2d-x从3.x系列以后就自己封装了物理引擎到框架里面，使用起来...
cocos2d-js 连连看
weixin_30312557的博客
08-31 139
一、开始场景，游戏主场景 其实感觉这个引擎还是存在很多坑的，但是理解不是一朝一夕，今天主要完成了第一个场景开始界面以及游戏主页面的一个布局。 main.js入口文件做一些初始化，指向下一个场景的方法，并且预加载图片。 cc.LoaderScene.preload(g_resources, function () { cc.director.runScene(new menuScene...
cocos2d-x 连连看 win32
10-20
《cocos2d-x在win32环境下构建连连看游戏详解》 在IT行业中，cocos2d-x是一个广泛使用的2D游戏开发框架，它基于C++，支持跨平台开发，包括iOS、Android以及Windows等操作系统。本项目是基于cocos2d-x 2.14版本，在...
基于cocos2d-x的连连看游戏源码
05-21
《基于cocos2d-x的连连看游戏源码解析与技术探讨》 cocos2d-x是一款跨平台的游戏开发框架，广泛应用于2D游戏的制作，以其高效、易用和强大的功能深受开发者喜爱。本篇文章将围绕“基于cocos2d-x的连连看游戏源码”...
cocos2d-x连连看源码
06-24
《cocos2d-x 实现连连看游戏的深度解析》 在移动游戏开发领域，cocos2d-x 是一个广泛使用的开源游戏引擎，它支持跨平台开发，包括iOS、Android以及Windows等多个操作系统。本篇文章将深入探讨如何使用cocos2d-x ...
基于cocos2d-x的连连看游戏
10-03
《基于cocos2d-x开发连连看游戏的深入解析》 Cocos2d-x是一款强大的跨平台2D游戏开发框架，被广泛应用于iOS、Android、Windows等多平台的游戏开发。本篇文章将围绕“基于cocos2d-x的连连看游戏”进行深度探讨，帮助...
cocos2d-x连连看全代码(转载)
11-25
【cocos2d-x连连看全代码解析】 Cocos2d-x是一款开源的、跨平台的游戏开发框架，基于C++，支持iOS、Android、Windows等多个操作系统。它为开发者提供了丰富的图形渲染、音频处理、动画系统等功能，使得游戏开发变得...
cocos2dx 连连看
07-12
http://blog.csdn.net/gongluck93/article/details/75040471
cocos creator连连看游戏
08-24
cocos creator + js写的连连看小游戏，游戏的基本功能能实现，有倒计时进度条。与平时接触的连连看差不多，适合初学者学习
cocos2dx连连看代码和资源
03-11
使用cocos2dx写的一个连连看小游戏，其中使用CCUserDefault数据库实现了登陆界面，并添加了一些粒子效果
cocos2d水果连连看游戏
06-18
自学iphone开发和Cocos2d游戏开发后做的一个小游戏。。。。。参考资料《Learn iPhone and iPad Cocos2D Game Development, Apress, Nov 2010》
cocos creator实例--使用creator简单实现连连看游戏 | 附代码LLK.zip
01-17
cocos creator实例--使用creator简单实现连连看游戏 | 附代码。点击相同的两个动物图案，会消失一个选中框，然后就会消失掉
cocos2d-x的初步学习二十七之连连看三
wangdaren的专栏
10-25 8606
接下来，我们将完成剩下的游戏界面部分。连连看我们可以看做是一个m行乘以n列的一个矩行，其中我们规定0为空的，其余数字可以看作是图片的引用id，通过这个id，我们可以直接找到这个图片，有了图片，我们就可以初始化出这个对应的精灵。然后通过touch事件判断出是否选中或是没选中这个精灵，然后通过相应的算法，算出所选两个精灵对象是否是一样的，并且符合我们的游戏规则，符合就消掉，不符合再重新选取。。。。。。
cocos2dx连连看
流氓高手
01-16 1167
算法么，网上的基本上都看了下, 我也是新手来着，代码很乱，如果你写连连看遇到难处了，就下下来看看！ 下下来的文件 一个资源文件一个 class   覆盖下自己的就可以了，记得把 class文件夹里的main.cpp  拷贝到win.32文件夹里去覆盖下  要不自己改成 800*480的分辨率也行！ 上代码！#ifndef __HELLOWORLD_SCENE_
用cocos2d-x制作连连看
skillart的专栏
10-20 3748
最近一段在看cocos2d-x。就坐个连连看练手。 难度主要是还是算法实现。 最开始想用bfs，后来发现最短路径的转弯个数不一定是最小的。 然后就用dfs了，设置两个变量turn_num，step_num标记转弯个数和步数进行剪枝，算法效率还是挺快的。 没有去用二维数组存取位置信息，为了方便只是用个CCArray存储，影响不大。 void GameLayer::link_dfs(bool
cocos2d-x3.6 连连看触摸事件传递
大掌教的Cocos Creator研究院
06-28 3175
我的博客：http://blog.csdn.net/dawn_moon上一篇基本已经实现了连连看的整个游戏。 这一篇讲加一个倒计时和一个Game Over的界面，当游戏结束的时候弹出Game Over的对话框，还可以Play again。倒计时很简单，就是一个时间进度条。 // 时间条背景框 auto progressFrame = Sprite::createWithTexture
程序猿热衷Cocos2d-X：从零开始学习历程
5. **菜单设计**：设计游戏界面和菜单系统，包括使用Cocos2d-x的UI控件，如CCMenuItem和CCMenu，来创建交互式菜单和选项。 在文章提到的学习过程中，作者首先设置了开发环境，使用Visual Studio 2010 Express，并将...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值