文档章节

CitrusEngine系列教程四:Citrus的2D动画和摄像头

clschen
 clschen
发布于 2013/05/11 23:43
字数 2025
阅读 962
收藏 1

作者:cls分享站

 

  1. CitrusEngine系列教程一:认识CitrusEngine

  2. CitrusEngine系列教程二:结合starling和Box2D开发游戏

  3. CitrusEngine系列教程三:使用flash cs 设计关卡

  4. CitrusEngine系列教程四:Citrus的2D动画和摄像头

  5. CitrusEngine系列教程五:使用PhysicsEditor创建box2d刚体

  6. CitrusEngine系列教程六:使用Tiled Map Editor创建地图

 

............................................................................


这次我们讨论一下CitrusEngine的2D动画和摄像头。关于动画,基本上支持Starling的 都可以在CitrusEngine使用,不过CitrusEngine简化了操作步骤而已.这里我将介绍三种方式来创建Citrus的2D动画

在开始之前,我们同样先用 Components.fla来为我们的关卡设置布局,其实也是在设置box2d的刚体位置与范围(这次我命名为Level2.fla),不过这次为了让摄像头有用武之地,我们将场景设大点(1500 * 768):
灰色是平台(Platform),黄色是钱币(coin),蓝色是英雄(hero),红色是敌人(Enemy) 


 

这里我们先给Enemy设置默认的活动范围(敌人默认会在leftBound, rightBound设置的范围内来回走动直到遇到障碍物返回,如Platform)


 

现在我们来开始会角色创建动画:
1.使用swf动画这个是最简单的动画创建方案,做法就是将swf作为游戏元素的view。如我们可以这样给coin设置动画
1)创建coin.fla,创建一个影片剪辑元件coin_anim,做一个简单的帧动画




2)将元件拉入舞台,并将其大小设置为50*50,这个是为了与Level2.fla设置的coin大小一致。至于其他的,如坐标和coin.fla的舞台大小和背景色等无关紧要,可以随意设置
3)最后在Level2.fla中coin的view上填写coin.swf的路径,谨记路径是相对于flex项目。呵,是不是与上一篇教程设置英雄的view的时候一模一样~




2.使用Sprite Sheet的位图序列来构建动画在Starling中一般使用Sprite Sheet的位图序列来构建动画,其实在我的系列教程二中正是使用这个方法给英雄添加动画的,不过那个时候我没有讲如果通过flash cs创建位图和xml。现在我们来看看怎么通过 flash cs 来给我们的英雄(hero)创建Sprite Sheet的位图。
a.首先,我们需要知道hero有以下几种动画:走路(walk),死亡(die),跳跃(jump),受伤(hurt),闲置(idle),闪避(duck)等,而我们需要做的是 为这些动画创建相应的影片剪辑将其作为库元件,当然我们可以根据需要之创建必要的动画,如本教程只创建了walk,idle,jump。以下库元件jump(跳跃)的截图:




注意:需要新建一层在第一帧标记一个“jump”的标签。
b.创建相关动画后,我们可以在库文件选中并右键导出Sprite Sheet


 

以下是我导出时候的参数设置:


 

这样子我们就得到了一张Sprite Sheet的位图序列和xml文件,接下来我们可以通过Embed嵌入使用:


  1. <SubTexture name="idle0000" x="0" y="0" width="65" height="64" frameX="0" frameY="0" frameWidth="68" frameHeight="65"/>

  2. < SubTexture name="idle0001" x="65" y="0" width="65" height="64" frameX="0" frameY="0" frameWidth="68" frameHeight="65"/>

  3. < SubTexture name="idle0002" x="130" y="0" width="66" height="64" frameX="0" frameY="0" frameWidth="68" frameHeight="65"/>

复制代码


