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

前端之家收集整理的这篇文章主要介绍了cocos2d-x 3.6版连连看开始界面动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我的博客http://blog.csdn.net/dawn_moon
上一篇文章讲了开始界面的几个主要元素,背景,白云,倒影,岛及其倒影,沙滩等。里面稍微难一点的就是序列帧动画,延时动作序列,比如船的动画效果。船的来回游荡的动画稍微有一点复杂,里面由很多动作组成一个序列,比如翻转,移动,移动的逆动作,序列包装,无限重复动作包装等。不过代码很清晰,看不懂的可以下面留言。

这一篇讲几个比较高难度的动作,学完之后一定充满了快感。哈哈~~

首先是海浪的动画,然后是海鸥的动画,然后是一个play按钮和回调。

可能看起来很简单,但是其实还是有很多知识点的。网上有一篇文章,他实现的方式是用一个动画接一个回调,回调函数里面是另一个动作来完成的。我这里不这么做,我就纯动作序列。

这个海浪有点特别,它的动画是两个纹理来完成的,潮起的时候是一个纹理,潮落的时候是另一个纹理。那么怎么样用两个精灵来做一个动画呢,有方法吗。

当然是有的,不然我就不讲了。

这里用到一个比较高级的动作,叫做TargetedAction,这个动作有连个参数,一个是动作,另一个是要执行这个动作的目标。好了,有了这个东西就好办了。

思路是这样,海浪1执行一个动作序列,序列里面有一个TargetedAction动作,这个TargetedAction动作的执行者是海浪2,它又会执行自己的一个动作序列,那么连起来就是一个潮涨潮落的动作了。看代码

// 海浪1
        auto wave = Sprite::createWithTexture(textureCache->getTextureForKey(s_backgound_sea1));

        wave->setOpacity(0);

        wave->setPosition(wSize.width / 2,140 * 2);

        addChild(wave);

        // 海浪2
        auto wave2 = Sprite::createWithTexture(textureCache->getTextureForKey(s_backgound_sea2));

        wave2->setPosition(wSize.width / 2,100 * 2);

        wave2->setOpacity(0);

        addChild(wave2);


        // 两组动画,知识点比较多
        auto waveMoveBy = MoveBy::create(4.0,Vec2(0,-80));

        // 由暗到明
        auto fadeIn = FadeIn::create(3.0);

        // 由明到暗
        auto fadeOut = FadeOut::create(1.0);

        // 放到初始位置
        auto place1 = Place::create(Vec2(wSize.width / 2,140 * 2));

        // 同时进行动作,时间长度由最长的动作决定
        auto spawn = Spawn::create(waveMoveBy,Sequence::create(fadeIn,fadeOut,nullptr),nullptr);

        // 海浪2的动作
        auto spawn2 = Spawn::create(waveMoveBy->clone()->reverse(),Sequence::create(fadeIn->clone(),fadeOut->clone(),nullptr);
        // 海浪2的初始位置
        auto place2 = Place::create(Vec2(wSize.width / 2,100 * 2));

        // target 动作,指定tartget的动作
        auto targetAction = TargetedAction::create(wave2,Sequence::create(spawn2,place2,nullptr));

        // 延迟2s
        auto delay = DelayTime::create(2.0);

        wave->runAction(RepeatForever::create(Sequence::create(spawn,targetAction,place1,delay,nullptr)));

每一行都加了注释,里面的动作比较多,有Place,FadeIn,FadeOut,MoveBy,Spawn,TargetedAction,RepeatForever。知识点蛮多的哈。

这一套组合起来效果还不错,有疑问可以留言。

然后再来看海鸥的动作。

海鸥会在海面上飞过,当然我这里屏幕上只有一只海鸥飞。但是我想让时不时有一只海鸥飞过,而且飞的方向,速度都是不一样的,这样看起来会比较真实一些。这怎么玩,会不会玩坏了,哈哈。

设计是这样的,一个海鸥精灵,它会有一个序列帧动画,扇动翅膀的动画。然后随机出现一个在一个位置,飞过屏幕,路线也是随机的,时不时会出现一只。

先看序列帧动画:

// 鸟

        auto birdFrame = spriteFrameCache->getSpriteFrameByName("seagull1.png");

        mBird = Sprite::createWithSpriteFrame(birdFrame);

        auto point = Vec2(CCRANDOM_0_1() * wSize.width,0);

        mBird->setPosition(point);

        // 创建帧动画
        auto birdAnimation = Animation::create();

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

            char bname[64] = {0};

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

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

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

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

        addChild(mBird);

        // 创建一个动作
        auto birdAnimate = Animate::create(birdAnimation);

        mBird->runAction(RepeatForever::create(birdAnimate));

这里用了一个成员变量来保寸海鸥对象,为什么,因为动作里面没有办法来实现时不时飞一只海鸥过来了。

要实现这个效果怎么搞,时不时飞一只,那就是每过一个时间间隔,发生一些事情。那么这不就跟系统的调度器很像么,对,就是调度器。

屏幕上的海鸥我们放在了point这个位置,这个位置有点随机性,看代码,里面用了一个随机函数CCRANDOM_0_1。那么我们需要把第一只海鸥飞出去。

mBird->runAction(MoveBy::create(2,Vec2(CCRANDOM_0_1() * wSize.width,point.y + wSize.height + 100)));

然后启用调度器

// 启用默认调度器,调用系统update函数来刷新 scheduleUpdate();

这个函数会启用系统调度器,那么Node节点的update函数就会开始刷新,默认每0.1s调用一次。所以我们要实现update函数

void StartGame@H_403_277@::update(float dt) { // 如果海鸥飞出屏幕,就重新设置其位置,重新执行飞的动作 if (mBird->getPosition().y > wSize.height + 20) { auto point = Vec2(CCRANDOM_0_1() * wSize.width,10);
        mBird->setPosition(point);
        mBird->runAction(MoveBy::create(floor(5 * CCRANDOM_0_1()),point.y + wSize.height)));
    }
}

那么鸟的动画也做完了。

接下里弄一个play的按钮,点击开始游戏。

// 播放按钮
        auto play = Sprite::createWithTexture(textureCache->getTextureForKey(s_button_play));

        auto playS = Sprite::createWithTexture(textureCache->getTextureForKey(s_button_play_s));

        // 菜单按钮接一个回调函数
        auto menuItem = MenuItemSprite::create(play,playS,CC_CALLBACK_1(StartGame::play,this));

        auto menu = Menu::create(menuItem,nullptr);

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

        addChild(menu);

这里挺简单,不过这个回调函数的原理有很多知识,这个后面专门来讲3.x版引擎的回调函数

这个回调函数里面还没有东西,这里我们要进入游戏场景了,但是这个场景现在还没有(:。

截个图:

我这里没有做gif图片,懒得弄了。后面我会发放源码的,有兴趣的同学可以下载下来自己研究。

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