Booty5 HTML5 Game Maker 1.9.1b Available – Text preview and collision flags

Booty5 the HTML5 Game Maker v1.9.1b is now available for free download.

Editor Changes:

  • Scale and angle are now affected in multiple actor selections
  • Editor export properties now supports smoothing property that will enable / disable anti-aliasing during rendering
  • Added support for rounding pixels to actors, if disabled then pixel coordinates will be rounded to integer values, can improve performance but at a cost of lower precision rendering
  • Removed some currently unused options from sprite and label
  • Font size and face separated in labels
  • Font weight added to label
  • Editor now shows text preview
  • Exported collision flags are now used by engine
  • Added vertices snap to shape editor
  • Added new Collision Flags example
  • Fix: Convex shapes were not exporting correctly
  • Fix: Some properties such as actor scale were not exporting correctly with an export precision of 0

Engine Changes:

  • Added new property to Actor called round_pixels, when set to true vertices will be rounded to integer which can speed up rendering significantly
  • Added support for collision flags to physics fixtures (category, mask and group index)

The Booty5 HTML5 game manual ebook has also been updated.

Free Booty5 HTML5 Game Maker Manual e-book now available

The first version of the Booty5 HTML5 Game Maker Manual e-book is now available for free download. Find out more on the Booty5 free e-book page.

Marmalade SDK 7.3.1 is out now, Fortumo, FBX exporter and other cool additions

Yep that’s right, Marmalade 7.3.1 is smoking hot and fresh off the press. In case you have been developing games in a cave somewhere with no internet connection the Marmalade SDK is an awesome piece of technology that enables you to create games that run across many different mobile and desktop platforms with “one single code base”. I cannot stress how wonderful that is in mere words. You can develop products in C++, Objective-C, Lua or HTML / JavaScript, test under simulation on Mac / Windows desktop, deploy to device / store and whole raft of other cool stuff.

Anyways, sales pitch aside, lets take a look at some of the recent changes:

  • Fortumo now integrated with IwBilling and Quick Billing.
  • New FBX to Marmalade converter tool, making it easy to get your 3D assets from tools such as Maya LT, 3ds Max and others that support FBX format into Marmalade.
  • ideviceinstaller now available on Windows (goodbye iTunes!).
  • IwGx now supports the ETC2 and EAC compressed texture formats.
  • IwGx PowerVR texture compression efficiency improved.
  • Initial support for PowerVR Tools (PVRTrace and PVRTune) on Windows Desktop.

I’m majorly excited about three of the new features in particular. The first is the support for Fortumo integration into IwBilling and QBilling. If you don’t know what they are then they are a single unified solution that enables you to “very easily” add in-app purchasing to your app across multiple different app stores. The addition of Fortumo means that in-app purchases can now be accepted by a vast number of different app stores (Android in particular).

Second feature is not having to install apps to an iOS device using the infinitely despised iTunes client on PC. I have never come across such a bug ridden piece of software in all my years. I will be happy to be deploying directly to device from now on!

Lastly, a new FBX converter that converts Maya LT exported FBX files into a lovely Marmalade format, yummy yummy.

By the way, did I mention that the Marmalade SDK is now available on a FREE license!

Click here to download the latest version of the Marmalade SDK

Made with Goji Editor games Shuffle Match and Shuffle Match for Kids now on iPhone, iPad and BlackBerry

Pocketeers has announced the release of two of its new memory game titles aimed at adults and children, Shuffle Match and Shuffle Match for Kids. Both titles were created using the Goji Editor game IDE and the AppEasy cross platform game engine.

Shuffle Match is a fun endless challenge memory game that starts out with an easy two grid and progresses up to a ten grid over time, ramping up the difficulty the longer you play, guaranteeing a great memory workout. Features include:

* Endless challenge, go as far as your memory will take you
* Easy and hard play modes
* Track your progress
* Play up to 10 x 10 memory grid in hard mode
* Very colourful graphics
* Great sound track
* NO IAP so no chance of kids running up huge bills

Shuffle Match for Kids is a version of Shuffle match that is optimised for children and has been tested on children of different age groups to optimise grid sizes and round times to ensure that the game does not become too difficult too quickly. 3 game modes are available based on age range, including younger than 6, 7 to 10 year old’s and 11+. Features include:

* Designed for 3 age ranges (6 and younger, 7 to 10 year old’s and 11 and over)
* Very colourful graphics
* Perky sound track
* Your child can track their progress to see how they improve
* NO IAP so no chance of children running up huge bills

Both titles are also available on Android, Blackberry PlayBook and BlackBerry 10 phones and tablets.

Shuffle Match and Shuffle Match for Kids were created using the Goji Editor which is a powerful game and app creation IDE that is compatible with AppEasy, Marmalade Quick, Corona and Gideros engines.

IwGame Engine 0.4 has Landed – Massive Update, Lua, Camera and more


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 long while since we did a major update of the IwGame Engine, but we have one heck of an update for you today. We have a huge number of new features, changes and bug fixes for you.

We’ve also got a slight license update. Basically the new license says that if you use IwGame then you MUST credit the IwGame either in the app / game or on the apps support web site. A VERY small price to pay for such a huge and useful engine that has taken many man months to create, test and maintain. If you cannot live with the license terms then we are willing to forego the terms for a small fee or hire one of our teams to create your project (get in touch to discuss)

Lets take a look at the complete change log:

