IwGame Engine – Using Templates Tutorial

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.

A forum poster asked a question recently that made me realise that XOML Templates can quite easily be overlooked as a means for creating re-usable actors and such, so I thought to help make Templates more visible that I would create a very quick tutorial showing how to use them.

To begin with, lets take a look at what a template actually is and does. A template is a XOML tag that allows you to define generic XOML that is not instantiated immediately, yuo can think of a Template as a blue print for something that you will later instantiate into your game or app world. A template also takes any number of parameters that can be passed when you instantiate the template.

When creating items inside a Template, template parameters are defined using a template parameter name that is enclosed inside double dollar signs ($$), for example $position$. When you later instantiate the items within the template the parameters within the template will be replaced by values that are passed to the template.

Lets take a quick look at creating an actor / child actor with a template

[sourcecode language=”xml”]
<Template Name="TankTemp">
<TankActor Name="$name$" Style="TankActorStyle" Position="$pos$″ >
<TankActor Name="$name$_sel" Style="TankActorSelectedStyle" Position="0, 0″ />
</TankActor>
</Template>
[/sourcecode]

Here we create a template called TankTemp that defined an actor with a name of $name$ and a position of $pos$. Note that because these two parameters are enclosed in $$ they are classed as template parameters.

Now to instantiate this elements within this template in XOML we use the following:

[sourcecode language=”xml”]
<FromTemplate Template="TankTemp" name="Tank" pos="310, -120" />
[/sourcecode]

The above code will instantiate the following code:

[sourcecode language=”xml”]
<TankActor Name="Tank" Style="TankActorStyle" Position="310, -120″ >
<TankActor Name="Tank_sel" Style="TankActorSelectedStyle" Position="0, 0″ />
</TankActor>
[/sourcecode]

To instantiate a template from C++, we firstly need to find the template, build the parameters then instantiate the template passing in the parameters:

[sourcecode language=”cpp”]
// Find the tank template
CIwGameTemplate* temp = (CIwGameTemplate*)scene->getResourceManager()->findResource("TankTemp", "template");
if (temp != NULL)
{
// Create a set of XML attributes that will replace the template parameters
CIwGameXmlNode* replacements = new CIwGameXmlNode();
replacements->Managed = false;
CIwGameXmlAttribute* attrib;

// Set name template parameter
attrib = new CIwGameXmlAttribute();
attrib->Managed = false;
attrib->setName("name");
attrib->setValue("Tank");
replacements->AddAttribute(attrib);

// Set position template parameter
attrib = new CIwGameXmlAttribute();
attrib->Managed = false;
attrib->setName("pos");
attrib->setValue("310, -120");
replacements->AddAttribute(attrib);

// Instantiate the Tank template
temp->Instantiate(scene, replacements);

// Clean up replacement attributes
delete replacements;
}
[/sourcecode]

IwGame Engine Tutorial – Image, Brush, Animation and Timeline Overview

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>

IwGame Engine v0.36 Released – XML Data bindings, Video, True Type Fonts and First 100% XOML Mark-up Driven Game

New here? What’s IwGame? IwGame is an open source free to use cross platform game and app engine for iPhone, iPad, Android, Bada, Playbook, Symbian, Windows Mobile, LG-TV, Windows and Mac, built on top of the Marmalade SDK. You can find out more and download the SDK from our IwGame Engine page.

Its been a while (again) since we last released an update for IwGame but 0.36 has finally landed. Our plans to make IwGame viable as an app development platform as well as game development platform continue to go ahead as you will see from this update. In particular the supoprt for true type fonts and XML data bindings

