cocos2d-x 3.6版连连看开始界面动画
2015-06-15 23:21
495 查看
我的博客:http://blog.csdn.net/dawn_moon
上一篇文章讲了开始界面的几个主要元素,背景,白云,倒影,岛及其倒影,沙滩等。里面稍微难一点的就是序列帧动画,延时动作序列,比如船的动画效果。船的来回游荡的动画稍微有一点复杂,里面由很多动作组成一个序列,比如翻转,移动,移动的逆动作,序列包装,无限重复动作包装等。不过代码很清晰,看不懂的可以下面留言。
这一篇讲几个比较高难度的动作,学完之后一定充满了快感。哈哈~~
首先是海浪的动画,然后是海鸥的动画,然后是一个play按钮和回调。
可能看起来很简单,但是其实还是有很多知识点的。网上有一篇文章,他实现的方式是用一个动画接一个回调,回调函数里面是另一个动作来完成的。我这里不这么做,我就纯动作序列。
这个海浪有点特别,它的动画是两个纹理来完成的,潮起的时候是一个纹理,潮落的时候是另一个纹理。那么怎么样用两个精灵来做一个动画呢,有方法吗。
当然是有的,不然我就不讲了。
这里用到一个比较高级的动作,叫做TargetedAction,这个动作有连个参数,一个是动作,另一个是要执行这个动作的目标。好了,有了这个东西就好办了。
思路是这样,海浪1执行一个动作序列,序列里面有一个TargetedAction动作,这个TargetedAction动作的执行者是海浪2,它又会执行自己的一个动作序列,那么连起来就是一个潮涨潮落的动作了。看代码:
每一行都加了注释,里面的动作比较多,有Place,FadeIn,FadeOut,MoveBy,Spawn,TargetedAction,RepeatForever。知识点蛮多的哈。
这一套组合起来效果还不错,有疑问可以留言。
然后再来看海鸥的动作。
海鸥会在海面上飞过,当然我这里屏幕上只有一只海鸥飞。但是我想让时不时有一只海鸥飞过,而且飞的方向,速度都是不一样的,这样看起来会比较真实一些。这怎么玩,会不会玩坏了,哈哈。
设计是这样的,一个海鸥精灵,它会有一个序列帧动画,扇动翅膀的动画。然后随机出现一个在一个位置,飞过屏幕,路线也是随机的,时不时会出现一只。
先看序列帧动画:
这里用了一个成员变量来保寸海鸥对象,为什么,因为动作里面没有办法来实现时不时飞一只海鸥过来了。
要实现这个效果怎么搞,时不时飞一只,那就是每过一个时间间隔,发生一些事情。那么这不就跟系统的调度器很像么,对,就是调度器。
屏幕上的海鸥我们放在了point这个位置,这个位置有点随机性,看代码,里面用了一个随机函数CCRANDOM_0_1。那么我们需要把第一只海鸥飞出去。
然后启用调度器
这个函数会启用系统调度器,那么Node节点的update函数就会开始刷新,默认每0.1s调用一次。所以我们要实现update函数。
那么鸟的动画也做完了。
接下里弄一个play的按钮,点击开始游戏。
这里挺简单,不过这个回调函数的原理有很多知识,这个后面专门来讲3.x版引擎的回调函数。
这个回调函数里面还没有东西,这里我们要进入游戏场景了,但是这个场景现在还没有(:。
截个图:
我这里没有做gif图片,懒得弄了。后面我会发放源码的,有兴趣的同学可以下载下来自己研究。
上一篇文章讲了开始界面的几个主要元素,背景,白云,倒影,岛及其倒影,沙滩等。里面稍微难一点的就是序列帧动画,延时动作序列,比如船的动画效果。船的来回游荡的动画稍微有一点复杂,里面由很多动作组成一个序列,比如翻转,移动,移动的逆动作,序列包装,无限重复动作包装等。不过代码很清晰,看不懂的可以下面留言。
这一篇讲几个比较高难度的动作,学完之后一定充满了快感。哈哈~~
首先是海浪的动画,然后是海鸥的动画,然后是一个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图片,懒得弄了。后面我会发放源码的,有兴趣的同学可以下载下来自己研究。
相关文章推荐
- Cocos2d-x中背景音乐和音效使用实例
- Cocos2d-x学习笔记之CCScene、CCLayer、CCSprite的默认坐标和默认锚点实验
- Cocos2d-x UI开发之CCControlPotentiometer控件类使用实例
- Cocos2d-x UI开发之文本类使用实例
- Cocos2d-x保存用户游戏数据之XML文件是否存在问题判断方法
- Cocos2d-x UI开发之菜单类使用实例
- Cocos2d-x UI开发之CCControlButton控件类实例
- Cocos2d-x学习笔记之世界坐标系、本地坐标系、opengl坐标系、屏幕坐标系
- Cocos2d-x UI开发之CCControlColourPicker控件类使用实例
- Cocos2d-x学习笔记之CCLayerColor层的使用实例
- Cocos2d-x Schedule定时器的使用实例
- Cocos2d-x中使用CCScrollView来实现关卡选择实例
- Cocos2d-x中CCEditBox文本输入框的使用实例
- cocos2d-x学习笔记之CCLayer、CCLayerColor、CCLayerGradient、CCLayerMultiplex场景层介绍
- Cocos2d-x UI开发之CCControlSlider控件类使用实例
- Cocos2d-x学习笔记之开发环境搭建
- javascript制作游戏开发碰撞检测的封装代码
- Cocos2d-x学习笔记之Hello World!
- 用vbs实现的连连看在线游戏
- Cocos2d-x的内存管理总结