{"id":2342,"date":"2012-06-28T12:12:39","date_gmt":"2012-06-28T12:12:39","guid":{"rendered":"http:\/\/www.drmop.com\/?p=2342"},"modified":"2012-06-28T12:12:39","modified_gmt":"2012-06-28T12:12:39","slug":"iwgame-engine-tutorial-image-brush-animation-and-timeline-overview","status":"publish","type":"post","link":"http:\/\/www.drmop.com\/index.php\/2012\/06\/28\/iwgame-engine-tutorial-image-brush-animation-and-timeline-overview\/","title":{"rendered":"IwGame Engine Tutorial &#8211; Image, Brush, Animation and Timeline Overview"},"content":{"rendered":"<p>New here? What\u2019s 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\u00a0on top of the\u00a0Marmalade SDK.<\/p>\n<p>This tutorial is a basic overview of the image, brush, animation and timeline systems.<\/p>\n<h2>Images<\/h2>\n<p>Art work definition in XOML is separated into images, each image represents a single image file in PNG, JPEG, BMP, GIF or TGA format<\/p>\n<p>To create an image in XOML the following tag is used:<\/p>\n<p>[sourcecode language=&#8221;xml&#8221;]<br \/>\n&lt;Image Name=&quot;ui_image&quot; Location=&quot;ui.png&quot; Preload=&quot;false&quot; Blocking=&quot;true&quot; Format=&quot;RGBA_8888&quot; Filter=&quot;true&quot; Tag=&quot;Level1&quot; Condition=&quot;variable&quot; \/&gt;<br \/>\n[\/sourcecode]<\/p>\n<p>Parameters are:<\/p>\n<ul>\n<li>Name \u2013 Name of the image\n<li>Location \u2013 filename, local or web based\n<li>Preload \u2013 If true then the image will be preloaded, if false then the image will be loaded when first used (optional)\n<li>Blocking \u2013 If true then execution will be paused until the image is fully loaded (optional)\n<li>Format \u2013 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)\n<li>Filter \u2013 When set to true filtering will be used when rendering sprites that utilise this image (optional)\n<li>Tag \u2013 A resource tag name, allows resources to be grouped, so they can be removed in groups (optional)\n<li>Condition \u2013 The name of a condition variable that must evaluate to true (false if !variable is specified) for this resource to be loaded (optional)\n<\/ul>\n<h2>Brushes<\/h2>\n<p>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. <\/p>\n<p>To create an brush in XIOML the following tag is used:<\/p>\n<p>[sourcecode language=&#8221;xml&#8221;]<br \/>\n&lt;Brush Name=&quot;Button1Brush&quot; Image=&quot;ui_image&quot; SrcRect=&quot;320, 70, 200, 70&quot; Type=&quot;9patch&quot; ScaleArea=&quot;7, 8, 186, 54&quot; Tag=&quot;Level1&quot; Condition=&quot;variable&quot; \/&gt;<br \/>\n[\/sourcecode]<\/p>\n<p>Parameters are:<\/p>\n<ul>\n<li>Name \u2013 Name of the brush<\/li>\n<li>Image \u2013 Image to use for this brush<\/li>\n<li>SrcRect \u2013 A rectangular area in the image that will be used to limit the part of the image drawn (x, y, w, h)<\/li>\n<li>Type \u2013 The type of brush (image or 9patch currently supported)<\/li>\n<li>ScaleAea \u2013 The scalable area of a 9patch brush (optional)<\/li>\n<li>Tag \u2013 A resource tag name, allows resources to be grouped, so they can be removed in groups (optional)<\/li>\n<li>Condition \u2013 The name of a condition variable that must evaluate to true (false if !variable is specified) for this resource to be created (optional)<\/li>\n<\/ul>\n<h2>Animation<\/h2>\n<p>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:<\/p>\n<p>[sourcecode language=&#8221;xml&#8221;]<br \/>\n&lt;Animation Name=&quot;PlayerImageAnim&quot; Type=&quot;rect&quot; Duration=&quot;0.8&quot; Tag=&quot;Level1&quot; &gt;<br \/>\n    &lt;Frame Value=&quot;0, 0,   36, 40&quot; Time=&quot;0.0&quot; \/&gt;<br \/>\n    &lt;Frame Value=&quot;0, 40,  36, 40&quot; Time=&quot;0.1&quot; \/&gt;<br \/>\n    &lt;Frame Value=&quot;0, 80,  36, 40&quot; Time=&quot;0.2&quot; \/&gt;<br \/>\n    &lt;Frame Value=&quot;0, 120, 36, 40&quot; Time=&quot;0.3&quot; \/&gt;<br \/>\n    &lt;Frame Value=&quot;0, 160, 36, 40&quot; Time=&quot;0.4&quot; \/&gt;<br \/>\n    &lt;Frame Value=&quot;0, 200, 36, 40&quot; Time=&quot;0.5&quot; \/&gt;<br \/>\n    &lt;Frame Value=&quot;0, 240, 36, 40&quot; Time=&quot;0.6&quot; \/&gt;<br \/>\n    &lt;Frame Value=&quot;0, 280, 36, 40&quot; Time=&quot;0.7&quot; \/&gt;<br \/>\n&lt;\/Animation&gt;<br \/>\n[\/sourcecode]<\/p>\n<p>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.<\/p>\n<p>Animation parameters are:<\/p>\n<ul>\n<li>Name \u2013 Name of the animation<\/li>\n<li>Type &#8211; Type of animation data (bool, float, vec2, vec3, vec4, rect and string) \u2013 Images animation use rect<\/li>\n<li>Duration \u2013 The length of the animation in seconds<\/li>\n<li>Tag \u2013 A resource tag name, allows resources to be grouped, so they can be removed in groups (optional)<\/li>\n<\/ul>\n<p>Frame parameters are:<\/p>\n<ul>\n<li>Value \u2013 The value for this frame, in the case of a rect this value is x, y, w, h<\/li>\n<li>Time \u2013 The time at which this frame will be used<\/li>\n<li>Easing \u2013 The easing method used (linear, quadin,quadout, cubicin, cubicout, quarticin, quarticout)<\/li>\n<\/ul>\n<p>An Animation tag can also contain another tag called Atlas that is used to automatically generate a number of frames of type rect:<\/p>\n<p>[sourcecode language=&#8221;xml&#8221;]<br \/>\n&lt;Animation Name=&quot;PlayerImageAnim&quot; Type=&quot;rect&quot; Duration=&quot;0.8&quot; Tag=&quot;Level1&quot; &gt;<br \/>\n    &lt;Atlas Count=&quot;8&quot; Size=&quot;36, 40&quot; Position=&quot;0, 0&quot; Pitch=&quot;1024, 40&quot; Width=&quot;1024&quot; Duration=&quot;0.1&quot;\/&gt;<br \/>\n&lt;\/Animation&gt;<br \/>\n[\/sourcecode]<\/p>\n<p>Atlas parameters are:<\/p>\n<ul>\n<li>Count \u2013 number of frames to generate<\/li>\n<li>Size \u2013 The size of each frame (w. h)<\/li>\n<li>Position \u2013 Position where to start creating frames (x. y)<\/li>\n<li>Pitch \u2013 The amount to step to move to the next line of sprites within the image (x, y)<\/li>\n<li>Width \u2013 The width of the source image<\/li>\n<li>Duration \u2013 The amount of time to assign to each frame<\/li>\n<\/ul>\n<p>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.<\/p>\n<h2>Timelines<\/h2>\n<p>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. <\/p>\n<p>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<\/p>\n<p>[sourcecode language=&#8221;xml&#8221;]<br \/>\n&lt;Timeline Name=&quot;Player1Intro&quot; AutoPlay=&quot;true&quot; Tag=&quot;Level1&quot;&gt;<br \/>\n    &lt;Animation Anim=&quot;PlayerImageAnim&quot; Target=&quot;SrcRect&quot; Repeat=&quot;0&quot; StartAtTime=&quot;0&quot; Delta=&quot;false&quot; Interpolate=&quot;true&quot; OnEnd=&quot;AnimEnded&quot; OnStart=&quot;AnimStarted&quot; OnRepeat=&quot;AnimRepeated&quot; \/&gt;<br \/>\n&lt;\/Timeline&gt;<br \/>\n[\/sourcecode]<\/p>\n<p>The Timeline tag enclosed a set of animations that have previously been defined with the Animation tag. <\/p>\n<p>Timeline parameters are:<\/p>\n<ul>\n<li>Name \u2013 Name of the timeline<\/li>\n<li>AutoPlay \u2013 If set to true then the animation will automatically play when assigned to an actor or scene< (optional)\/li>\n<li>Tag \u2013 A resource tag name, allows resources to be grouped, so they can be removed in groups (optional)<\/li>\n<\/ul>\n<p>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.<\/p>\n<p>Timeline Animation parameters are:<\/p>\n<ul>\n<li>Anim \u2013 The animation to play<\/li>\n<li>Target \u2013 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)<\/li>\n<li>Repeat \u2013 Number of times to repeat the animation (0 for infinite)<\/li>\n<li>StartAtTime \u2013 The number of seconds to delay starting the animation playback (optional)<\/li>\n<li>Delta \u2013 When set to true animation frames will be added to the objects existing property rather than overwriting it (optional)<\/li>\n<li>Interpolate \u2013 When set to false frames will be interpolated< (optional)\/li>\n<li>OnEnd, OnStart and OnRepeat are actions that will be called when an animation ends, starts or repeats< (optional)\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>New here? What\u2019s 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\u00a0on top of the\u00a0Marmalade SDK. This tutorial is a basic overview of the image, brush, animation and timeline systems. Images Art work definition in XOML is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,29,43,118,44,42,181,3,45,337],"tags":[],"class_list":["post-2342","post","type-post","status-publish","format-standard","hentry","category-android-app-development","category-blackberry-playbook","category-blackberry-playbook-app-development","category-c-programming","category-game-and-app-development","category-ios-app-development","category-iwgame-engine","category-programming","category-samsung-bada-development","category-xoml"],"_links":{"self":[{"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/posts\/2342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/comments?post=2342"}],"version-history":[{"count":3,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/posts\/2342\/revisions"}],"predecessor-version":[{"id":2345,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/posts\/2342\/revisions\/2345"}],"wp:attachment":[{"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/media?parent=2342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/categories?post=2342"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/tags?post=2342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}