Below is the latest list of changes for IwGame 0.36:

  • IwGame can now be put into Open GL compatible mode, which allows mixing of raw GL with IwGame rendering
  • New variable type added called CIwGameXomlVariableXML. This variable type is used to store structured XML data. XML files can be loaded and assigned to an XML variable at which point they will be parsed into an XML tree which can be accessed later.
  • All action parameters can now take variables as parameters as well as values
  • Array variables have a new property called BindXML. BindXML will bind XML data to an array. The binding can pick specific tag / attributes out of XML data and bind it to the array. The format of BindXML is BindXML=”XML_Variable_Name:XML_Tag:XML_Attribute”
  • New File type added to XOML that allows loading, conversion and binding of generic local and remote files to variables
  • New LoadFile action added to XOML which enables files to be force loaded or replacement of an already loaded files data
  • New SetKeyFocus action added which allows you to switch which actor has key focus
  • New IwGameVideo added. Marmalade video play back wrapped up into CIwGameVideoPlayer. XOML also supports Video resource types (local and remote)
  • New UI control added called VideoOverlay. This UI control allows you to display a video located locally or remotely as a UI element. Supports AutoPlay, Volume, Repeat, OnStart, OnEnd, OnPause, OnResume events and control playback using command property
  • Support added to sprites and actors for an AlphaMode
  • Actors can now be conditionally loaded
  • Support added for true type fonts, located in resource groups, in local files or on a web server. Fonts that are generated from the same external font TTF file will re-use already downloaded TTF to save re-download
  • Support added to fonts for auto point size calculation based on max screen dimensions vs number of lines allowed on display when creating fonts from TTF’s
  • Fonts that are defined without preload will only be loaded when an actor that uses it is displayed.
  • Timelines are no longer stored in the resource system. They now have their own timelines manager. Actors and scenes have their own timelines manager and a global timeline manager is also available. This cuts down the noise in the main resource manager, makes resource and timeline searches faster and allows timelines to be declared local to an actor
  • Actions are no longer stored in the resource system. They now have their own actions manager. Actors and scenes have their own actions manager and a global actions manager is also available. This cuts down the noise in the main resource manager, makes resource and actions searches faster and allows actions to be declared local to an actor
  • System:9 added to check if pointer is available
  • Preset animations now resize to fit screen orientation changes
  • Labels now have an AutoHeight parameter that causes them to resize to fit the height of the text that they contain
  • UI components can now be marked as SizeToContent, which causes them to base their size on the content that they contain. Siznig can be locked to a specific axis using x, y, xy or none
  • OnKeyBack / OnKeyHome support added to UI actors
  • List Box now supports key navigation
  • Optimisations: Optimised scene and sprite systems to eliminate the thousands of allocs / deallocs every second in complex scenes (if you check metrics you will notice that free and malloc are being called like mad). Unfortunately this has meant limiting the range of layers for scenes to 10. Any scenes with a layer order of 10 or more will now be rendered after layers 0-9 and in no particular order
  • StackPanel now supports horizontal centering in horizontal orientation and vertical centering in vertical orientation
  • Actor brush can now be the target of an animation
  • Support added to actors for separate x and y position bindings / properties and animation targets
  • XOML variables can now be created conditionally
  • Image based actors / UI now support AspectLock property. This allows you to lock the aspect ratio of an actor that is sized using proportional sizing. For example, if you have an icon inside a horizontal stack panel who’s height is proportional to the size of the scene, ordinarily if you made the proportional size of the icon 50% on both axis, it would get stretched on the x-axis. By setting the AspectLock to the y axis, the height of the icon will be locked to 50% of the height of the stack panel, but the width of the icon will be calculated based on the size of the brush / src_rect that is used to represent the icon.
  • Pre-defined animations PA_ScrollOnFromLeft etc now only affect the relevant axis
  • Timeline has new TimeScale attribute which scales the rate at which animations within the timeline are played back. Actors also have a new target property called TimeScale, which can be used to adjust the TimeScale of the currently attached timeline (can be set via set property, bindings or animation target)
  • New wait_var_is_value command added to program system. This command will pause program execution until a variables value is a specified value
  • CIwGameString now has a Split method which splits a string into an array of strings using a specified separator
  • Images will no longer be converted to a default RGBA5551 format, if no format is specified. You can also set the format via code (must be set before calling Init())
  • Updated grid / list box controls to work with dynamic data
  • Condition variable operands can now be variables and condition variables can now use arrays
  • Inverse conditions are now available for all elements that use conditions by pre-pending the exclamation mark ‘!’ character to the front of the condition variable name
  • Animations now have categories
  • Added new extension modifier CIwGameModCollisionNotiify. If you attach this modifier to an actor and define OnCollisionBegin / OnCollisionEnd event handlers you can execute actions based on collision between different objects. A mask can also be provided when defining the modifier to allow masking of actors by type
  • Added new XMLGrid example app which shows how to bind XML data to a grid
  • Added ActorTest example (shows parent / child actors in XOML)
  • Added ActorTest2 example (shows many actors in XOML)
  • Added GameSceneGL example (shows how to mix raw Open GL with IwGame)
  • Added Game Of 10 example game (100% XOML driven)
  • BUG FIX: Grid auto column / row sizing was broken
  • BUG FIX: Fixed grid cell horizontal alignment. Also fixed grid resizing when orientation changes
  • BUG FIX: ListBox crashes when re-assigning a new array to an already existing ListBox
  • BUG FIX: When an action is declared in the scene and called from an actor event it wasn’t being found
  • BUG FIX: Fonts were not being searched for by name
  • BUG FIX: Sprites transform is now rebuilt when changing opacity from 0 to some other value
  • BUG FIX: Fixed many crashes related to duplicated resources
  • BUG FIX: Ad click not recognised when ads view not inside a scene
  • BUG FIX: Grid row horizontal alignment fixed
  • BUG FIX: Grid orientation change resizing fixed
  • BUG FIX: When a scene / actor is created it will now update its data bindings immediately after creation
  • BUG FIX: Can now set Background, SelectedBackground and DisabledBackground to NULL, which will remove the background image of the control

That’s quite a few changes, although there are quite a few bug fixes in there that will make some of you very happy. Lets take a look at some of the more notable changes:

100% XOML Mark-up Driven Development

We wanted something cool and different to show off for 0.36 so I spent some time over the weekend designing, creating and documenting a small game that is created using entirely in XOML mark-up and no C/C++ / script coding. I’m very pleased with the results and decided to include the game (GameOf10) with the 0.36 release as an example that others can use to try creating their own 100% XOML games and apps. If you do create any 100% XOML apps or games then please get in touch and let us know.

XML Data Bindings

Another new cool feature we have added to 0.36 is the ability to bind data directly parsed from a local or remote XML file to user interface components. This may not seem like a big deal but it is in the app development world and in some respects also in the game development world. Imagine if you will a vendor that wants an app that he / she can give away to customers that shows all of his / her very latest offers. Usually the vendor would need to add the new offers to his app, rebuild it and resubmit it to the app stores. Using XML bindings he / she no longer needs to do that. The vendor simply places the latest products into an XML file and uploads them to the shops web server. The vendor then creates some XOML UI to display the XML file and submits the app to the app stores. Users come along and download the app, the app pulls the vendors latest offers data from the server and displays all of the vendors offers in the app. The vendor has to do nothing else besides maintain his offers XML file. Nice eh? Well the vendor seems to think so because sales are up 🙂

This very same approach can be applied to game development and many developers already do just that, such as the famous Zygna games. You can store game content on a server and bind the data to your games UI / game objects. You can modify the game any time you like after release. Bugs? What bugs, I just modified my XML files and fixed them 🙂

So how to use this new cool feature?

Array variables have a new property called BindXML. BindXML will bind XML data to an array. The binding can pick specific tag / attributes out of XML data and bind it to the array. The format of BindXML is BindXML=”XML_Variable_Name:XML_Tag:XML_Attribute”. Lets look at an example:

[sourcecode language=”xml”]
<Variable Name="BookXML" Type="xml" />
<File Name="File3" Location="test1.xml" FileType="xml" Preload="true" Variable="BookXML" />
<Variable Name="GridItems1" Type="arraystring" BindXML="BookXML:Chapter:Brush" />
<Variable Name="GridItems2" Type="arraystring" BindXML="BookXML:Chapter:Name" />
<Variable Name="GridItems3" Type="arraystring" BindXML="BookXML:Chapter:Description" />
<Variable Name="GridItems4" Type="arraystring" BindXML="BookXML:Chapter:Pages" />
[/sourcecode]

In this example we create an XML variable then load the file test1.xml into BookXML. We then create 4 arrays and bding the Brush, Name, Description and Pages attributes of each Chapter tag to the arrays. Heres the example test1.xml file:

