Quick-cocos2d-x3.3 Study (十)--------- 添加动画

注意:在添加动画的时候必须先将图片添加到缓存中去

1 -- 将资源添加到精灵帧缓存
2 display.addSpriteFrames("image/animations/binggu.plist", "image/animations/binggu.png")

添加动画

这里我们通过帧动画实现游戏角色的运动,帧动画的原理是将连续的帧图像(如下图)在渲染的时候通过逐帧或插值的方式播放出来而形成的动态效果。就像翻动小人书一样。

引擎中,帧动画的具体内容是依靠精灵显示出来的,为了显示动态图片,我们需要不停切换精灵显示的内容,通过把静态的精灵变为动画播放器从而实现动画效果。帧动画由帧组成,每一帧都是一个纹理,我们可以使用一个纹理序列来创建动画。

Quick 框架中,我们可以这样来播放一个动画:

1 -- 创建一个包含flying1.png到flying4.png的4个图像帧对象的数组
2 local frames = display.newFrames( "flying.png", 1, 4 )
3
4 -- 以包含图像帧的数组创建一个动画 Animation 对象
5 local animation = display.newAnimation( frames, 0.3 / 4 )
6
7 -- 在显示对象上循环播放动画,并返回 Action 动画动作对象
8 tranisition.playAnimationForever( self, animation )

因为我们的游戏对象有不只一种的动画,所以在本教程中,我们可以先把这些动画都添加到动画缓存,这样在需要播放相应的动画的时候,我们就可以从缓存中直接获取动画来播放了,而不用再浪费时间重新创建动画

所以,请在 Player.lua 文件中添加如下的一段函数:

 1 function Player:addAnimationCache()
 2       local animations = { "flying", "drop", "die" }
 3       local animationFrameNum = { 4, 3, 4 }
 4
 5       for i = 0, #animations do
 6            -- 1
 7            local frames = display.newFrames( animations[i] .. "%d.png", 1, animationFrameNum[i] )
 8            -- 2
 9            local animation = display.newAnimation( frames, 0.3 / 4 )
10            -- 3
11            display.setAnimationCache( animations[i], animation)
12
13      end
14
15 end

animations,animationFrameNum分别表示角色的三种动画和三种动画分别有的帧总数。

遍历animations时,下面一一解释下函数的作用:

  1. 创建一个包含animations[i]1.png到animations[i]animationFrameNum[i].png的图像帧对象的数组,如i = 1,就是创建一个包含flying1.png到flying4.png的图像帧对象的数组。其中..是字符串连接操作符,它可以用来连接两个字符串。当其中一个为其它类型时,它会把该类型也转为字符串。
  2. 以包含图像帧的数组创建一个动画 Animation 对象,参数 0.3 / 4 表示 0.3 秒播放完 4 桢。
  3. 将2中创建好的 animation 对象以指定的名称(animations[i])加入到动画缓存中,以便后续反复使用。也就是我们在 AnimationCache 中可以通过animations = {“flying”, “drop”, “die”}这三种动画的名称来查找制定的 animation 对象。

把动画载入缓存后,我们就可以写下对应的函数去执行动画了。如下:

 1 function Player:flying()
 2     transition.stopTarget( self )
 3     transition.playAnimationForever( self, display.getAnimationCache( "flying" ) )
 4
 5 end
 6
 7 function Player:drop()
 8     transition.stopTarget( self )
 9     transition.playAnimationForever( self, display.getAnimationCache( "drop" ) )
10 end
11
12 function Player:die()
13     transition.stopTarget( self )
14     transition.playAnimationForever( self, display.getAnimationCache( "die" ) )
15 end

最后在创建 Player 对象后,我们就可以调用以上相应的方法来播放指定的动画了

实例:

 1 function GameScene:ctor()
 2     -- 将资源添加到精灵帧缓存
 3     display.addSpriteFrames("image/animations/binggu.plist", "image/animations/binggu.png")
 4
 5     self.player = display.newSprite( "#binggu_01.png" )
 6         :align( display.CENTER, display.cx / 4, display.cy )
 7         :addTo(self)
 8
 9     -- 创建一个包含flying1.png到flying4.png的4个图像帧对象的数组
