Textures

Only one texture can be used per animation, but an object can use more than one animation. If possible, it's recommended that you line up all of your frames in a neat fashion in your textures, as shown below. Frames doesn't need to be the same size.

Sample texture (w/ annotations)


Sample XML


<Animation name="Ema">
  <!-- Use coordinates -->
  <Frame rect="0,0,101,171"	time="0.41"/>
  <Frame rect="101,0,101,171"	time="0.1"/>
  <Frame rect="202,0,101,171"	time="0.1"/>
  <Frame rect="101,0,101,171"	time="0.1"/>
  <Frame rect="0,0,101,171"	time="1.5"/>
  <Frame rect="101,0,101,171"	time="0.1"/>
  <Frame rect="202,0,101,171"	time="0.1"/>
  <Frame rect="101,0,101,171"	time="0.1"/>
  <Frame rect="0,0,101,171"	time="2.0"/>		
</Animation>
<Animation name="Ema talking">
  <!-- Use region -->
  <Region rect="0,0,505,342" frame-size="101,171">
    <Frame index="0" time="0.16"/>
    <Frame index="3" time="0.16"/>
    <Frame index="9" time="0.08"/>
    <Frame index="7" time="0.08"/>
    <Frame index="8" time="0.01"/>
    <Frame index="5" time="0.1"/>
    <Frame index="1" time="0.05"/>
    <Frame index="0" time="0.11"/>
    <Frame index="3" time="0.16"/>
    <Frame index="9" time="0.16"/>
    <Frame index="3" time="0.16"/>
    <Frame index="0" time="0.16"/>
    <Frame index="3" time="0.16"/>
    <Frame index="9" time="0.16"/>
    <Frame index="3" time="0.16"/>
    <Frame index="0" time="0.16"/>
    <Frame index="3" time="0.05"/>
    <Frame index="4" time="0.1"/>
    <Frame index="5" time="0.01"/>
    <Frame index="6" time="0.08"/>
    <Frame index="7" time="0.08"/>
    <Frame index="8" time="0.01"/>
    <Frame index="3" time="0.15"/>
    <Frame index="0" time="0.16"/>
    <Frame index="3" time="0.16"/>
    <Frame index="9" time="0.16"/>
    <Frame index="3" time="0.16"/>
    <Frame index="0" time="0.16"/>
    <Frame index="3" time="0.16"/>
    <Frame index="9" time="0.16"/>
    <Frame index="3" time="0.16"/>
    <Frame index="0" time="0.16"/>
    <Frame index="3" time="0.16"/>
    <Frame index="9" time="0.16"/>
    <Frame index="3" time="0.16"/>
  </Region>
</Animation>


Using animations

Once an animation has been defined and named it can be used by an <Image> object.

<!-- Load texture -->
<Texture name="Ema texture" source="ema_frames.png" />

<!-- Use animation resource -->
<Image name="Ema 01" animation="Ema" texture="Ema texture" />
<Image name="Ema 02" animation="Ema talking" texture="Ema texture" />


Ema 01

Ema 02


Inline animations

Animations can also be added to an image directly, without using a predefined resource. In an inlined animation the time attribute gets inherited by <Image> from <Animation>.

<Image name="Ema 03" texture="Ema texture" time="0.9">
  <!-- Inline animation -->
  <Frame rect="0,0,101,171"	time="0.41"/>
  <Frame rect="101,0,101,171"	/>
  <Frame rect="202,0,101,171"	/>
  <Frame rect="101,0,101,171"	/>
  <Frame rect="0,0,101,171"	time="1.5"/>
  <Frame rect="101,0,101,171"	/>
  <Frame rect="202,0,101,171"	/>
  <Frame rect="101,0,101,171"	/>
  <Frame rect="0,0,101,171"	time="2.0"/>		
</Image>