[sourcecode language=”xml”]
<Contents>
<Chapter Name="Chapter1" Description="This is chapter 1" Pages="10" Brush="Button1Brush" />
<Chapter Name="Chapter2" Description="This is chapter 2" Pages="12" Brush="Button2Brush" />
<Chapter Name="Chapter3" Description="This is chapter 3" Pages="11" Brush="Button1Brush" />
<Chapter Name="Chapter4" Description="This is chapter 4" Pages="5" Brush="Button12rush" />
<Chapter Name="Chapter5" Description="This is chapter 5" Pages="7" Brush="Button12rush" />
<Chapter Name="Chapter6" Description="This is chapter 6" Pages="9" Brush="Button1Brush" />
<Chapter Name="Chapter7" Description="This is chapter 7" Pages="2" Brush="Button12rush" />
<Chapter Name="Chapter8" Description="This is chapter 8" Pages="4" Brush="Button12rush" />
<Chapter Name="Chapter9" Description="This is chapter 9" Pages="6" Brush="Button1Brush" />
<Chapter Name="Chapter10" Description="This is chapter 10" Pages="16" Brush="Button1Brush" />
<Chapter Name="Chapter11" Description="This is chapter 11" Pages="16" Brush="Button2Brush" />
<Chapter Name="Chapter12" Description="This is chapter 12" Pages="16" Brush="Button2Brush" />
<Chapter Name="Chapter13" Description="This is chapter 13" Pages="16" Brush="Button1Brush" />
<Chapter Name="Chapter14" Description="This is chapter 14" Pages="16" Brush="Button1Brush" />
</Contents>
[/sourcecode]

Now we generate a grid to show the data:

[sourcecode language=”xml”]
<Template Name="GridItemTemp">
<Label Name="Grid1Item$index$" Size="-20, 90" Background="Button1Brush" BackgroundColour="200, 200, 200, 255" SelectedColour="200, 255, 200, 255" Font="trebuchet_12" GridPos="$gridpos$" HitTest="true" SelectType="toggle" Selected="false" />
</Template>
<Grid Name="ItemsGrid" Size="-100, -100" Background="PanelBrush" BackgroundColour="255, 255, 255, 255" HitTest="true" ClipMargin="10, 10, 10, 10" MultiSelect="false" SelectedIndex="5" UseParentOpacity="false">
<RowDefinition Name="r0" AlignV="middle" Height="100" />
<ColumnDefinition Name="c0" AlignH="left" Width="-20" ItemsData="GridItems1" ItemsTemplate="GridItemTemp" ItemsTargetType="background" />
<ColumnDefinition Name="c1" AlignH="left" Width="-20" ItemsData="GridItems2" ItemsTemplate="GridItemTemp" ItemsTargetType="text" />
<ColumnDefinition Name="c2" AlignH="left" Width="-40" ItemsData="GridItems3" ItemsTemplate="GridItemTemp" ItemsTargetType="text" />
<ColumnDefinition Name="c3" AlignH="left" Width="-20" ItemsData="GridItems4" ItemsTemplate="GridItemTemp" ItemsTargetType="text" />
</Grid>
[/sourcecode]

Video

A new sub-system called CIwGameVideoPlayer has been added that wraps the Marmalade SDK video playback code up into a nice and easy to use singleton called IW_GAME_VIDEO. We also have a new type called CIwGameVideo which represents a video resource that can be created in code or in XOML. Videos can be loaded from local storage or remotely from a web server either immediately or on-demand via the new VideoOverlay UI component. Lets take a quick look at an example:

[sourcecode language=”xml”]
<Video Name="Video1" Location="http://www.drmop.com/video1.mp4" Codec="MPEG4" />

<StackPanel Name="SP1" Size="300, -100" Background="PanelBrush" Orientation="vertical" AlignH="centre" AlignV="top" SizeToContent="none" >
<Label Background="Button2Brush" Size="-90, 100" SelectedColour="128, 255, 200, 128" Text="Option 1" Font="trebuchet_12" />
<Label Background="Button2Brush" Size="-90, 100" SelectedColour="128, 255, 200, 128" Text="Option 1" Font="trebuchet_12" />
<Label Background="Button2Brush" Size="-90, 100" SelectedColour="128, 255, 200, 128" Text="Option 1" Font="trebuchet_12" />
<Label Background="Button2Brush" Size="-90, 100" SelectedColour="128, 255, 200, 128" Text="Option 1" Font="trebuchet_12" />
<VideoOverlay Name="Vid1" Background="Button2Brush" SelectedColour="128, 255, 200, 128" Video="Video1" Size="-90, 100" AutoPlay="false" Volume="0.3" Repeat="1" AspectLock="x" OnEnd="VideoEnd" OnTapped="Play">
<Actions Name="VideoEnd">
<Action Method="HideActor" Param1="SP1" />
</Actions>
<Actions Name="Play">
<Action Method="SetProperty" Param1="Command" Param2="play" Param3="Vid1" />
</Actions>
</VideoOverlay>
<Icon Background="Button1Brush" />
</StackPanel>
[/sourcecode]

This example creates a video resource for a video file located on a web server. We then create a stack panel that contains 4 labels and a video overlay stacked on top of each other. The video is not loaded or played until the user taps on the space containing the video. When the video ends the whole UI will be hidden.

Now I don’t think you can ask for a simpler way of integrating video into your products 🙂

True Type Fonts

The font system has been reworked to add support for true-type fonts that are either located in a Marmalade resource group or located in a local or remote TTF file. Lets take a quick look at an example:

[sourcecode language=”xml”]
<Font Name="font1" Location="Serif.ttf" AutoPointSize="50" PointSize="0" Preload="true" />
<Font Name="smallfont1" Location="Serif.ttf" AutoPointSize="60" PointSize="0" Preload="true" />
[/sourcecode]

In this example, we create two different sized fonts from a local TTF file. We have the ability to auto generate the correct font point size based on the devices screen size. You simply specify how many lines of text you would like to fit onto the display using AutoPointSize. Note that PointSize will be added onto the calculated point size. Also note that, fonts will re-use font files to save having to reload / download them. For example, because font1 already loaded the Serif.ttf file, smallfont1 will re-use that same file.

OpenGL Compatibility

You can now freely mix Open GL with IwGame. A new example has been provided that shows how to mix Open GL with IwGame.

Action Variable Parameters

We have reworked the action parameter system to enable variables to passed as parameters as well as values. For example:

