第一种方式,创建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实现了。