New here? What’s IwGame? IwGame is an open source free to use cross platform game engine for iPhone, iPad, Android, Bada, Playbook, Symbian, Windows Mobile, LG-TV, Windows and Mac, built on top of the Marmalade SDK.

This tutorial is a basic overview of the image, brush, animation and timeline systems.

Images

Art work definition in XOML is separated into images, each image represents a single image file in PNG, JPEG, BMP, GIF or TGA format

To create an image in XOML the following tag is used:

[sourcecode language=”xml”]
<Image Name="ui_image" Location="ui.png" Preload="false" Blocking="true" Format="RGBA_8888" Filter="true" Tag="Level1" Condition="variable" />
[/sourcecode]

Parameters are:

• Name – Name of the image
• Location – filename, local or web based
• Preload – If true then the image will be preloaded, if false then the image will be loaded when first used (optional)
• Blocking – If true then execution will be paused until the image is fully loaded (optional)
• Format – Format to convert the image to when loaded, supported formats include RGBA_8888, RGB_565, RGBA_4444, RGBA_5551, RGB_888, RGBA_6666, RGB_332 (optional)
• Filter – When set to true filtering will be used when rendering sprites that utilise this image (optional)
• Tag – A resource tag name, allows resources to be grouped, so they can be removed in groups (optional)
• Condition – The name of a condition variable that must evaluate to true (false if !variable is specified) for this resource to be loaded (optional)

Brushes

An Image represents a single image file whilst an image brush represents a rectangular area within an image (used with sprite atlases). A 9patch image brush represents a special type of image that preserves the edges of an image whilst scaling its inner features.

To create an brush in XIOML the following tag is used:

[sourcecode language=”xml”]
<Brush Name="Button1Brush" Image="ui_image" SrcRect="320, 70, 200, 70" Type="9patch" ScaleArea="7, 8, 186, 54" Tag="Level1" Condition="variable" />
[/sourcecode]

Parameters are:

• Name – Name of the brush
• Image – Image to use for this brush
• SrcRect – A rectangular area in the image that will be used to limit the part of the image drawn (x, y, w, h)
• Type – The type of brush (image or 9patch currently supported)
• ScaleAea – The scalable area of a 9patch brush (optional)
• Tag – A resource tag name, allows resources to be grouped, so they can be removed in groups (optional)
• Condition – The name of a condition variable that must evaluate to true (false if !variable is specified) for this resource to be created (optional)

Animation

XOML supports a versatile and complex animation system that allows animation of all types of data. However for the purpose of image animation we can narrow it down to just rect animations. Here is an example of creation of rect animation:

[sourcecode language=”xml”]
<Animation Name="PlayerImageAnim" Type="rect" Duration="0.8" Tag="Level1" >
<Frame Value="0, 0, 36, 40" Time="0.0" />
<Frame Value="0, 40, 36, 40" Time="0.1" />
<Frame Value="0, 80, 36, 40" Time="0.2" />
<Frame Value="0, 120, 36, 40" Time="0.3" />
<Frame Value="0, 160, 36, 40" Time="0.4" />
<Frame Value="0, 200, 36, 40" Time="0.5" />
<Frame Value="0, 240, 36, 40" Time="0.6" />
<Frame Value="0, 280, 36, 40" Time="0.7" />
</Animation>
[/sourcecode]

Here we enclose a number of Frame tags inside an Animation tag, each frame specifies a rectangular area within the sprite atlas, whilst Animation defines the actual animation that will be available.to the user.

Animation parameters are:

• Name – Name of the animation
• Type – Type of animation data (bool, float, vec2, vec3, vec4, rect and string) – Images animation use rect
• Duration – The length of the animation in seconds
• Tag – A resource tag name, allows resources to be grouped, so they can be removed in groups (optional)

Frame parameters are:

• Value – The value for this frame, in the case of a rect this value is x, y, w, h
• Time – The time at which this frame will be used
• Easing – The easing method used (linear, quadin,quadout, cubicin, cubicout, quarticin, quarticout)

An Animation tag can also contain another tag called Atlas that is used to automatically generate a number of frames of type rect:

[sourcecode language=”xml”]
<Animation Name="PlayerImageAnim" Type="rect" Duration="0.8" Tag="Level1" >
<Atlas Count="8" Size="36, 40" Position="0, 0" Pitch="1024, 40" Width="1024" Duration="0.1"/>
</Animation>
[/sourcecode]

Atlas parameters are:

• Count – number of frames to generate
• Size – The size of each frame (w. h)
• Position – Position where to start creating frames (x. y)
• Pitch – The amount to step to move to the next line of sprites within the image (x, y)
• Width – The width of the source image
• Duration – The amount of time to assign to each frame

An Atlas tag can be mixed in with normal frames, although such an action would be rare. Atlas tag is useful for sprite atlases where all frames are of equal size and are also spaced equally across and down the image.

Timelines

The Timeline system is a system that allows the user to group together collections of animations and play them all back simultaneously on demand. A timeline can contain any number of animations that can target different properties of actors and scenes.

Below is an example of a timeline that can target an actors SrcRect, allowing sprite atlas bitmap animations to be applied to an actors sprite

[sourcecode language=”xml”]
<Timeline Name="Player1Intro" AutoPlay="true" Tag="Level1">
<Animation Anim="PlayerImageAnim" Target="SrcRect" Repeat="0" StartAtTime="0" Delta="false" Interpolate="true" OnEnd="AnimEnded" OnStart="AnimStarted" OnRepeat="AnimRepeated" />
</Timeline>
[/sourcecode]

The Timeline tag enclosed a set of animations that have previously been defined with the Animation tag.

Timeline parameters are:

• Name – Name of the timeline
• AutoPlay – If set to true then the animation will automatically play when assigned to an actor or scene< (optional)/li>
• Tag – A resource tag name, allows resources to be grouped, so they can be removed in groups (optional)

The inner Animation tags define which animations to play and which properties of the target actor or scene to modify, as well as actions that can be called when certain animation events occur.

Timeline Animation parameters are:

• Anim – The animation to play
• Target – The target property of the actor or scene to modify (in this case SrcRect modifies the actors sprite source rectangle which defined which portion of the sprite atlas to display)
• Repeat – Number of times to repeat the animation (0 for infinite)
• StartAtTime – The number of seconds to delay starting the animation playback (optional)
• Delta – When set to true animation frames will be added to the objects existing property rather than overwriting it (optional)
• Interpolate – When set to false frames will be interpolated< (optional)/li>
• OnEnd, OnStart and OnRepeat are actions that will be called when an animation ends, starts or repeats< (optional)/li>