<Action Method=”SetProperty” Param1=”Timeline” Param2=”StillAnim” Param3=”SelectedCardNames:0″ />

This action assigns the “StillAnim” timeline to the actor whos name is stored as the first index in the SelectedCardNames array.

Conditions can now use inverse condition checking by pre-pending an exclamation mark ni front of the condition variable name, this saves having to create inverse conditions. For example, HasBullets becomes !HasBullets

Optimisations and Clean-up

We have reworked the actions and timeline systems to remove them from the resource system as the resource system can quickly become cluttered making searching for resources slower than it should be. A cool side affect of this change is that actors can now have their own local actions and timelines lists, reducing the chances of naming conflicts.

We have also gone through almost every line of code and removed the excessive use of memory allocation / deallocation that were occurring every frame.

New Collision Modifier Added

Added new extension modifier CIwGameModCollisionNotiify. If you attach this modifier to an actor and define OnCollisionStart / OnCollisionEnd event handlers you can execute actions based on collision between different objects. A mask can also be provided when defining the modifier to allow masking of actors by type

There are also a ton of other changes such as Labels that now size to the text they contain and UI elements can be told to size to their content

Well that’s it for this update. We’ve just started looking into LUA integration as well as creating TileMaps. Hopefully those features will make it into IwGame 0.37.

The Worlds first 100% XML Mark-up Driven Puzzle Game made with XOML

Well we finally cracked it, we’ve been aiming to create a game in 100% XOML mark-up and it finally happened. We created a small logic puzzle game called 10.

The game itself has simple rules. The screen is filled with cards, each card having a value of 0 to 9. The user selects 3 cards, who’s total value must total 10. When the user selects 3 cards that total 10 they are removed from play. To complete the round the user must eliminate all cards on the play field. The idea is simple but the game can be become incredibly difficult.

The game is 100% XOML based using only actions and variables to create the logic and no additional C/C++. We will be providing the project as an example project when we release IwGame 0.36.

Note that the game will not work with version 0.35 of IwGame.

We are getting closer to bringing cross platform mobile game and app development to the hands of none programmers 🙂

Oh and For the sake of clarity, we are not stating a worldwide claim over all mark-up languages as that would be ludicrous, only the XOML mark-up language.

A Windows build of the Game of 10 is available for download at http://www.drmop.com/wp-content/uploads/2012/06/Game-of-10.zip

[sourcecode language=”xml”]
<?xml version="1.0"?>
<xml>

<Style Name="GenericSceneStyle">
<Set Property="CanvasSize" Value="-100, -100" />
<Set Property="CanvasFit" Value="none" />
<Set Property="CanvasOrigin" Value="centre" />
<Set Property="Colour" Value="255, 255, 255, 255" />
<Set Property="AllowSuspend" Value="false" />
<Set Property="Physics" Value="false" />
</Style>

<!– Load a UI style to style the user interface –>
<LoadXOML File="UIStyle.xml" />

<!– Create a scene to hold or game –>
<Scene Name="GameScene" Style="GenericSceneStyle" Camera="Cam" Extents="-1000, -400, 2000, 800" Current="true" Batch="false" ClipStatic="true">

<!– Create a camera –>
<Camera Name="Cam" Position="0, 0" Angle="0" Scale="1.0" />

<!– Score / round variables –>
<Variable Name="Score" Type="int" Value="0" />
<Variable Name="RoundScore" Type="int" Value="0" />
<Variable Name="CurrentRound" Type="int" Value="0" />
<!– TargetValue determines the valuue that all 3 user selections should add up to gain a correct answer –>
<Variable Name="TargetValue" Type="int" Value="10" />
<!– TotalCardsValue is the current value of all selected cards –>
<Variable Name="TotalCardsValue" Type="int" Value="0" />
<!– CardValues is an array that holds the value of each card –>
<Variable Name="CardValues" Type="arrayint" Size="15" Value="0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0" />
<!– CardsCount is the total number of cards in play –>
<Variable Name="CardsCount" Type="int" Value="15" />
<!– CardsFoundCount is the total number of cards that the user has successfully found –>
<Variable Name="CardsFoundCount" Type="int" Value="0" />
<!– SelectedCardNames is an array that holds the names of the currently selected cards –>
<Variable Name="SelectedCardNames" Type="arraystring" Size="3" Value="none, none, none" />
<!– CardIndex is the current selection index –>
<Variable Name="CardIndex" Type="int" Value="0" />

<!– CardIndexIs are conditions used to determine the currently selected index –>
<Variable Name="CardIndexIs0" Type="condition" Value="CardIndex == 0"/>
<Variable Name="CardIndexIs1" Type="condition" Value="CardIndex == 1"/>
<Variable Name="CardIndexIs2" Type="condition" Value="CardIndex == 2"/>
<Variable Name="CardIndexIs3" Type="condition" Value="CardIndex == 3"/>
<!– CardsMatch is a condition used to determine if the total of all currently selected cards add up to the the target value of 10 –>
<Variable Name="CardsMatch" Type="condition" Value="TotalCardsValue == TargetValue"/>
<!– NoCardsLeft is a condition used to determine if there are any cards left in play –>
<Variable Name="NoCardsLeft" Type="condition" Value="CardsCount == CardsFoundCount"/>

<!– IsRound is a condition used to determine the current round –>
<Variable Name="IsRound0" Type="condition" Value="CurrentRound == 0"/>
<Variable Name="IsRound1" Type="condition" Value="CurrentRound == 1"/>
<Variable Name="IsRound2" Type="condition" Value="CurrentRound == 2"/>

<!– Load the first set of cards –>
<File Name="RoundFile" Location="Round1.txt" FileType="text" Preload="true" Blocking="true" Variable="CardValues" />

