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.
<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>
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" />
![]() |
![]() |
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>