首先,谈不上教程,我也只是把我喜欢的写给大家而已,我对Flex技术并没有什么深入的理解,只是喜欢。
我对Flash并没有比大家更多的认识(我的朋友都知道,我不过只是做些ASP.NET动态网站和进行些浏览器编程,如ExtJs,jQuery),一个偶然的想法,我打开了FlexBuilder,辗转多个网页,感谢chrome,让我找到了PushButton,以下教程的大部分内容都来自于Matthew Casperson的博客,如果你也像我一样,对PushButton或者游戏开发忽然很感兴趣,请跟着Matthew Casperson一起开始游戏之旅。
如果你需要了解PushButton,你只需要在Google上搜索flex pushbutton就能获得一个关于 PushButton的概括性介绍,比较关键的介绍是,这是一个模块化的以组件为核心的游戏引擎(在以后的开发中,您将有深刻的体会),对于网络中的些许介绍,我想声明一点的是,当前的版本为r470,我并没有发现一些博客中所提到的ProjectManager.air(这困扰了我很久),不过很快你将发现这并不影响什么。
http://pushbuttonengine.com/[/url],官方论坛,在这里你能找到你想要的大部分,包括下载链接以及[url]http://pushbuttonengine.com/forum/index.php,PushButton的官方论坛,社区里人们很友善,这里包括技术交流也有组件买卖。
-----------------------------------------------------------------------------------------------------------------------------
经过长途跋涉,终于回到学校,带来了一身疲惫,也带来了紧跟着的一场大雪-_-#。
言归正传,这次继续来说这个Animation的概念,这对于我这个对游戏从未接触的人是一次全新的接触,因为曾经玩过的游戏,那些自己会动起来的人物,从来没想过是如何做的,比如我们的这个游戏人物,当我键盘空闲时候,希望他做着身子上下颤抖的动作。经过一番学习,才接触到,这是一个PNG里六个连续静态图像(
)循环连播形成的,,在PushButton中有专门处理这种png图片的东西,称之为divider。
![](https://i-blog.csdnimg.cn/blog_migrate/4e62234dc72325a11189ea16d5e9d5b9.png)
下面我就在原本的基础上加上我们的动画(Animation)。
1
var Animation:AnimationController
=
new
AnimationController();
2 Animation.spriteSheetReference = new PropertyReference( " @Render.spriteSheet " );
3 Animation.currentFrameReference = new PropertyReference( " @Render.spriteIndex " );
4 Animation.defaultAnimation = " IdleRight " ;
5
6 var IdleRightSpriteSheet:SpriteSheetComponent = new SpriteSheetComponent();
7 IdleRightSpriteSheet.imageFilename = " ../media/idleright.png " ;
8
9
10 var divider:CellCountDivider = new CellCountDivider();
11 divider.xCount = 6 ;
12 IdleRightSpriteSheet.divider = divider;
13
14 var IdleRightAnimation:AnimationControllerInfo = new AnimationControllerInfo();
15 IdleRightAnimation.frameRate = 12 ;
16 IdleRightAnimation.loop = true ;
17 IdleRightAnimation.spriteSheet = IdleRightSpriteSheet;
18 Animation.animations[ " IdleRight " ] = IdleRightAnimation;
19
20 entity.addComponent(Animation, " Animation " );
2 Animation.spriteSheetReference = new PropertyReference( " @Render.spriteSheet " );
3 Animation.currentFrameReference = new PropertyReference( " @Render.spriteIndex " );
4 Animation.defaultAnimation = " IdleRight " ;
5
6 var IdleRightSpriteSheet:SpriteSheetComponent = new SpriteSheetComponent();
7 IdleRightSpriteSheet.imageFilename = " ../media/idleright.png " ;
8
9
10 var divider:CellCountDivider = new CellCountDivider();
11 divider.xCount = 6 ;
12 IdleRightSpriteSheet.divider = divider;
13
14 var IdleRightAnimation:AnimationControllerInfo = new AnimationControllerInfo();
15 IdleRightAnimation.frameRate = 12 ;
16 IdleRightAnimation.loop = true ;
17 IdleRightAnimation.spriteSheet = IdleRightSpriteSheet;
18 Animation.animations[ " IdleRight " ] = IdleRightAnimation;
19
20 entity.addComponent(Animation, " Animation " );
就这样我们给实体加入了Animation这一组件,AnimationController这一组件需要和Render的两个属性相连接即
1
Animation.spriteSheetReference
=
new
PropertyReference(
"
@Render.spriteSheet
"
);
2 Animation.currentFrameReference = new PropertyReference( " @Render.spriteIndex " );
2 Animation.currentFrameReference = new PropertyReference( " @Render.spriteIndex " );
之后需要说明的是AnimationController.Animations是一个数组,你可以用Animation["key"]=AnimationControllerInfoSample的形式定义多个AnimationControllerInfo。
如本例中
1 Animation.animations["IdleRight"] = IdleRightAnimation;
而AnimationControllerInfo这个东西,就记录了一个动画的全部,如frameRate频率,loop是否循环播放,以及SpriteSheetComponent(无论怎么翻译),它决定了你素材(如png)的来源,以及divider(xCount给出这个png一共有多少个连续图像)。
你可以定义多个AnimationControllerInfo,用来描述角色不同的动作,最后设置一个默认的动作,本例中为
1 Animation.defaultAnimation = "IdleRight";
但是你要保证你的这个动作是注册过的。
就这样我们的角色可以在空闲的时候发出颤抖动作了,这让我很兴奋,有了这些,我们可以让我们的角色有向左向右跑,甚至跳的动作,只要在相应的时间点上设置Animation就可以了,这是很奇妙也是相当有用的地方。
下次我们会继续完善这个人物的各个Animation,宿舍快熄灯了,就写到这。
DEMO浏览页面:http://www.brighthub.com/hubfolio/matthew-casperson/media/p/61014.aspx
DEMO下载页面:http://www.brighthub.com/hubfolio/matthew-casperson/media/p/61015.aspx
英文教程页面: http://www.bukisa.com/articles/226496_pushbutton-tutorial-series-animation
最后,感谢 Matthew Casperson,感谢无私的分享。