<!– Action that resets the round –>
<Actions Name="RestartRound">
<Action Method="SetVar" Param1="RoundScore" Param2="0" />
<Action Method="SetVar" Param1="TotalCardsValue" Param2="0" />
<Action Method="SetVar" Param1="CardsFoundCount" Param2="0" />
<Action Method="CallActions" Param1="ResetSelection" />
<Action Method="ShowActor" Param1="Card0" />
<Action Method="ShowActor" Param1="Card1" />
<Action Method="ShowActor" Param1="Card2" />
<Action Method="ShowActor" Param1="Card3" />
<Action Method="ShowActor" Param1="Card4" />
<Action Method="ShowActor" Param1="Card5" />
<Action Method="ShowActor" Param1="Card6" />
<Action Method="ShowActor" Param1="Card7" />
<Action Method="ShowActor" Param1="Card8" />
<Action Method="ShowActor" Param1="Card9" />
<Action Method="ShowActor" Param1="Card10" />
<Action Method="ShowActor" Param1="Card11" />
<Action Method="ShowActor" Param1="Card12" />
<Action Method="ShowActor" Param1="Card13" />
<Action Method="ShowActor" Param1="Card14" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="Card0" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="Card1" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="Card2" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="Card3" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="Card4" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="Card5" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="Card6" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="Card7" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="Card8" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="Card9" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="Card10" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="Card11" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="Card12" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="Card13" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="Card14" />
</Actions>

<!– Action that moves to the next round –>
<Actions Name="NextRound">
<Action Method="CallActions" Param1="RestartRound" />
<Action Method="AddVar" Param1="CurrentRound" Param2="1" />
<Action Method="LoadFile" Param1="RoundFile" Param2="true" Param3="Round1.txt" Condition="IsRound0" />
<Action Method="LoadFile" Param1="RoundFile" Param2="true" Param3="Round2.txt" Condition="IsRound1" />
<Action Method="LoadFile" Param1="RoundFile" Param2="true" Param3="Round3.txt" Condition="IsRound2" />
</Actions>

<!– Action that is called when a correct answer is given –>
<Actions Name="CorrectAnswer">
<Action Method="AddVar" Param1="RoundScore" Param2="1" />
<Action Method="HideActor" Param1="SelectedCardNames:0" />
<Action Method="HideActor" Param1="SelectedCardNames:1" />
<Action Method="HideActor" Param1="SelectedCardNames:2" />
<Action Method="AddVar" Param1="CardsFoundCount" Param2="3" />
<Action Method="SetProperty" Param1="Text" Param2="Correct, well done" Param3="AnswerNotification" />
<Action Method="SetTimeline" Param1="AnswerNotificationAnim" Param2="AnswerNotification" />
</Actions>

<!– Action that is called when an incorrect answer is given –>
<Actions Name="WrongAnswer">
<Action Method="SetProperty" Param1="Text" Param2="Incorrect, try again" Param3="AnswerNotification" />
<Action Method="SetTimeline" Param1="AnswerNotificationAnim" Param2="AnswerNotification" />
</Actions>

<!– Action that is called when the user has finished selecting 3 cards –>
<Actions Name="ResetSelection">
<Action Method="SetVar" Param1="CardIndex" Param2="0" />
<Action Method="SetVar" Param1="TotalCardsValue" Param2="0" />
</Actions>

<!– Action that is used to check the answer –>
<Actions Name="CheckAnswer">
<Action Method="CallActions" Param1="CorrectAnswer" Condition="CardsMatch" />
<Action Method="CallActions" Param1="WrongAnswer" Condition="!CardsMatch" />
<Action Method="CallActions" Param1="ResetSelection" />
<Action Method="CallActions" Param1="RoundComplete" Condition="NoCardsLeft" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="SelectedCardNames:0" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="SelectedCardNames:1" />
<Action Method="SetProperty" Param1="Timeline" Param2="StillAnim" Param3="SelectedCardNames:2" />
</Actions>

<!– Action that is called when the round is complete –>
<Actions Name="RoundComplete">
<Action Method="AddVar" Param1="Score" Param2="RoundScore" />
<Action Method="CallActions" Param1="NextRound" />
</Actions>

<!– Create a grid cell actor template to represent our card –>
<Template Name="CardTemplate">
<Label Name="Card$index$" Size="-18, -28" Background="Button1Brush" BackgroundColour="255, 255, 200, 255" SelectedColour="200, 255, 200, 255" Font="font1" GridPos="$gridpos$" HitTest="true" SelectType="normal" Selected="false" OnTapped="CardSelected">
<Timeline Name="FlashAnim" AutoPlay="true">
<Animation Anim="Flashing" Repeat="0" Target="Scale"/>
</Timeline>
<Actions Name="CardSelected">
<Action Method="SetVar" Param1="SelectedCardNames:0" Param2="Card$index$" Condition="CardIndexIs0" />
<Action Method="SetVar" Param1="SelectedCardNames:1" Param2="Card$index$" Condition="CardIndexIs1" />
<Action Method="SetVar" Param1="SelectedCardNames:2" Param2="Card$index$" Condition="CardIndexIs2" />
<Action Method="AddVar" Param1="TotalCardsValue" Param2="CardValues:$index$" />
<Action Method="AddVar" Param1="CardIndex" Param2="1" />
<Action Method="SetTimeline" Param1="FlashANim" />
<Action Method="CallActions" Param1="CheckAnswer" Condition="CardIndexIs3" />
</Actions>
</Label>
</Template>

<!– Create a grid that contains our cards –>
<Variable Name="SelectedCard" Type="int" Value="-1" />
<Grid Name="ItemsGrid" Size="-100, -90" Docking="bottom" Background="PanelBrush" BackgroundColour="150, 200, 255, 255" SelectedColour="150, 200, 255, 255" HitTest="false" ClipMargin="10, 10, 10, 10" MultiSelect="true" UseParentOpacity="false" ItemsData="CardValues" ItemsTemplate="CardTemplate" ItemsTargetType="text" Selection="SelectedCard">
<RowDefinition Name="r0" AlignV="middle" Height="-33" />
<RowDefinition Name="r1" AlignV="middle" Height="-33" />
<RowDefinition Name="r2" AlignV="middle" Height="-33" />
<ColumnDefinition Name="c0" AlignH="left" Width="-20" />
<ColumnDefinition Name="c1" AlignH="left" Width="-20" />
<ColumnDefinition Name="c2" AlignH="left" Width="-20" />
<ColumnDefinition Name="c3" AlignH="left" Width="-20" />
<ColumnDefinition Name="c5" AlignH="left" Width="-20" />
</Grid>

