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.