IwGame 0.4 Changes:

  • AppEasy for Marmalade Project Manager and Apple Wizard tool added, easy wizard to help guide developers through the Apple iOS sign-up, certificate generation, provisioning etc..
  • Over 60 XOML / Lua examples added showing how to use the many parts of the IwGame engine core
  • New XOML documentation added, outlining the complete XOML and Lua API’s in depth
  • Lua API added which enables apps to be developed without C++ or a combination
  • New Script resource type added which enables scripts to be included via XOML. Globally declared scripts will exist in the global script space, whilst scene local scripts will be local to the scene
  • Support for Video Camera streaming added (IWGameCam)
  • New XOML resource type added that enables declaration of Video cam in XOML and streaming to a image (CIwGameVideoCam)
  • Sound effects have been moved into the XOML system. You can now define and play back music and sound effects from XOML
  • New RemoteReq XOML type added that enables you to make POST and GET requests declaratively
  • New XOML actions added / old ones removed
  • FromTemplate – Instantiate a XOML template from an action
  • PauseTimeline – Pauses a a timeline
  • CallGlobalScript – Calls a script in the global script space
  • ChangevideoCam – Modifies a VideoCam instance (start / stop)
  • Activate / Deactive scene removed
  • CallScript – Calls a script
  • Inline – Executes script inline
  • RemoteReq – Executes a remote request
  • Action / command parameters now support 5 parameters instead of 4
  • CIwGameActionsManager now supports removal of actions with removeActions
  • Actors / Sprites now support Orphan feature which enables them to be displayed outside their normal parent-chld hierarchy. This enables them to be layer sorted with other actors
  • Actors now support percentage positioning using the new PercPos actor property. When PercPos is set to true the actors Position property is classed as a percentage of the devices screen size
  • Actors / Sprites now have a new property called IgnoreCamera. Actors with this property set to true will ignore the scenes camera transform
  • Actors now have getProperty() method that can be used to retrieve actor properties
  • Actors now have an OnTick event that can call an actions list each time the actor is updated (each frame)
  • Actors have other new methods including CheckCollisionRect(), getDistanceBetween() and getAngleBetween()
  • Actors have many more properties that can now be set from XOML
  • Actors can now handle up to 5 simultaneous Begin / End touch and Tapped events in XONL
  • IwGameAds now sends correct user-agent for iOS and Android
  • CIwGameAnimTimelinesManager now allows removal of timelines
  • Image Brushes now support setting of UV coordinates directly using new UV property
  • XML parser pooling system changed from global to per XML parser instance, pools are auto calculated. This eliminates the need to set up XML pools.
  • Files can now transfer their data into a script when loaded
  • CIwGameImage has been extended to support CIwTexture instead of CIw2DImage, also now supports dynamic images that can be modified
  • CIwGameImage now has SaveBmp(), SaveTga(), SavePng() and SaveJpg() methods
  • New CIwGameModScript modifier added to enable actors / scenes to call scripts
  • Commands can now be conditionally executed using conditions
  • New Commands added to program system – add_var, get_var, if_var, call_script, call_global_script, inline, from_template, music, sound, wait, debug_text, remote_req
  • ChangeProgram action now supports restart command
  • Scenes now support new ScriptEngine tag which defines which script engine the scene should use
  • Scenes now support setProperty() and getProperty()
  • Scenes now have an OnTick event that can call an actions list each time the scene is updated (each frame)
  • Scene allos setting of physics time step with new PhysicsTimestep property
  • Most sprite, actor and scene parameters that were fixed point based and now floating point based
  • CIwGameSprite now has new methods SimpleTestOverlap() and TestOverlap()
  • CIwGameBitmapSprite now supports direct setting of its Uv coordinates
  • WebView (CIwGameUIWebView) completely reworked. Now uses device coordinates and can now show dynamic html / javascript
  • XOML variables can now be made persistent so that their values are saved and restored between sessions
  • XOML array variables can now be populated from comma delimited data, elements will be split at commas
  • Variables can now be removed from CIwGameXomlVariableManager
  • New CIwGameSettings class added that is used to save and restore engine settings. Currently controls debug trace output level and enable / disable device power saving
  • Many new error checks and error / warning messages added throughout
  • Slider, Imageview and TextView now support binding to integer variables
  • Labels and TextViews now have a new property TextUseParentOpacity. When set to true the labels text will scale its opacity by the label images opacity, default is not to scale
  • ActivateScene and DeactivateScene actions removed, activation / deactivation rolled into resume / suspend
  • Actors with no size or SrcRect defined will default to 100% proportional sizing
  • SetVar action now supports the generation of a random number in the same way that set_var command does
  • SetVar action and set_var command when called on an array will now fill the whole array, including the random version
  • SetVar action and set_var command now support generation of random characers with randchar
  • P1, P2, P3, P4, P5 can now be used instead of Param1, Param2, Param3, Param4, Param5 for command and actions parameters
  • All commands can now accept variable substitutions for parameters
  • Conditions can now be used on arrays for string searches, number comparisons etc..
  • Added new system variable array called touches. This array of integers represents the x, y, touched status of 5 simultaneous touches
  • Variables passed as action and command parameters now cached to speed up access
  • Raw script can now be executed inline using the new “Inline” action and “inline” command. P2 specifies scene in which to run the script (omit to run in global script space)
  • Actors that have Draggable set to true will also set Hittest to true unless you override it
  • All files are now Preload and Blocking by default
  • If you now try to add a resource that already exists in the scope it is loaded then a warning will be displayed and the resource will be overwritten
  • WebView now supports new Html attribute which can be used to pass html to the web view to be displayed
  • WebView now works in screen coordinates and not virtual canvas coordinates
  • Actors now have new UserData property that can be use to store a single integer, can be used to store index into script table / array for additional data
  • Html Ads are now integrated via the web view (see section 20 of XOML User Guide)
  • WebView now has OnError event handler which is called if the web view is not available
  • VideoCam now has OnError event handler which is called if camera fails to start
  • TTF local font loading reworked to use memory buffers
  • String class optimised to minimise memory allocations and data copying
  • String class now supports Occurrences() and Split() methods
  • Internal slot array optimised to reduce memory allocations
  • TTF local font loading reworked to use memory buffers
  • Particles defined within a Particle Actor have a new property called Attached. When set to true the particles will follow the emitter, if false then they do not.
  • Image brushes now have a new Tiled property that allows you to enable / disable tiling of the brush
  • BUG FIX: Sprites no longer appear at origin on first frame
  • BUG FIX: Fixed problems with CIwGameAnimInstance
  • BUG FIX: Scene layering fixed and optimised
  • BUG FIX: Crash when deleting or adding scenes at the same time as removing them
  • BUG FIX: Scene layers now taken into account when processing touches
  • BUG FIX: Patch9 based actor clipping bug fixed
  • BUG FIX: Text margin for labels now fixed
  • BUG FIX: Crash when assigning invalid timeline to scene
  • BUG FIX: Template parameter case issue fixed
  • BUG FIX: Nop command now returns immediately
  • BUG FIX: Crash when not assigning brush a type. Defaults to Image with a warning
  • BUG FIX: WebView was not positioned correctly when scene origin was set to something other than centre
  • BUG FIX: Web view now works on iOS and Android (does not work on Windows)
  • BUG FIX: AspectLock fixed
  • BUG FIX: None batched sprites now render correctly at edges
  • BUG FIX: Deleting particle actor that was child of another actor crashed when removing particle actor
  • BUG FIX: Particle actor placed inside parent actor didn’t scale by parents opacity when UseParentOpacity set
  • BUG FIX: Particle angvelmode, scalevelmode, depthvelmode names corrected
  • BUG FIX: Empty Param2 in FromTenplate action / commands crash
  • BUG FIX: Fixed changing orientation resizing
  • BUG FIX: Touch panning glitch fixed
  • BUG FIX: Crash fixes in CIwGameDataFile
  • BUG FIX: Compass fix
  • BUG FIX: Actors OnCreate event was not working
  • BUG FIX: Deleting scene crash
  • BUG FIX: Crash when invalid animations added to a timeline
  • Many other small additions and bug fixes that we forgot to note :)