<!– Create the menu at the top of the screen –>
<StackPanel Size="-100, -10" HitTest="false" Docking="top" Orientation="horizontal">
<Label Name="Restart" Background="Button1Brush" SelectedColour="80, 80, 80, 255" Size="-15, -100" Font="smallfont1" Text="Restart" Margin="0, -5, 0, 0" OnTapped="RestartRound" />
<Label Background="PanelBrush" Size="-10, -100" Font="smallfont1" Text="Round" />
<Label Name="RoundScore" Background="PanelBrush" Size="-10, -100" Font="smallfont1" Binding="[Text]CurrentRound" />
<Label Background="PanelBrush" Size="-10, -100" Font="smallfont1" Text="Score" />
<Label Name="Score" Background="PanelBrush" Size="-10, -100" Font="smallfont1" Binding="[Text]Score" />
<Label Background="PanelBrush" Size="-10, -100" Font="smallfont1" Text="Round Score" />
<Label Name="RoundScore" Background="PanelBrush" Size="-10, -100" Font="smallfont1" Binding="[Text]RoundScore" />
<Label Name="Test3" Background="PanelBrush" Size="-10, -100" Font="smallfont1" Binding="[Text]TotalCardsValue" />
</StackPanel>

<!– Create answer notification overlay –>
<Animation Name="AnswerNotificationAnim" Duration="2" Type="float">
<Frame Value="-2000" Time="0" Easing="quadin" />
<Frame Value="0" Time="0.5" />
<Frame Value="0" Time="1.5" Easing="quadout" />
<Frame Value="2000" Time="2" />
</Animation>
<Timeline Name="AnswerNotificationAnim" AutoPlay="true">
<Animation Anim="AnswerNotificationAnim" Repeat="1" Target="PositionX" />
</Timeline>
<Label Name="AnswerNotification" Position="-2000, 0" Size="-50, -15" Background="PanelBrush" BackgroundColour="80, 255, 80, 255" Font="font1" HitTest="false" />

</Scene>

</xml>
[/sourcecode]

IwGame – How to mix raw Open GL with IwGame Scenes

A fellow developer recently had the need to mix raw Open GL with IwGame scenes so I decided to take a look into the matter. The problem with mixing the Marmalade SDK’s graphics sub systems IwGx and Iw2D with raw Openm GL is two fold:

  • Marmalade’s IwGxClear() / Iw2DSurfaceClear() functions seem to do something internally that prevents the display of Open GL rendering code. I believe that the actual underlying call to clear the screen is called when IwGxFlush() gets called so any Open GL rendering carried out during the frame is wiped out as soon as IwGxFlush() is hit.
  • IwGx / Iw2D rendering is deferred until either IwGxFlush() or Iw2DSurfaceShow() is called. This means that anything you draw using Open GL during the frame will be drawn over when the flush is done at the end of the frame because Marmalade does all its rendering when the flush occurs

