Citrus Engine实现动画的方式

第一种方式，创建AnimationSequence，内置的动作有idle(停止),walk,jump,duck(蹲下),die等

var sTextureAtlas:TextureAtlas = new TextureAtlas(Texture.fromBitmap(new heroPng()), XML(new heroConfig()));

			var hero:Hero = new Hero("hero", { x:100, y:300, width:60, height:135, hurtVelocityX:5, hurtVelocityY:8, hurtDuration:500 } );
			hero.maxVelocity = 1.5;
			add(hero);
			hero.view = new AnimationSequence(sTextureAtlas, ["walk", "duck", "idle", "jump", "hurt"], "idle");

用这种方式创建动画需要将动画序列图用texturepacker打包，一个角色对应一个xml文件和一个png文件，因为Citrus内置就识别name为idle,walk。。。的subTexture，所以要把多个角色的动画序列都放到一个png里面是无法让citrus获取到是哪个角色的idle,walk。。。等动作的。

单个序列图加入到texturepacker之前需要先命名为walk-01.png, walk-02.png。。。之类的名字，只要名字以idle,walk,jump。。。开头就好。

<TextureAtlas imagePath="Hero.png">
    <SubTexture name="die.swf/0000" x="128" y="246" width="64" height="119" frameX="-1" frameY="-25" frameWidth="100" frameHeight="145"/>
    <SubTexture name="die.swf/0001" x="256" y="240" width="70" height="109" frameX="-5" frameY="-35" frameWidth="100" frameHeight="145"/>
    <!--省略N行--><SubTexture name="walk.swf/0009" x="60" y="2" width="54" height="133" frameX="-24" frameY="-12" frameWidth="100" frameHeight="145"/>
    <SubTexture name="walk.swf/0010" x="194" y="244" width="60" height="117" frameX="-17" frameY="-28" frameWidth="100" frameHeight="145"/>
    <SubTexture name="walk.swf/0011" x="194" y="244" width="60" height="117" frameX="-17" frameY="-28" frameWidth="100" frameHeight="145"/>
</TextureAtlas>

Citrus好像是默认图片序列方向朝右的，如果是朝左的序列图，出来的效果就是角色倒退了。

第二种方式，继承starling.display.Sprite类，创建独立的精灵，然后将序列图生成walk，jump等的movie clip。 这样一来，序列的名字就随便自己取了，还可以把N多角色的序列放到一个png和xml文件里面。对于资源加载是有好处的喽。

首先序列xml文件就不一样