I did say there were a lot of changes :)

Lets separate some of the changes and take a look at what they mean to IwGame Engine users:

Moving Towards a Portable Engine

We have decided to make IwGame portable as we no longer see the iwGame engine as a Marmalade learning tool. With this in mind we have started abstracting Marmalade specific code out of the main code and into its own platform section (see Marm sub folders). Over time all Marmalade types, classes, functions and constants will be moved out and replaced with a universal system that can be easily ported. We will then be porting IwGame to each individual native platform, These platforms include:

* Windows XP/Vista/7/8
* Mac OS
* Android
* Apple iOS
* Windows Phone 8
* BlackBerry OS 10
* PlayStation Vita
* Marmalade SDK

With this in mind you will have a couple of changes to make to get your existnig projects to work with IwGame. Here are the changes you will need to make:

1) Add #include “Marm\IwGamePlatformMarm.h” to your main.cpp file
2) Call IwGamePlatformMarm_Create(); at the start of main() before you do anything related to dynamic memory allocation or IwGame / Marmalade
3) Call IwGamePlatformMarm_Destroy();; right before you exit main() after you have done freeing memory and shutting down IwGame / Marmalade

Lua API

By far the most interesting addition to IwGame is the Lua API. The IwGame Lua API enables you to develop games and apps without any need to fall back to C++. Just about anything you can do in C++ you can do in Lua + XOML. We want to move IwGame towards a none compiler based system where you can create great games and apps without the need for professional level knowledge of C++ or compilers or IDE’s. In fact, we have a new service for Marmalade and none Marmalade developers called AppEasy that is built upon the IwGame core that does just that and is available at http://www.appeasymobile.com

Actors can call scripts and scripts can create and modify actors, scenes and all sorts of other stuff. You can even execute inline script in XOML!

AppEasy for Marmalade

AppEasy for Marmalade has been included in this distribution of the IwGame engine. AppEasy for Marmalade is a cool little project manager that lets you organise assets, scripts, icons, splash screens, set app info and generate a fully working MKB project for you that you can build and deploy. We have provided this awesome tool to enable you to easily check out all of the new examples, as well as give you a taste of C++ free development.

Over 60 Examples

IwGame 0.4 comes with nearly 70 examples that show off the various parts of the SDK. Here’s a complete list of examples:

Accelerometer – Shows how to use the accelerometer
• ActorChildren – Shows how actor hierarchies work
• ActorCollisionFlags – Shows how to use collision flags to mask collisions between actors
• ActorConnector – Shows how to use the connector actor to visually connect actors
• ActorDocking – Shows how actors can be docked to arrange them effectively on different sized screens
• ActorLayers – Shows how actors can be layered to add depth sorting
• ActorModifier – Shows how to use actor modifiers to add additional functionality to actors
• ActorParticles – An example that shows how to use the particles system. This example builds up to 1000 animating particles at different depths over a short period of time.
• ActorPhysics – Shows how to apply physics to actors
• AdvancedCollision – Shows how to query and interact with an actors list of start / end collision contacts
• BasicActions – Shows how to use basic actions to play and pause an animation
• BasicAnimation – Shows how to create basic animation and attach it to an actor
• BasicDataBindings – Shows how to basic data bindings. This example binds properties of an actor to different variables
• BitmapAnimation – Shows how to create a bitmap animation from a sprite atlas and attach it to an actor
• ComplexProgram – Shows how to create a slightly complex program using commands that are executed in sequence or in parallel
• ConditionalActions – Shows how to execute actions based on certain conditions being met
• ConditionalImages – Shows how to load different image sets based on conditions such as the screen size
• DataGrid – Shows how to create a grid user interface component and bind XML data to it
• Demos/Happy Birthday – Shows image loading and basic animation
• Demos/SpaceGame – Shows a basic demo of an object flying through space that can shoot bullets. Lua is used to provide the game logic
• DynamicWebView – This example shows how to write html directly to a web view using actions creating dynamic web content. It also shows how to use actions to navigate web pages / sites.
• Files – Shows how to load files and bind the loaded data to a label
• Games/GameOf10 – A game written completely in XOML, including logic
• Games/HangMan – A hang man game written in XOML and Lua
• Games/RockPaperScissors – A rock paper scissors written completely in XOML
• HelloWorld – Basic hello world XOML example
• Joints – Demo that shows how to use a variety of different Box2D joints to connect actors together
• Music – Shows how to play and stop music using actions
• OverlapTest – A simple example that shows how to use script to test for overlapping actors
• PersistentVariables – An example that shows how variables can be made persistent across different app sessions
• ProgramLoops – Shows how to create and use loops in programs
• RemoveResources – Shows how to remove resources from the global resource manager
• SceneAnimation – Shows how to animate a scene
• SceneAugmentation – Shows how to add functionality to a scene after it has already been declared
• SceneClipping – Shows how to change the clipping extents of a scene
• SceneEvents – Shows how to use and handle scene events
• SceneExtents – Shows how to change a scenes extents
• SceneLayers – Shows how to layer scenes
• ScenePanning – Shows how to use touch camere panning within a scene
• ScenePhysics – Shows how to set up basic physics in a scene
• SceneSwitch – Shows how to load and switch between different scenes
• SimpleCollision – Shows how to use collision modifiers to add collision detection to actors
• SimpleProgram – Shows how to create a simple XOML program
• SimpleScript – Shows how to add a simple script
• SoundEffects – Shows how to play sound effects
• Styles – Shows how to use styles to style a group of actors
• Templates – Shows how to use templates to create multiple actors at the same time
• Templates2 – Shows how to create actors from templates from actions
• TiledBrushes – Demo that shows how to use tiled brushes to create effects
• UI_Canvas – Shows how to use the Canvas UI container control
• UI_Complex – A more complex UI example that shows a large complex virtual user interface
• UI_Grid – Shows how to use the Grid UI container control to host pre-set UI elements
• UI_Grid2 – Shows how to create a UI Grid component automatically from data
• UI_ImageView – Shows how to create an ImageView container UI control. The ImageView container supports pinch zoom / pan
• UI_Listbox – Shows how to use the Listbox container UI control to host preset UI
• UI_Listbox2 – Shows how to use the Listbox container UI control to host dynamic UI
• UI_Slider – Shows how to use the slider UI component
• UI_StackPanel – Shows how to use the StackPanel UI container control
• UI_TabBar – Shows how to use the TabBar UI container control to host different views of information
• UI_Textbox – Shows how to use the Textbox UI component to allow the user to enter information
• UI_TextView – Shows how to use a Textview UI control
• UI_WebView – Shows how to use a web view UI control to show web content
• UI_WrapPanel – Shows how to use the WrapPanel container UI component
• Variables – Shows how to use XOML variables
• Video – Shows how to display video
• VideoCam – Shows how to stream the video cam to an image and then map that image to actors
• XMLVariables – Shows how to use XML variables in XOML to pull specific information from XML files

New XOML / Lua API Documentation

The XOML and Lua API have been fully documented in an over 200 page manual that accompanies the SDK. The latest version of this manual is also available at AppEasy XOML User / Programming Guide PDF. The C++ documentation has not yet been updated with all of the latest changes so will not be available for some time.

Apple iOS Wizard

You will find that a new tool has been added to the IwGame Engine called the Apple Wizard. This handy little tool is ideal for beginners or event veterans who sometimes forget the long winded and overly complex procedures involved in generating signing certificates requests, creating developer / distribution certificates, provisioning devices, creating App ID’s etc.. Well this little tool will walk you through the whole process so it can be done in minutes.

Support for Video Camera Streaming

You can now declare a new VideoCam tag in XOML which enables you to stream the users front / rear camera to an image then display that image as an actor. Check out the VideoCam example for a cool demo.

Audio Integration

We’ve moved sound effects into the XOML system properly so you can now include compressed wav files into your apps without the need to put them through the Marmalade resource manager. You can even host them on a web server and download them as and when required, just like any other resource.

Remote Requests

We’ve made it possible to construct POST and GET requests in XOML and send and receive responses from XOML / Lua. This is a very interesting new feature that enables communication with web based services declaratively.

Orphan Actors and Sprites

A number of users have made comment regarding not being able to depth sort child sprites, well we’ve found a workable solution for you that doesn’t break our API. You can now set actors as “Orphans” by adding Orphan=”true” to their declaration. An actor that is orphaned will be taken out of the normal sprite parent / child hierarchy allowing it to be depth sorted with parent regular actors

Percentage Based Positioning

It became apparent to us that as we had a percentage based sizing system in IwGame that we also needed a percentage based positioning system too, allowing truly device screen independent layouts. Actors can now be marked as percentage based by adding PercPos=”true”. When set, the actors position will be taken as a percentage instead of an absolute coordinate.