Ok, problem 1 is easy to fix. We’ve added a new property to CIwGame called GLCompatible. If you have any scenes in your app that need to render using raw Open GL then call GAME->setGLCompatible(true) to force IwGame to clear the display buffer using Open GL instead of IwGx. (You will need to download http://www.drmop.com/wp-content/uploads/2012/06/GameSceneGLTest.zip and use the new IwGame that is contained in the archive to use this new feature.

Problem 2 is also easy to fix. In the scene that you call raw Open GL rendering code, call IwGxFlush() before you begin rendering using Open GL. This will force Marmalade to draw everything that’s waiting to be drawn. As IwGx is built upon Open GL you should also NOT rely on GL to be in the state that you left it in previous frame, so ensure that you restore matrices, shade model and any other GL specifics that IwGx may have modified.

You can download an example that shows the complex UI example with a GL scene on top. The GL scene also contains a stack panel that shows that you can also add IwGame stuff on top of GL rendering. The example is located at http://www.drmop.com/wp-content/uploads/2012/06/GameSceneGLTest.zip

New Marmalade SDK FAQ

I trawl the Marmalade SDK forums from time to time and I see many questions that come up from time to time. In an attempt to answer those questions and cut down Marmalade forum traffic I have started a Marmalade SDK FAQ that should hopefully help fellow Marmalade developers find answers to commonly asked questions without having to wait for forum responders or search high and low through the SDK documentation / web.

The new FAQ is located at http://www.drmop.com/index.php/marmalade-sdk-faq/

It is also available in a more compact and readable PDF format from http://www.drmop.com/Marmalade_SDK_FAQ.pdf

IwGame Engine v0.35 Released – Multi-touch User Interface, XOML Programs, 9-Patch Rendering and Arrays

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. You can find out more and download the SDK from our IwGame Engine page.

Its been a while since we last released an update for IwGame but 0.35 is finally here. Our plan for this update was to enabled IwGame as a viable app development SDK as well as game development. With the new addition of the user interface we feel that we have made a great stride towards that aim.

Here is the latest list of changes:

IwGame 0.35 Changes:
* XOML schema added. This enables error checking, intellisense and auto completion when creating XOML
* New user interface system added, enabling IwGame as an app developemnt platform. IwGameUI has the following features
* Static and proprtional sizing an margins
* Buttons / toggle / sticky buttons with OnToggledOn and OnToggledOff events
* Labels
* Text input boxes
* Sliders (horizontal and vertical)
* Canvas – Allows organisation of content on a large scrollable canvas area as well as docking of content to edges
* Stack panels and wrap panels (horizontal and vertical) allow organisation of content in vertical and horizontal stacks
* Wrap panel (horizontal and vertical), works much in the same way as an orinary stack panel exceot content that overflows the edge of the panel will wrap down to the next line or across to the next column
* Listbox (horizontal and vertical) allows organisation and selection of content using sigle and multi-select. Can use templates and bindings for automatic binding of data to the list box
* Grid allows the display and navigation of two dimensional data, each column or the whole grid can be bound to data and templates.
* Image view that allows the display and navigation of large images (supports panning and pinch zoom), can also contain any other UI or actor
* Text view that allows the display and navigation of text (supports panning and pinch zoom)
* Web view – A wrapper for Marmalades Web API. Multiple web views cn abe instantiated inside the UI
* TabBar (horizontal and vertical) – A tab bar allows the display of multiple pages or views of content. The tab bar can be orientated horizontally or vertically. Tab bar can appear at top, bottom, left or right of control area. View swicthing can also be animated using a selection of preset animations or using your own custom animations.
* All UI elements are supported in XOML, fully bindable and integrates directly into all other systrems including the animation system.
* Container UI elements will clip children. Container actors also allow the specification of a clip margin.
* Scrolling and zooming supports iOS style spring effect to place contents back into position when going over boundaries
* All UI elements support hide and show timelines
* Rendering system now supports 9-patch rendering using 9-patch brushes
* Sprite system now supports 4 parameter skewing
* IwGameInput system reworked to make it more multi-touch friendly
* XOML now fully supports multi-touch events (up to 5 simultaneous events)
* Event bubbling added, enabling touch events to travel up to parent actors
* Actors and scenes now support proportional sizing
* Actors now support margins and docking to screen edges
* Actor touch events now provide the touch index that causes the event
* Sprites / actors can now scale their opacity by their parents
* Delta animations targeting position, scale, rotation, colour and opacity will apply the update from the original value that was assigned to the actor
* Actors now support simple bindings. Simple bindings are a simple binding of a variable to an actors property without having to create a full bindings list
* Actors can now be created from a brush. Using brushes instead of images, allows you to create image based actors without having specify a visual size
* Scenes and actors now support dynamic resizing and orientation changes
* Support for array variables added
* System XOML variable array added. Allows you to query current display width, height, mode, device type, multi-touch / compass, accelerometer, keyboard support. Also provides a rating hint as to the size of the display, which you can be used to determine size of fonts etc
* New program / command system added, This new system is a very powerful way of creating game or app flow logic in XOML
* New DebugText action that displays the value of a XOML variable / text to the debug output
* New ChangeProgram action that allows the modification of running programs
* New CIwGameAnimUtil class added that enables creation o simple timelines in code
* Images now support filtering and format conversion in code and in XOML
* CIwGameRender2d now supports rendering of images fom short vectors. These types of images will not use the data cache
* Actor / sprite rendering optimised to cut down processing of actors / sprites not on screen or visible
* Sprite system completely changed to support heirarchical rendering
* Text rendering optimised when not rotated
* Fonts, images and XOML files can now be conditionally loaded
* Scene FixedAspect and LockWIdth have been deprecated. Scenes now use the new CanvasFit option which supports canvas fitting to Width, Height, Both, None and Best Fit
* Physics can be disabled for a complete scene to reduce processing
* IwGame class now uses layer ordering to determine priority of touch events
* Re-arranged XOML tags and tag attributes, placing more commonly used tags / attributes earlier to speed up XOML parsing
* Touch focus is now released when user touches an actor and moves their finger away from the actor by more than double the radius. Touch focus is also released when camera is panned in scenes that have touch panning enabled.
* Frame rate cap has been removed
* BUG FIX: When releasing scene touch panning on an actor it no longer takes it as a tap on the actor
* BUG FIX: Mip-mapping globally disabled as it was causnig many rendering artefect issues
* BUG FIX: camera touch pan scaling, camera pan now follows finger accurately
* BUG FIX: Attempting to instantiate a template inside an actor crashed has now been fixed
* BUG FIX: Fixed issue with bool variable add method
* BUG FIX: CIwGameActor::setAngularVelocityDamping() fixed
* BUG FIX: Fixed issue where releasing a scene touch pan on an actor will send the OnBeginTouch event to the actor

As you can see that’s an immense bunch of changes. if you have been following the real-time updates in the forum then you will probably be aware of many of these changes: I can tell you one thing for sure, I did not enjoy updating the documentation

Lets take a more in-depth look at some of these new changes:

User Interface

The biggest change in 0.35 is the additional of the user interface system IwGameUI. Our aim was to create a user interface system that was good for both app and game development. With this aim in mind we believe we have created a user interface system that is better, more versatile and more extensible than currently available user interface systems.

Here are the main features of IwGameUI:

  • Data binding (two way in some cases). Data binding allows you to map XOML variables / arrays to UI elements and when those variables change the changes are reflected in the user interface components
  • 14 different kinds of controls (buttons, icons, labels, text boxes, list boxes, grids, sliders, canvas, stack panels, wrap panels, image views, text views, web views and tab bars)
  • Support for events and actions, such as handling button toggling, selection and value changes.
  • Fully integrated into IwGame’s animation system
  • Styling and templating
  • 9-patch rendering which allows you to render clean looking buttons / borders without losing resolution
  • Supports modifiers and other customisations, allowing you to augment the behaviour of UI elements
  • Supports proportional sizing
  • Supports dynamic orientation / screen size changes
Ywo example projects have been included with 0.35 that show a basic UI and a cmoplex UI. Yuo can see a video of the complex UI at http://www.youtube.com/watch?v=ZImWhKwV1tA

Heres a quick example of a little bit of UI defined in XOML:
[sourcecode language=”xml”]
<StackPanel Background="PanelBrush" Orientation="horizontal" Size="-95, 100" AlignV="middle" Margin="0, 0, 10, 10">
<Icon Background="Button1Brush" Margin="20, 0, 0, 0" />
<Icon Background="Button2Brush" Margin="20, 0, 0, 0" />
<Icon Background="Button3Brush" Margin="20, 0, 0, 0" />
<Icon Background="Button4Brush" Margin="20, 0, 0, 0" />
</StackPanel>
[/sourcecode]

This bit of XOML will create a stack panel that contains 4 icons stacked horizontally at the side of each other. Notice that the width of the stack panel is set to –95. The new negative sizes represent proportional sizing, with –95 meaning either 95% of the parents container size or if no parent, 95% of the screen size.

Programs and Commands

Whilst the events / actions system is great for handling the event based parts of your game we felt that we needed a new system that would allow some kind of game / app logic scripting that would enable developers to define sets of complex functionality that can be ran at any point during the apps lifetime. Obviously as we are programmers we felt a program / command style system would feel most natural. We also felt that we needed a versatile system that the developer could completely customise to suite their needs, so we added the program system. IwGame’s program system allows developers to create complex programs from a list of hierarchical commands. Commands are executed in the order in which they are declared until the end of the program is reached. Commands can also executed concurrently, allowing the program to run multiple commands together each frame. Lets take a look at a quick program example:
[sourcecode language=”xml”]
<Program Name="Main" AutoRun="true" Priority="true">
<Command Parallel="true">
<Command Method="show_video" Param1="IntroVideo" />
<Command Method="run_actions" Param1="StartAnimation" Param2="Door" />
</Command>
<Command Method="show_speech" Param1="0" Param2="Hey how ya doing?" />
<Command Method="show_speech" Param1="0" Param2="Tap that door" />
<Command Method="wait_tapped" Param1="Door" />
<Command Method="set_property" Param1="Timeline" Param2="RemoveItemAnim" Param3="Door" />
<Command Method="wait_tapped" Param1="ID Card" /> <Command Method="add_inventory" Param1="ID Card" />
<Command Method="load_scene" Param1="Scene2.xml" />
</Program>
[/sourcecode]

We define a program named “Main” and tell I to automatically run when the scene is loaded. We set the program as a priority program, which means it is executed before all other programs.

Next we add a command that executes two other commands in parallel. This will show an intro video and start a door animation. Once complete the player will be shown the “Hey how ya doing” speech and so on and so forth.

As you can see using the program system it becomes an incredibly easy process to define complex logical game and app flow.

Multi-touch in XOML

XOML now supports multi-touch events for actors. Actors can now respond to up to 5 simultaneous taps, begin and end touches. For example, you could control 5 actors at the same time on screen in a game, or create a cool user interface element that utilises more than one finger, like we have done with pinch zoom image and text view controls.

Proportional Sizing, Docking, 9-Patch Brushes and Orientation Changes

We now support proportional sizing of actors and margins, allowing you to create game and app layouts that are completely screen size independent. Actors can now be docked to the edges of the screen and canvas containers. 9-Patch brushes now allow the rendering of images where you want to retain the clean 1:1 pixel border around an image. All actors and scenes can now detect and handle orientation changes. Any actors or UI elements that are declared as proportionally sized will automatically be resized for you when the screen resolution changes. In addition, if no size is specified when creating an actor the actors assigned brush size will be taken as its visual size. We recommend that you create all actors from brushes to take full advantage this feature.

Array Variables, System Variables and Simple Bindings

XOML now supports the creation and definition of array variables. The bindings system also works with the array system. To access a particular element of an array to a property you would use variable_name:array_index, instead of simply variable_name.

A new system array has been added by default to the XOML system. This allows you to query certain aspects of the system such as display size, support for multi-touch etc..

Actors can also use simple bindings. A simple binding is a binding without a bindings collection which allows you to bind a single variable to a single actor property, e.g:

<ActorText Name="NameLabel" ......... Binding="[Text]ProfileName:2" />

In the above example we bind the 3rd index of the ProfileName array to the Text property of NameLabel.

Event Bubbling

Actors now support bubbling of touch events. Actors can be marked to receive input events from their child actors

Actor and sprite optimisations

We have gone through and optimised the actor and sprite systems to cut down a lot of rendering and processing of actors / sprites that are clipped or off screen.

Scene Virtual Canvas Sizing

We have changed the way a scenes canvas sizing is set-up to make it more versatile. You can now choose the method by which iwGame scales your scenes to the final display as well as choose the scenes origin

Image filtering and format conversion

When images are declared in XOML you can now specify if they should be filtered when rendered. You can also specify the format that you would like the image to be converted to before uploaded to texture RAM, reducing the size of your texture RAM usage.

Licensing Terms Updated

The licensing terms for IwGame Engine usage has been changed. Whilst there are other minor changes, the main change is:

You may not use the IwGame Engine or any of its parts to create products that can be used to create other apps and games for mobile devices without express prior written notice from an executive of Pocketeers Limited with the correct authority to grant authorisation.

IwGame Engine 0.35 coming this weekend with luck

Its been a long hard slog getting the UI update in but we finally feel confident that there are enough features in the UI system now to release IwGame 0.35 this week / early next week.  The new bindable UI makes the IwGame engine equally potent as a general app development engine as well as a game engine. In fact, using XOML I dare say its much easier to develop apps using the IwGame that it is any of the native SDK’s (Hmm, maybe the engine needs a new name  :))