那么接下来使用方法和系列教程二一样
  1. [Embed(source="../../levels/hero.png")]

  2. private var heroAnimBitmap:Class;

  3. [Embed(source="/../levels/hero.xml",mimeType="application/octet-stream")]

  4. private var heroAnimXML:Class;


  5. var ta:TextureAtlas=new TextureAtlas(

  6. Texture.fromBitmap(new heroAnimBitmap()),XML(new heroAnimXML()));

  7. var animationSeq:AnimationSequence=new AnimationSequence(ta,

  8. ["walk","idle","jump"],"idle",24);

  9. hero.view=animationSeq;

复制代码

3.通过龙骨(Dragon Bones )创建骨骼动画(=》官方中文教程DragonBones是一套开源的 2D骨骼动画框架和工具,它包含了基于Flash Pro的骨骼动画编辑面板DragonBonesDesignPanel及骨骼动画ActionScript框架。它可以让开发者运用熟悉的Flash Pro元件及时间轴编辑方式,快速创建2D骨骼动画,并运用到Flash或其他技术的应用中。Features
  • 动画基于Flash pro时间轴,可以使用Flash传统动画方式制作游戏动画;

  • 骨骼绑定可以让动画更精准,更真实自然,并可通过程序动态控制;

  • 可设置单个骨骼的动画时间缩放和延时播放,使用较少的关键帧就可以表现复杂生动的动画效果;

  • 动画各部分采用拼接方式,动画有缓动补间,占用位图/内存资源少;

  • 骨骼显示对象与骨骼的逻辑分离,可在不影响动画播放的情况下动态更换;

  • 能方便用于传统DisplayList、Starling及其他技术的2D应用。

首先我们需要下载龙骨并安装Flash Pro扩展插件。需要注意的是这个插件只支持Flash Pro 5.5或以上版本。安装方法:打开flash cs-》帮助=》管理扩展=》安装=》选择下载包中的“DragonBonesDesignPanel.zxp”进行安装安装完成之后,我们可以通过 窗口>其他面板>DragonBonesDesignPanel打开骨骼动画编辑面板。现在我们需要将我们刚刚的三个元件动画合并成一个(我将其命名为“allAnimations”),当然我们还是要用标签来区分它们。(这个时候不需要补间动画,你可以选择删除补间或者保留,事情上使用龙骨时我们只需要设置关键帧并排好对应位置就行了)


然后我们在库中选中这个元件(allAnimations),打开骨骼编辑面板》导入》导入选中库元件:

这个时候你可以通过Bone Tree(骨骼树)等设置骨骼的从属关系等内容使动画更流畅,也可以直接将其导出,导出的时候我们选择“png(包含xml)”。最后我们得到一张包含xml信息的png图片


最后在flex中使用龙骨动画:

  1. [Embed(source="../../levels/hero_output.png",mimeType="application/octet-stream")]

  2. private var heroAnimBitmapAndXML:Class;


  3. /*Armature: 我们可以把它想像为一个容器,它对应在Flash Pro中编辑并通过骨骼面板导出的一个MoiveClip。

  4. 通过Armature来对各骨骼进行管理,播放动画等。*/

  5. var armature:Armature;

  6. /*基于Starling的Factory,这是构建骨骼动画的基础。它负责从前面骨骼面板导出的资源中解析数据格式

  7. 和准备图像资源,并且通过它创建骨骼容器Armature。*/

  8. var factory:StarlingFactory=new StarlingFactory();

  9. factory.addEventListener(Event.COMPLETE,function(event:Event):void{

  10. armature=factory.buildArmature("allAnimations");

  11. armature.animation.timeScale=0.7;

  12. hero.view=armature;

  13. hero.offsetX = 35;

  14. hero.offsetY = 35;

  15. });

  16. factory.parseData(new heroAnimBitmapAndXML());

复制代码

最后我们来看一下如何设置摄像头:CitrusEngine中,我们可以通过view.camera对摄像头进行访问,通过其setUp(target:Object=null,offset:MathVector=null, bounds:Rectangle=null,
easing:MathVector=null, cameraLens:MathVector=null):ACitrusCamera快速的设置摄像头的相关属性。以下是对该方法参数的介绍:
  • target:摄像头的目标,如将其设置为hero,摄像头将随着hero的运动而运动

  • offset:设置目标运动时候,目标左上角的区域,如将其设为MathVector(0,0)且如果你的场景足够大,你会发现你的目标运动的时候左边没有空余的距离,即你向右跑的话,你看不到你身后的物体,除非你右边显示区域已经没有已经到头~

  • bounds:相机显示区域,这个教程我们设置为Level2.swf的大小

  • easing:在x和y上摄像头跟随目标变化的速率,数值越小变化越慢,最大不能超过1,当设置为0,摄像头不会移动

用法示例:
  1. var offset:MathVector = new MathVector(stage.stageWidth/2,stage.stageHeight/2);

  2. var bounds:Rectangle = new Rectangle(0, 0, 1500, 768);

  3. var easing:MathVector = new MathVector(0.25, 0.25);

  4. view.camera.setUp(hero, offset, bounds, easing);

复制代码

=》原文及源码下载

© 著作权归作者所有

clschen
粉丝 4
博文 21
码字总数 10662
作品 1
广州
程序员
私信 提问
CitrusEngine系列教程五:使用PhysicsEditor创建box2d刚体

作者:cls分享站 目前已有教程: CitrusEngine系列教程一:认识CitrusEngine CitrusEngine系列教程二:结合starling和Box2D开发游戏 CitrusEngine系列教程三:使用flash cs 设计关卡 Citrus...

clschen
2013/05/15
0
0
CitrusEngine系列教程一:认识CitrusEngine

教程作者:cls分享站 CitrusEngine系列教程一:认识CitrusEngine CitrusEngine系列教程二:结合starling和Box2D开发游戏 CitrusEngine系列教程三:使用flash cs 设计关卡 CitrusEngine系列教...

clschen
2013/05/03
0
0
CitrusEngine系列教程三:使用flash cs 设计关卡

教程出自 cls分享站 CitrusEngine系列教程一:认识CitrusEngine CitrusEngine系列教程二:结合starling和Box2D开发游戏 CitrusEngine系列教程三:使用flash cs 设计关卡 CitrusEngine系列教程...

clschen
2013/05/07
0
0
CitrusEngine系列教程二:结合starling和Box2D开发游戏

教程出自 cls分享站 CitrusEngine系列教程一:认识CitrusEngine CitrusEngine系列教程二:结合starling和Box2D开发游戏 CitrusEngine系列教程三:使用flash cs 设计关卡 CitrusEngine系列教程...

clschen
2013/05/05
0
0
CitrusEngine系列教程七:修改hero的默认动画(修改按键和增减动作)

作者:cls分享站 最近比较忙活,工作和家里都有些烦心的事情要处理,教程已经许久没更新了,感觉有点过不去啊。恰好今天有人问我如何修改hero默认按键和添加动画的问题,于是决定写一篇教程介...

clschen
2013/06/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

进程命令ps

命令ps 用途: 显示当前系统的进程状态 语法: ]# ps [选项] 常用选项: aux = 列出正在运行的所有进程; a 显示现行终端机下的所有程序,包括其他用户的程序 u 以用户为主...

迷失De挣扎
39分钟前
3
0
聊聊spring cloud的CachingSpringLoadBalancerFactory

序 本文主要研究一下spring cloud的CachingSpringLoadBalancerFactory CachingSpringLoadBalancerFactory spring-cloud-openfeign-core-2.2.0.M1-sources.jar!/org/springframework/cloud/o......

go4it
昨天
4
0
一篇文章搞定——JDK8中新增的StampedLock

一、StampedLock类简介 StampedLock类,在JDK1.8时引入,是对读写锁ReentrantReadWriteLock的增强,该类提供了一些功能,优化了读锁、写锁的访问,同时使读写锁之间可以互相转换,更细粒度控...

须臾之余
昨天
4
0
Android Camera原理之CameraDeviceCallbacks回调模块

在讲解《Android Camera原理之openCamera模块(二)》一文的时候提到了CameraDeviceCallbacks回调,当时没有详细展开,本文我们详细展开讲解一下。 CameraDeviceCallbacks生成过程: 《Android...

天王盖地虎626
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部