Multi-touch Actors

Actors can now handle up to 5 simultaneous Begin / End touch and Tapped events in XOML. This enables you to create some very interesting styles of app and game play as you can monitor and react to 5 touches at the same time.

Proper User-Agent

IwGameAds now gets a proper browser user-agent from the system for Android and iOS using the new UserAgent EDK extension. This should help increase ad fill rates substantially.

XML Pools have Gone, Woopeee!

I was never keen on the global XML pool system so we destroyed it, well not completely, we wanted to keep XML memory pooling but make it an automated process. The XML parser will now pre-scan an XML file and calculate how many tags / attributes are present then allocate just the right amount of pool memory.

Cool Brushes

Image brushes can now use clamping or tiling. Also, you can now set the UV’s of an image brush directly using the new UV attribute which accepts 8 numbers (topleft-uv, topright-uv, bottomright-uv, bottomleft-uv)

Web View Reworked

The Web View control has been reworked and can now display dynamic html content that can be set via XOML, Lua and C++.

Actions and Command

Actions and commands now accept XOML variables as parameters. Many new actions and commands have also been added, expanding the functionality of XOML substantially.

XOML Variables

XOML variables have had many changes including:
* Variables can now be made persistent so theri values are saved and restored between game sessions
* XOML array variables can now be populated from comma delimited data, elements will be split at commas
* Conditions can now be used on arrays for string searches, number comparisons etc..
* Added new system variable array called touches. This array of integers represents the x, y, touched status of 5 simultaneous touches

As you can see there’s been a huge number of changes, good luck with the update and happy coding.

Oh, please direct all XOML / Lua questions to our AppEasy forum at http://www.appeasymobile.com/forum

AppEasy – Coming Soon – Beta Testers Wanted

I would like to mention a new service that we plan to roll out very soon called AppEasy. AppEasy is a game and app development system that enables anyone to develop cross platform games and apps for iOS, Android (soon Samsung Bada and BlackBerry PlayBook) without the need for C++, Objective-C, Java or compilers / other SDK’s etc.. The AppEasy system involves using XOML and Lua (other script languages to be added soon) to create apps. To build an app you simply drag and drop all of your assets onto a web app, set some parameters for your game or app, such as icons, app name etc.. then hit deploy. Builds for each platform are then created that you can submit to the app stores. You can also hit a debug button to test your app locally. The system will be Windows only to begin with as we cannot gain elevated security permissions on Mac from Silverlight 5, we are still looking into options for Mac and Linux. If you are interested in beta testing this new service then get in touch with us at http://www.pocketeers.co.uk/?page_id=8. We are only offering a limited number of spots initially, so grab them whilst they are available. Now for a quick poll:

Is AppEasy something you are interested in?

View Results

Loading ... Loading ...

Whilst the pricing structure is not yet final, AppEasy will be priced competitively, although a free version will most likely be made available that embeds an Ad into deployed apps that generate revenue for us on start up. Money made from AppEasy will be spent on improving IwGame / AppEasy and other cool developer tool projects (such as the IwGame editor) that we have in the works.

If there is anything that you strongly agree / disagree with then please feel free to comment.

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:

<Image Name="ui_image" Location="ui.png" Preload="false" Blocking="true" Format="RGBA_8888" Filter="true" Tag="Level1" Condition="variable" />

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:

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

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:

<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>

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:

<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>

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

<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>

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>

Marmalade SDK Tutorial – Integrating LUA Script Language

This tutorial is part of the Marmalade SDK tutorials collection. To see the tutorials index click here

Its been a while since I wrote a Marmalade SDk tutorial and to be honest I’ve been itching for the chance to start them back up, so I freed up a little time today to bring you this new tutorial.

Ok, decided that it was high time that IwGame had a proper scripting language, so took a look around various scripting languages including LUA, Javascript and AngelScript. Whilst we like them all and would like to integrate them all at some point, our first choice is LUA.

And as I am a complete LUA noob I decided to write a short tutorial showing how to integrate LUA so a) everyone can see how “not so difficult” (had to avoid the word easy, because that would be wrong) it is to integrate LUA and b) so I don’t forget how to do it myself in the future

I have created a small Marmalade app called lua_test that demonstrates the following:

  • Execute a string containing lua commands
  • Load and execute a lua file from C
  • Load and execute a specific function in a lua file from C
  • Load a lua file that executes a C function

With these basics you should be able to integrate LUA into your own project quite easily.

I’m not going to pretend that I am now a LUA expert after spending but a few hours learning how to integrate it, but I know a few things now to be confident to write this tutorial.

Setting up the MKB to support LUA

The first thing you need to do is edit your projects MKB file and the following sections:

packages
{
    lua
}

subprojects
{
    lua
}

LUA is not distributed with Marmalade, instead it is downloaded from the code repository when you run your MKB file. When you open up your MKB file you will notice a new lua filter has been added

Note that the version of LUA that is supported by the Marmalade SDK is currently 5.1.4

LUA header files

In order to access LUA you need to include the headers. However as we are including C headers into a C++ app we need to let the compiler know. With that in mind we add the headers as follows:

// LUA headers
extern "C"
{
   #include "lua.h"
   #include "lauxlib.h"
   #include "lualib.h"
}

LUA State

LUA holds no global variables so the interpreters current state has to be stored somewhere where it can be accessed from your code. In our simple examples, we create the LUA state using lua_open() which returns a pointer to the state then close it when we have finished using lua_close(). Ideally you would want to manage this pointer to the LUA state, depending on the scope and lifetime of LUA scripts in your app. All of our examples start and end with:

// Open LUA
lua_State *lua = lua_open();

// Add LUA libraries (standard libraries are libraries of code that provide some basic functionality such as print)
luaL_openlibs(lua);                                        // See http://www.lua.org/manual/5.1/manual.html#luaL_openlibs

//
// Do something with LUA
//

// Shut down the lua state
lua_close(lua);                                            // See http://www.lua.org/manual/5.1/manual.html#lua_close

LUA Stack

LUA passes information between C and LAU code via a stack. To pass information to a LUA function from C you push the name of the function that you wish to call onto the stack followed by any parameters that you wish to pass. When the LUA function returns it returns any return values (LUA can return multiple values) or an error on the stack. Similarly when calling a C function from LUA, LUA pushes the parameters onto the stack then calls the C function. The C function examines the parameters on the stack (C does not remove them, LUA removes them when it returns) and utilises the data passed from LUA, carries out some logic and returns.

More info on the LUA stack can be found at http://www.lua.org/pil/24.2.html

Calling a string containing LUA from C

Here’s some example code showing how to execute a piece of LUA contained within a string:

void CallLuaString(const char* string)
{
	s3eDebugOutputString("==== Calling a LUA string");

	// Open LUA
	lua_State *lua = lua_open();

	// Add LUA libraries
	luaL_openlibs(lua);										// See http://www.lua.org/manual/5.1/manual.html#luaL_openlibs

	// Pass the string to lua to execute
	if (luaL_loadbuffer(lua, string, strlen(string), "line") == 0)	// See http://www.lua.org/manual/5.1/manual.html#luaL_loadbuffer
	{
		if (lua_pcall(lua, 0, 0, 0) != 0)
		{
			// Output the error
			s3eDebugOutputString(lua_tostring(lua, -1));

			// Pop error message off the stack
			lua_pop(lua, 1);								// see http://www.lua.org/manual/5.1/manual.html#lua_pop
		}
	}

	// Shut down the lua state
	lua_close(lua);											// See http://www.lua.org/manual/5.1/manual.html#lua_close
}

In this example, we open LUA then ad the standard LUA libraries. We then load the supplied string as a LUA chunk using luaL_loadbuffer() then call it using lua_pcall(). If an error occurs then we display the error and pop it off the stack

Calling a LUA file from C

Our next example looks at how to call a LUA file from C, lets take a look at the code:

void CallLuaFile(const char* lua_filename)
{
	s3eDebugOutputString("==== Calling a LUA file");

	// Open LUA
	lua_State *lua = lua_open();

	// Add LUA libraries
	luaL_openlibs(lua);										// See http://www.lua.org/manual/5.1/manual.html#luaL_openlibs

	// Load our test LUA file
	if (luaL_loadfile(lua, lua_filename) == 0)				// See http://www.lua.org/manual/5.1/manual.html#lua_load
	{
		if (lua_pcall(lua, 0, 0, 0) != 0)					// See http://www.lua.org/manual/5.1/manual.html#lua_pcall
		{
			// Output the error
			s3eDebugOutputString(lua_tostring(lua, -1));

			// Pop error message off the stack
			lua_pop(lua, 1);								// see http://www.lua.org/manual/5.1/manual.html#lua_pop
		}
	}

	// Shut down the lua state
	lua_close(lua);											// See http://www.lua.org/manual/5.1/manual.html#lua_close
}

We begin this example much like we did our previous example, but instead of load_buffer() we call luaL_loadfile(), which basically does the same thing except it loads the data from a file.

Calling a LUA function from C

This example gets a little more complicated as we need to begin dealing with pushing data onto the LUA stack. Lets take a look at the code:

void CallLuaFunctionInFile(const char* lua_filename, const char* function_name, double arg0, double arg1)
{
	s3eDebugOutputString("==== Calling a LUA function from C");

	// Open LUA
	lua_State *lua = lua_open();

	// Add LUA libraries
	luaL_openlibs(lua);										// See http://www.lua.org/manual/5.1/manual.html#luaL_openlibs

	// Load our test LUA file
	if (luaL_loadfile(lua, lua_filename) == 0)				// See http://www.lua.org/manual/5.1/manual.html#lua_load
	{
		// Init the loaded lua file
		if (lua_pcall(lua, 0, 0, 0) == 0)					// See http://www.lua.org/manual/5.1/manual.html#lua_pcall
		{
			// Push the name of the function that we want to call onto the stack
			// NB: LUA uses a stack to pass information back and forth between LUA and C (see http://www.lua.org/pil/24.2.html)
			lua_getglobal(lua, function_name);				// Push function name that we want to call ontothe stack (see http://www.lua.org/manual/5.1/manual.html#lua_getglobal)
			lua_pushnumber(lua, arg0);						// Push function call argument 1
			lua_pushnumber(lua, arg1);						// Push function call argument 2

			if (lua_pcall(lua, 2, 1, 0) != 0)				// See http://www.lua.org/manual/5.1/manual.html#lua_pcall
				s3eDebugOutputString(lua_tostring(lua, -1));
			else
			{
				if (!lua_isnumber(lua, -1))					// http://www.lua.org/manual/5.1/manual.html#lua_isnumber
					s3eDebugOutputString("Function muust return a value");
				else
				{
					// Get th result returned from the LUA function
					double result = lua_tonumber(lua, -1);
				}
			}
			lua_pop(lua, 1);								// see http://www.lua.org/manual/5.1/manual.html#lua_pop
		}
	}

	// Shut down the lua state
	lua_close(lua);											// See http://www.lua.org/manual/5.1/manual.html#lua_close
}