Unfortunately there have been a massive number of changes within the engine, which means many of the original engine files have also been changed, so if you are thinking of merging then its not going to be easy. We are currently working on  documentation and what not, which unfortunately is going to take some time due to the large number of changes. That said the wait will be worth it as we believe 0.35 is our best release yet enabling developers to not only create awesome games with ease but also awesome apps with ease.

 

Marmalade SDK 6.0.2 Released

Marmalade have just released 6.0.2 of their awesome SDK. Looking at the change list there are some very welcome bug fixes:

  • Exporters: Added support for Maya 2013 and Max 2012
  • iOS: touches are no longer passed to the surface below the web view
  • iOS: s3eOSReadString now handles split keyboards correctly
  • iOS: added s3eEdkAppGetInitialOpenURL to get the initial open URL
  • android: fixed icf splash screens when fixing rotation
  • playbook: s3eOSReadString now cancels properly
  • IwHTTP: fixed to work without threads
  • Added menu options to Windows simulator for Retina display
  • OSX: fixed to make building extensions possible
  • Android splash fixed when using dispfixrot=2
  • android: building of EDK modules
  • ios: WebView orientation (IwGX and s3eWebView) on iPad
  • android: fixed crash with image property in CImagePtr when loading a png file

There is however a crash issue with Bada builds

Yet another IwGame Engine UI Progress Update

Not had a great deal of spare time to spend on the UI this week but did manage to get a few cool things in there including:

  • Scrolling grids
  • Scrolling list boxes
  • Horizontal list boxes
  • 9-patch brushes
  • Child element sizing based on percentage of parent
  • Child clipping
  • Grid per column bindings
  • Dynamic resizing of elements, grids and list boxes will automatically re-layout child elements to make use of extra space
  • UI elements can allow touch events to bubble up to parent elements allowing them to also receive the same events
  • Tidied up the UI input system
  • 4 parameter skewing – See the wonky text on the large and small buttons for an example

Heres a quick screen shot showing the current UI demo:

More Advanced IwGame Engine UI Screen Shot
More Advanced IwGame Engine UI Screen Shot

Those frogs look happy to be sat in that list box like that 🙂

And here’s a new and better video showing the new UI http://www.youtube.com/watch?v=IhtT_e5u8gU

I hope to spend a few additional weeks on implementing more UI controls such as sliders and tab vies etc.. before we released 0.35.