10     local frames = display.newFrames( "binggu_0%d.png", 1, 7 )
11
12     -- 以包含图像帧的数组创建一个动画 Animation 对象
13     local animation = display.newAnimation( frames, 0.3 / 4 )
14
15     -- 在显示对象上循环播放动画,并返回 Action 动画动作对象
16     transition.playAnimationForever( self.player, animation )
17
18 end

时间: 2024-10-01 08:04:02

Quick-cocos2d-x3.3 Study (十)--------- 添加动画的相关文章

cocos2dx实例开发之2048(添加动画版)

网上找了好多教程写2048,不过都没有实现卡片的移动动画,自己写了一个不太完美的带动画版. 开发步骤: 1,设计一个CardSprite类. 2,设计主游戏场景GameScene,实现游戏逻辑,添加动画逻辑. 3,添加游戏胜利或者游戏失败的层. 4,添加声音等其他元素,专门弄了一个声音预加载的场景. 贴上主场景关键代码: GameScene.h #pragma once #include "cocos2d.h" #include "cardSprite.h" #in

quick cocos2d x场景切换的生命周期函数调用学习

先上一个场景的基本模版: 1 local ModelScene = class("ModelScene", function() 2 return display.newScene("ModelScene") 3 end) 4 5 function ModelScene:ctor() 6 self.sceneName = "ModelScene" 7 -- 注册点击事件监听 8 self.layer = display.newLayer() 9

侧边栏添加动画挂件和文字

添加动画挂件: http://abowman.com/ 点击进入网址,Start <选择动画>编辑设置>复制嵌入代码>贴到博客侧边栏公告>保存> End 返回博客页面,可以去我博客首页查看效果:http://www.cnblogs.com/lj-cn/ 添加文字: 博客侧边公告栏输入如下代码,文字可修改: <p class="p"> Play or Learn<br/><br/> It's up to you &l

布局添加动画效果

1. 布局添加动画效果 ① 视图 五个按钮 <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent&q

WPF codebehind 添加动画,移除动画

在做WPF开发的时候,有的时候需要在后台cs来控制动画的添加与移除,在前台XAML和后台添加动画与移除动画的代码如下: 前台XAML: <i:Interaction.Behaviors> <ei:TranslateZoomRotateBehavior x:Name="eiPic" ConstrainToParentBounds="True" TranslateFriction="0.1" RotationalFriction=&

破船哥的给tableview cell添加动画

首先假设你已经能够熟练使用UITableView了.那么我们只需要实现UITableViewDelegate中的tableView:WillDisplayCell:ForRowAtIndexPath:即可.当cell显示之前,会先调用该方法,因此给cell添加动画,在这个方法里面即可.(瞬间爆炸) -(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:

quick cocos2d x 手机(Android端)启动过程学习

简要学习下quick cocos2d x 在安卓端启动的过程. 首先需要了解一点:quick cocos2d x是依托于Android的activity和GLSurfaceView(继承自SurfaceView)的环境来显示quick层的游戏界面. (1)首先quick类的android游戏从AndroidManifest.xml文件指定的activity(假设AC)启动. (2)AC继承父类的Cocos2dxActivity. (3)调用静态初始化块,加载cocos2dx的动态库.也就是一些C

企业级项目,给布局的弹出与吟唱添加动画

企业级项目,布局很枯燥,无奈之余,给布局添加动画, 使用了LayoutTransition 原本只是使用了setVisibility(View.VISIBLE), 但是显示与消失太突然.于是加入了动画, 看代码 http://download.csdn.net/detail/kan1kan5/7965869 //声明动画 resetTransition(); //初始化动画 initAnim(); private void resetTransition() { mTransitioner =

quick cocos2d-x Xcode下省去clean,让修改的脚本生效

<quick cocos2d-x Xcode下省去clean,让修改的脚本生效> 项目  target     build phases    点击build phase的空白区域 选择Editor     Add Build Phase      Add Run Script Build Phase 编写脚本: 顺序调整:(第二顺位) 这样就可以避免每次修改了lua脚本,都要手动clean,然后再run,太费时间.. quick cocos2d-x Xcode下省去clean,让修改的脚本生