Much of the code remains the same as the previous example, where we initialise LUA, load a LUA file and execute it. The difference is that we now push an actual function name and a number of parameters onto the stack using lua_getglobal() and lua_pushnumber(). We then make another call to LUA which executes the LUA function that we just stacked, e then check the return value and if itis not a number we display an error otherwise we pop the returned number off the stack and store it locally.

Calling a C function from LUA

Things get a little more complicated when you find that you need to call C functions from LUA. The first thing that we need to do is let LUA know that our C function is available to be called as well as define a protocol for how it should be called from LUA. Lets take a look at an example:

static int test_function(lua_State *lua)
{
	double d = 0;
	// Get the argument that was passed from lua
	if (lua_isnumber(lua, 1))
		d = lua_tonumber(lua, 1);
	else
		s3eDebugOutputString("test_function can only accept a number");

	// Square it
	d = d * d;

	// Push the result back onto the stack as a return value
	lua_pushnumber(lua, d);

	// Return the number of result arguments that were passed back to lua
	return 1;
}

void CallCFunctionFromLua()
{
	s3eDebugOutputString("==== Calling a C function from LUA");

	// Open LUA
	lua_State *lua = lua_open();

	// Add LUA libraries
	luaL_openlibs(lua);										// See http://www.lua.org/manual/5.1/manual.html#luaL_openlibs

	// Push the test function
	lua_pushcfunction(lua, test_function);					// See http://www.lua.org/manual/5.1/manual.html#lua_pushcfunction

	// Set the global test_function to the pushed C function
	lua_setglobal(lua, "test_function");					// See http://www.lua.org/manual/5.1/manual.html#lua_setglobal

	// Load our test LUA file
	if (luaL_loadfile(lua, "lua_test3.lua") == 0)			// See http://www.lua.org/manual/5.1/manual.html#lua_load
	{
		if (lua_pcall(lua, 0, 0, 0) != 0)					// See http://www.lua.org/manual/5.1/manual.html#lua_pcall
		{
			// Output the error
			s3eDebugOutputString(lua_tostring(lua, -1));

			// Pop error message off the stack
			lua_pop(lua, 1);								// see http://www.lua.org/manual/5.1/manual.html#lua_pop
		}
	}

	// Shut down the lua state
	lua_close(lua);											// See http://www.lua.org/manual/5.1/manual.html#lua_close}
}

Firstly we create a C function called test_function() which is declared from LUA’s standard C function prototype:

static int test_function(lua_State *lua)

This function accepts a lua state which we can query for information that was passed to it by LUA (on the stack). In our example, we firstly check to see if the value on the top of the stack is a number, if not we display an error, if so then we retrieve that number. Next we modify the number then push it back onto the stack so that it can be retrieved (returned to) by the calling LUA function. Note that the value returned from our C function represents the number of arguments that we returned on the stack. Lets take a quick look at the LUA code that made the call to our C test_function in the first place:

d = test_function(12);
print(d);
d = test_function("hello");    -- This will cause an error because we passed a string instead of a number
print(d);

As you can see it calls test_function twice. The first time it is successful because we passed a number, the second time we passed a string which test_function() detected as an error.

Ok, lets now take a look at the code that registers our C function so that LUA can use it (see CallCFunctionFromLua() above)

Firstly we call lua_pushcfunction(lua, test_function); which places our C function onto the stack. Next we call lua_setglobal(lua, “test_function”); to assign the function an actual name that LUA script can use to call the function.

Well that’s about it. I have included the source code for the lua_test app which you can download from here

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:

        <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" />

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:

    <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>

Now we generate a grid to show the data:

        <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>

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:

        <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>

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:

    <Font Name="font1" Location="Serif.ttf" AutoPointSize="50" PointSize="0" Preload="true" />
    <Font Name="smallfont1" Location="Serif.ttf" AutoPointSize="60" PointSize="0" Preload="true" />

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.

IwGame Engine v0.32 Released – Data Bindings and Conditional Variables

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.

A lot of bugs (mostly minor) have been reported since the forum went live so we decided to release 0.32 now and push in-app purchasing to another future release (hopefully 0.33).

We finally got cOnnecticOns approved for BlackBerry PlayBook, its now on sale on BlackBerry App World. Version 2.0 also went live today for iOS on iTunes and for Android on the Android Market / Amazon. Not happy with Samsung however, the game has been knocked back on Bada 1 and 2 numerous times for minor issues that should be footnotes!

Ok, on with the changes, here is the list of changes for 0.32:

  • New XOML RemoveAllScenes action added – This will remove all scenes excluding the scene that is provided
  • Data bindings now added to XOML – You can now create a bindings list which pair properties up to variables. Changes made to those variables will bautomaticaly be applied to the object that they are bound to.
  • Actors and Scenes now support data bindings
  • Conditions variables now added to XOML – A condition variable allows you to string together some basic logic based on the value of other variables, these can then be attached to Actions to create conditional actions
  • Actions and Action groups now support conditional variables
  • IIwGameXomlResource now have parents
  • CIwGameString now supports encoding / decoding to / from hex
  • CIwGameSprite now has a RebuildTransformNow() method
  • CIwGameSprite now has an update method where the trabnsform will be rebuilt. This ensures that all transforms have been buuilt before rendering
  • CIwGameScene now has a PreDestroy() method which gets called when a request to destroy a scene is received
  • CIwGameActorImage now has a SetSrcRect() method
  • Added sound and music volume control to CIwGameAudio
  • CIwGameSound now accepts a paramater that allows you to specify volume, frequency and panning when playing a sound effect
  • BUG FIX: PNG lib fix for Visual Studio 2008
  • BUG FIX: Mac compile issues
  • BUG FIX: CIwGameSprite setScale() fixed
  • BUG FIX: Precision issues graphical glitches at lower resolutions
  • BUG FIX: Actor collilsion size now read corrctly from XOML
  • BUG FIX: CIwGameActorText text aligment now applie correctly
  • BUG FIX: When an actor or scene has a timeline attached, the first frame was not benig set before displaying the object
  • BUG FIX: CIwGameTextSprite hit test fixed
  • BUG FIX: CIwGameAds – VServ local now set correctly
  • BUG FIX: CIwGameScene – Initial camera transform is now built correctly
  • BUG FIX: CIwGameString::URLEncode now calculates correct buffer size
  • BUG FIX: CIwGameString::URLDecode now checks for the correct character
  • BUG FIX: Infinite loop removed from CIwGameXmlNode::GetAttribute()