<TextureAtlas imagePath="monster.png">
    <SubTexture name="evileye_die" x="150" y="1" width="79" height="25"/>
    <SubTexture name="evileye_hurt" x="310" y="35" width="56" height="38"/>
    <SubTexture name="evileye_walk_01" x="97" y="35" width="56" height="36"/>
    <SubTexture name="evileye_walk_02" x="254" y="35" width="54" height="37"/>
    <SubTexture name="evileye_walk_03" x="1" y="35" width="51" height="34"/>
    <SubTexture name="evileye_walk_04" x="198" y="35" width="54" height="37"/>
    <SubTexture name="f_bigdog_die" x="1" y="81" width="79" height="45"/>
    <SubTexture name="f_bigdog_hurt" x="368" y="81" width="72" height="51"/>
    <SubTexture name="f_bigdog_walk_01" x="152" y="81" width="74" height="48"/>
    <SubTexture name="f_bigdog_walk_02" x="298" y="81" width="68" height="51"/>
    <SubTexture name="f_bigdog_walk_03" x="82" y="81" width="68" height="48"/>
    <SubTexture name="f_bigdog_walk_04" x="228" y="81" width="68" height="51"/>
    <SubTexture name="pig_die" x="404" y="1" width="44" height="32"/>
    <SubTexture name="pig_hurt" x="155" y="35" width="41" height="36"/>
    <SubTexture name="pig_walk_01" x="325" y="1" width="45" height="29"/>
    <SubTexture name="pig_walk_02" x="277" y="1" width="46" height="29"/>
    <SubTexture name="pig_walk_03" x="231" y="1" width="44" height="27"/>
    <SubTexture name="slaim_die" x="372" y="1" width="30" height="29"/>
    <SubTexture name="slaim_hurt" x="412" y="35" width="42" height="44"/>
    <SubTexture name="slaim_walk_01" x="450" y="1" width="43" height="32"/>
    <SubTexture name="slaim_walk_02" x="54" y="35" width="41" height="35"/>
    <SubTexture name="slaim_walk_03" x="368" y="35" width="42" height="44"/>
    <SubTexture name="snail_die" x="1" y="1" width="37" height="19"/>
    <SubTexture name="snail_hurt" x="121" y="1" width="27" height="25"/>
    <SubTexture name="snail_walk_01" x="40" y="1" width="23" height="22"/>
    <SubTexture name="snail_walk_02" x="65" y="1" width="25" height="22"/>
    <SubTexture name="snail_walk_03" x="92" y="1" width="27" height="22"/>
    <SubTexture name="yeaty_attack_01" x="442" y="81" width="63" height="52"/>
    <SubTexture name="yeaty_attack_02" x="411" y="135" width="58" height="103"/>
    <SubTexture name="yeaty_attack_03" x="1" y="135" width="97" height="54"/>
    <SubTexture name="yeaty_hurt" x="349" y="135" width="60" height="65"/>
    <SubTexture name="yeaty_walk_01" x="166" y="135" width="65" height="58"/>
    <SubTexture name="yeaty_walk_02" x="233" y="135" width="56" height="60"/>
    <SubTexture name="yeaty_walk_03" x="100" y="135" width="64" height="58"/>
    <SubTexture name="yeaty_walk_04" x="291" y="135" width="56" height="60"/>
</TextureAtlas>

这里面定义了多重怪物的序列，而不是像上面只能定义walk_xxx, idle_xxx之类的。序列Png中自然也是能放很多种怪物了。

public class PigSprite extends Sprite 
	{
		
		private static var monsterAtlas:TextureAtlas = Assets.getTextureAtlas("Monster");
		private var frames:Vector.<Texture>;
		
		private static const WALK_M:int = 0;
		private static const HURT_M:int = 1;
		private static const DIE_M:int = 2;
		
		public var frame_rate:int = 4;
		public var m_die:Boolean = false;
		public var m_hurt:Boolean = false;
		public var m_vector:Vector.<MovieClip>;
		
		public function PigSprite() 
		{
			frames = monsterAtlas.getTextures("pig_walk_");
			//walk
			var walk_m:MovieClip = new MovieClip(frames, frame_rate);
			walk_m.loop = true;
			walk_m.pivotX = walk_m.width;
			//walk_m.pivotY = walk_m.height >> 1;
			walk_m.scaleX = -1;
			
			//hurt
			frames = monsterAtlas.getTextures("pig_hurt");
			var hurt_m:MovieClip = new MovieClip(frames, frame_rate);
			hurt_m.pivotX = hurt_m.width;
			hurt_m.scaleX = -1;
			
			//die
			frames = monsterAtlas.getTextures("pig_die");
			var die_m:MovieClip = new MovieClip(frames, frame_rate);
			die_m.pivotX = die_m.width;
			die_m.scaleX = -1;
			
			//add to vector
			m_vector = new Vector.<MovieClip>();
			m_vector[WALK_M] = walk_m;
			m_vector[HURT_M] = hurt_m;
			m_vector[DIE_M] = die_m;
			
			Starling.juggler.add(walk_m);
			addChild(walk_m);
			
			addEventListener(Event.ENTER_FRAME, update);
		}
		
		private function update(event:Event):void
		{
			// do some thing
		}
	}

当然这样做的麻烦之处就是只能初始一种walk动画，之后出现哪些动画就要自己写逻辑来控制。 而第一种方式中，hero碰到enemy之后播放hurt动画，按空格键hero播放jump动画，踩到enemy头上后enemy播放die动画都已经被citrus engine实现了。