[置顶] 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), 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::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()), Vec2(CCRANDOM_0_1() * wSize.width, 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图片，懒得弄了。后面我会发放源码的，有兴趣的同学可以下载下来自己研究。