The most exciting changes for us at least are the XOML data bindings and conditional variables / actions. They enable the creation of some very complex and ultra re-usable stuff. We are planning on starting a library of useful generic classes and XOML layout files that can be used as plug-ins to help create games and apps even quicker. Our first experiment with this is to create a set of XOML files and scene classes that handle ScoreLoop integration. If this is successful then we will release this as a plug-in library that you can simply drop into your own games and style with your own styles. Will blog about this in the near future.

XOML Data Binding

Data binding is the ability to map properties of objects to XOML variables. Changes to those variables will be immediately reflected in all properties of all objects that are bound. Lets take a look at a quick example:

We declare a global variable that holds a profile name:

    <Variable Name="ProfileName" Type="string" Value="None" />

Next we create a bindings set that contains a single property called “Text” that is bound to the “ProfileName” variable that we just defined:

    <Bindings Name="SC_ProfileBindings">
        <Binding Property="Text" Variable="ProfileName" />
    </Bindings>

We now attach our bindings list “SC_ProfileBindings” to a text actor:

    <ActorText Name="NameLabel" ......... Bindings="SC_ProfileBindings" />

Now if we change the ProfileName variable in XOML or in code, our NameLabel actor’s Text property will be automatically updated.

We opted to use independent binding lists (as opposed to in-line bindings as used in XAML / MXML) because they are re-usable, the same bindings list can be used across many objects. They are also much more readable as bindings are not intermingled with normal property values.

Note that if you also have a timeline animation that updates the same property then the timeline is given priority and the timeline will write over the binding value.

Binding lists can be attached to scenes and actors. The following properties can be bound:

CiwGameScene:

  • Position
  • Angle
  • Scale
  • Colour
  • Clipping
  • Timeline
  • Binding
  • Camera
  • Type
  • Active
  • Visible
  • AllowSuspend
  • AllowResume

CIwGameActor:

  • Position
  • Depth
  • Origin
  • Angle
  • Scale
  • Colour
  • Velocity
  • Angular Velocity
  • Timeline
  • Binding
  • Type
  • Active
  • Visible
  • Collidable
  • HitTest

CIwGameActorImage (in addition to those present in CIwGameActor):

  • Size
  • SrcRect
  • Image

CiwGameActorText (in addition to those present in CIwGameActor):

  • Text
  • Rect

Binding sets that are defined outside a scene will be assigned to the global resource manager, whilst bindings defined inside a scene will be assigned to the scenes resource manager.

Data bindings offer a way to create complex scenes and user interfaces without having to manually update the properties of the individual elements

Conditional Variables and Actions

XOML supports a new variable type called a condition variable. A condition variable is a variable that contains an expression that is defined by a list of variables, operators and values. Lets take a look at a quick example:

    <!--Create a bog standard int variable that contains the current level /-->
    <Variable Name="current_level" Type="int" Value="1" />

    <!--Create a condition variable that tests the current level is between 1 and 9 /-->
    <Variable Name="low_level_extras" Type="condition" Value="current_level GTE 1 AND current_level LT 10" />

We create an integer variable called current_level and assign it the value of 1. Next we create a new variable called “low_level_extras” that is of type “condition”. The most interesting part of our condition variables is the value, which is:

     current_level GTE 1 AND current_level LT 10

Unlike normal variables which contain constant values of some kind, condition variables contain dynamic expressions that are evaluated at run-time. The end result of a condition variable is always either true or false. The above expression in terms of C code would read like this:

     bool low_level_extras = (current_level >= 1 && current_level < 10);

Condition variables aren’t much use on their own and are usually used in conjunction with actions to provide conditional action functionality whereby an action or actions group will only be executed if a certain set of conditions are met. Lets take a look at a quick example:

    <Actions Name="NextScene">
       <Action Method="LoadXOML" Param1="MainScene.xml" />
       <Action Method="LoadXOML" Param1="LowLevelExtras.xml" Condition="low_level_extras" />
       <Action Method="KillScene" />
    </Actions>

The above actions group is called when we click a button to start a game. The actions group starts by loading the MainScene XOML file which creates the main game scene. Next the condition variable “low_level_extras” is checked to see if It is true, if current_level is between 1 and 9 then the variable will return true and the additional XOML file “LowLevelExtras” will be loaded. If however the current_level variable is less than 1 or greater than 9  then the additional XOML file will not be loaded.

This is just a very simple example showing how conditional actions can be used to re-use and extend XOML code.

And that’s it for this update. Thank you to all those who have downloaded cOnnecticOns on one platform or another and massive thanks to those who left us a review, you are awesome.