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

Heres a quick screen shot showing the current UI demo:

More Advanced IwGame Engine UI Screen Shot

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

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

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

Basic IwGame Engine UI Screenshot

This is just a static image however, so you cannot really see the animation that’s built into the UI, for that you need to take a look at a quick video I stuck together showing the UI in action at http://www.youtube.com/watch?v=oV3kYLbzcKo

The UI itself consists of the following elements:

•  StackPanels – The top left hand control is a vertical stack panel containing 3 horizontal stack panels. Each horizontal stack panel contains multiple basic UI components including buttons, labels and text input boxes. The check boxes and the long named button are toggle buttons. The top stack panel and the components within the panel have been draggable so they can be dragged away from the stack panel and moved around. Tapping the Expert check box will spin the control 360 degrees using an animation time line. One of the buttons and two of the check boxes also have animation time lines applied to them.
• Grid – The control to the bottom left is a 3×4 grid that contains 12 items. These items are simple label buttons that when tapped will animate. A XOML array variable is bound to the grid and data from the array is moved into the grid. Updating the XOML array will automatically update the grid elements. The types of elements within the grid are defined using an item template. You can create a grid manually by adding components directly to the grid in XOML or in code bypassing the binding system. This allows you to create more complex controls within each grid cell. Tapping an item in the grid will set it animating
• List box – The list box to the top right work on the same principles as the grid where data is bound to the list box and a template can be specified that defnies the type of items. This list box is a multi-select list box which allows you to select multiple  items
• List Box 2 – The list box to the bottom right is more complex list box that shows list items using a more complex control. The list box items in this instance are created using a horizontal stack panel, which contains a label and a button. The list box is a single item selection list box

The UI controls themselves can be moved around and placed anywhere in the scene. the whole scene can also be moved around.

To give you an idea as to how the XOML looks, here’s a short code clip showing the XOL that creates the list box to the upper right of the screen:

    <!-- Create a listbox --> 
    <!-- ListBoxItems - Defines a list of items that will be bound to the list box -->
    <Variable Name="ListBoxItems" Type="arraystring" Size="4" Value="Item 1, Item 2, Item 3, Item 4" />
    <!-- Create a template that will be used to generate the list box actors -->
    <Template Name="ListBoxItemTemp">
        <Label Name="ListItem$index$" Background="ListBoxItemBrush" BackgroundColour="200, 200, 200, 255" SelectedColour="80, 80, 255, 255" Font="trebuchet_12" TextColour="255, 255, 255, 255" SelectedTextColour="255, 255, 255, 255" Margin="0, 0, 20, 0" SelectType="toggle" Selected="false" />
    </Template>
    <ListBox Name="ListBox" Position="351, -190" Background="ListBoxBrush" MultiSelect="true" ItemsData="ListBoxItems" ItemsTargetType="text" ItemsTemplate="ListBoxItemTemp" HitTest="true" Draggable="true" />

As you can see its pretty straight forward:

• We create an array string variable and assign it the data that will be bound to the list box
• We create a template that represents our items
• We create a list box that uses the template and data and make it draggable

Well that’s it for now. We will be adding more and more features to the UI over the coming weeks and will keep you updated.

Pocketeers Limited Mobile Developer

Need a mobile game or app developed across multiple platforms (iPhone, iPad, Andriod,Bada, PlayBook etc..) at little extra cost? Or maybe you need a rapid prototype of your next game or app idea creating as proof of concept?

Pocketeers Limited a UK based mobile app and game developer (established in 2002) responsible for the creation of the IwGame Engine are looking to take on additional gaming and app projects. Pocketeers will consider any size project, but will favour those projects that utilise the IwGame engine / Marmalade SDK. Pocketeers have worked with clients large and small including the likes of Electronic Arts, Destination Software, Ideaworks, Honey Badger Studios, Tournay Software, and others.  Pocketeers provide a full range of services including design, coding, art work, audio and testing at very competitive prices.

For more details you can contact Pocketeers Limited via the web at http://www.pocketeers.co.uk/?page_id=8

Another job posting has come across my desk recently so here it is. A new start-up called Playalla is seeking a  C/C++ Marmalade SDK developer for a short term contract (around 3 months) to help them finish their word games. Playalla already have a prototype of their game up and running based on match-3 game play. Ideally they are looking for a developer that has previous experience with creating word games. The work can be carried out remotely so is ideal for a freelance game developer.

If you are interested then please send a few details about yuorself, your experience (games released etc..) to Wissam at wissamharoun@hotmail.com

Mat

If you have a spare 5-10 mins please consider leaving a review for the IwGame Engine at http://mobilegameengines.com/iphone/engines/40-iwgame-engine

And possibly also a review for the Marmalade SDK at http://mobilegameengines.com/iphone/engines/11-marmalade

A BIG thank you to anyone that gets the time to leave a review

http://itunes.apple.com/us/app/puzzle-friends/id513683800?ls=1&mt=8

Its FREE so grab a copy now and check it out. Please consider leaving a nice review if you like the game

The XML Schema for XOML can be downloaded from http://www.drmop.com/XOML.xsd

Updated versions of the Schema will also be included with the IwGame Engine from v0.35 onwards

To use the Schema in Visual Studio 2010, open your XOML file, right click somewhere on the page and select properties then go to the properties windows. Click in the Schemas box then click the small file selector to the right (this will open up all of the available XML schemas). If XOML.xsd is not already in the list then click the Add button which pops up the file select dialog. Select XOML.xsd and open it, this will place it in the XML schemas list. Now click in the Use column next to XOML.xsd and select “Use this schema” then click OK. Your document should now be validated against the XOML schema and you should have intellisense / auto-complete etc..

Note that there are a few restrictions, for example, the schema does not include support for custom actor / scene names or support for FromTemplate parameters. if you are XSD savvy enough to figure out how to add that support then please let us know (I personally have only spent one day working with XSD which was today so I’m still a little wet behind the ears). For the meantime, you may want to edit the XOML.xsd schema file and add them yourself. A quick and easy way to get the schema to recognise your custom named scenes is to edit XOML.xsd, go to the bottom of the file and you will see a group called TopLevel. Copy and paste the line that defines Scene and change the word Scene to the name of your own scene class, e.g:

<xs:element name=”Scene” type=”SceneType” />

<xs:element name=”MenuScene” type=”SceneType” />

To add a custom actor create a copy the ActorImage tag and rename the copy to your custom class name, e.g.:

<xs:element name=”ActorImage” type=”ActorImageType” />

<xs:element name=”FrogActor” type=”ActorImageType” />

For actors, you will also need to copy the same line to the ActorGroup (situated just below the TopLevel group)

Please note that this will not take into account your own custom parameters, for that you will need to add your own complex types and attributes to handle it.

Lastly, to add custom actions, go to the top of XOML.xsd to the ActionsEnum type and copy one of the existing actions, paste and replace your own action name, e.g:

<xs:enumeration value=”CustomAction1″ />

Well that’s it, hope the schema helps to make XOML more usable. Please let us know if you have any problems (don’t send me complex schema questions because I don’t have a clue )

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.

Well this release is a little earlier I’m afraid, we wanted to get UI functionality into 0.34, but 0.33 had a compile issue with the recent Marmalade 6.0 release so we decided to do a release now.

Below is the list of changes for IwGame 0.34:

• Fixed Marmalade 6.0 compile error
• JPEG loading support has been removed as this is now supported by Marmalade image classes
• New extensions system added (pass true for enable_extensions in IwGame::Init() to enable, enabled by default) – Extensions are none standard IwGame code that will be added over the coming months to support game specific features
• Actions now have a 4th parameter
• New modifier system added that allows you to add functionality units to actors and scene. This enables a build from blocks style development
• New AddModifier action that can be used to add a modifier to an actor or scene and modifier its behaviour in real-time
• New ChangeModifier action that can be used to change the active state or remove a modifier from an actor or scene
• Actors can now be marked as draggable. A draggable actor can be moved aruond by the user using their finger
• New SetProperty action added for actors. You can now directly change the properties of an actor using actions. Can also be used to add torque and force onto actors under control of the physics system
• New AddProperty action added for actors. This action can be used to add a value onto the peoperties of an actor
• IwGame now supports brushes in code and in XOML. Brushes can be created and attached to actors saving you from having to specify image and SrcRect for each actor. This enables actor styling across any actors
• CIwGameActorImage can now be instantiated from XOML using the ActorImage tag
• New XOML atlas inner tag added to animations to allow auto generation of sprite atlas frames
• Support has been added for joints (distance, revolute, prismatic, pulley and wheel joints are supported in code and in XOML)
• A scenes physics update can now be changed between constant time step and variable
• Box2D materials now support bullet, fixed rotation and gravity scaling parameters
• Checks for duplicates added to resources, variables, actions, modifiers, class creators
• New CIwGameActorConnector extension actor added – This actor will size and orientate itself so that it connects two static / dynamic points in space (can target moving actors)
• New CIwGameModFollowHeading modifier extension added – When added to an existing actor the actor can be controlled using headnig and speed instead of velocity
• CIwGameImage::CreatePNG() now supports RGBA_8888
• Two basic Hello World examples added, one that displays text in code and another that uses XOML
• BUG FIX: IwGameBox2d now coompiles on Mac without error
• BUG FIX: CIwGameBox2dBody::setFixture() now behaves as expected
• BUG FIX: Collision flags are now restored when turning an object from none collidable to collidable
• BUG FIX: Memory leak in CIwGameActorImage::SetSrcDest(), SetSrcRect() and SetDestSize()
• BUG FIX: Fixed problem with html parsing in CIwGameAds::ExtractLinkAndImageFromtHTML()
• BUG FIX: CIwGameImage::CreatePNG() crash bug fixed

Lots of changes and a few bug fixes for good measure. The most interesting changes include Box2D physics joints (been playing with them all week and they are awesome), the new modifiers system, draggable actors and the ability to set actor properties directly using actions. Lets look at some of these new changes in more detail:

Box2D Joints Support

Physics joints enable you to connect physical bodies together in a variety of ways. The following types of physical joints are currently supported:

• Distance – A distance joint limits the distance of two bodies and attempts to keep them the same distance apart, damping can also be applied
• Revolute – A revolute joint forces two bodies to share a common anchor point. It has a single degree of freedom and the angle between the two bodies can be limited. In addition a motor can also be applied to the joint
• Prismatic – A prismatic joint limits movement between the two bodies by translation (rotation is prevented). The translational distance between the two joints can be limited. In addition a motor can also be applied to the joint
• Pulley Joint – A pulley joint can be used to create a pulley system between two bodies so that when one body rises the other will fall.
• Wheel Joint – A wheel joint restricts one body to the line on another body and can be used to create suspension springs. A motor can also be applied to the joint

All joints share the same base class IIwGameBox2dJoint

Joints can be created in code and attached to a body using CiwGameBox2dBody::addJoint(). Joints can later be removed using removeJoint(). You can also search for existing joints using getJoint() and findJoint()

        <ActorImage Name="Crate1" ...... />
        <ActorImage Name="Crate2" ...... >
            <Joints>
                <Joint type="distance" ActorB="Crate1" OffsetA="0, 50" OffsetB="0, -50" Frequency="10" Damping="0" SelfCollide="true" />
            </Joints>
        </ActorImage>

The easiest way to create and attach joints is using XOML. Below is an example showing how to create and attach a distance joint between two crates:

Actor and Scene Modifiers

IwGame supports modifiers using the IwGameModfier system. Modifiers can be thought of as small functional building blocks that can be stacked in an actor or scene to extend the functionality of that actor or scene. For example, a typical modifier for a scene could be one that tracks the players scores / hi-scores, change day / night settings or detects special gestures. An actor modifier example could be a modifier that allows the actor move around using heading and speed or even a modifier with functionality specific to your game such as make a baddy that walks left and right on a platform. The idea is to allow developers to build games and apps up from smaller re-usable building blocks and be able to add them using code or XOML. Below is a quick example showing how to attach a modifiers list to an actor in XOML:

     <ActorImage Name="Baddy1" ....... >
          <Modifiers>
              <Modifier Name="AddThrustMod" Active="true" Param1="1" />
              <Modifier Name="ShootPlayerWhenClose" Active="true" Param1="1" />
          </Modifiers>
     </ActorImage>

Here we have added two modifiers to the Baddy1 actor which modify its behaviour. Note that up to 4 parameters can be passed to the modifier

Modifiers can also be attached in code like this:

    // Find the modifiers creator
    IIwGameModifierCreator* creator = IW_GAME_MODS->findCreator("addthrustmod");
    if (creator != NULL)
    {
        // Create an instance of the modifier
        IIwGameModifier* mod = creator->CreateInstance();
        if (mod != NULL)
        {
            // Set up the instance
            mod->setName("addthrustmod");
            mod->setActive(true);
            mod->setParameter(0, "1");

            // Add the modifier to the actor
            actor->getModifiers()->addModifier(mod);
        }
    }

Draggable Actors

Any actor can now be set as draggable, allowing the user to tap it and drag it around the world. You can make any actor draggble in XOML by adding Draggable=”true” to its definition.

Setting / Updating Actor Properties from XOML

Its now possible to set or update actor properties directly from an action in XOML. Using the new SetProperty / AddProperty actions

Extensions System

From v0.34 of IwGame a new optional extensions system has been added. The extensions system is basically a collection of actors, scenes, actions, modifiers and other elements that are not part of the base IwGame engine. The extensions system provides support for game specific objects and other functionality that can be used to make creating specific types of games much easier. There’s not many extensions available yet but many more will be added in the future

IwGame Usage Changes

Please note the recent changes that have been applied to IwGame Usage. The new usage terms are shown below:

You are free to use IwGame in your projects in part or in whole as long as the header comments remain in-tact. Whilst you are not obliged to mention your usage of IwGame in your products it would be great and beneficial to let us know as we can publicise your product on our blog and other web sites / services (Our blog receives over 200,000 hits per month) However, if you use any part of the IwGame extensions system, which includes extension actors, extension scenes or extension modifiers then you are required to mention usage of the IwGame Engine in your product.

You may not claim the IwGame engine or its documentation as your own work or package it up and include it in any kind of middleware product without express prior written notice from an executive of Pocketeers Limited with the correct authority to grant authorisation. You may not publicly host any source code that is part of the IwGame Engine, the source will be hosted at http://www.drmop.com/index.php/iwgame-engine/

These changes apply to all versions of the IwGame Engine.

Well that’s it for this update

//#include “pngstruct.h”

Ok, its not often I look in my email box and find good news, but today I saw an email from Marmalade announcing Marmalade 6.0. I took a quick look over the changes list and the new features and it looks pretty awesome. I’m a little disappointed that there’s no native web deployment, but there’s plenty of other cool features to be playing with including:

• Web Marmalade – You can now develop apps with HTML5 / CSS3 and Javascript. Marmalade have used the same standard as Phone Gap to make it compatible (smart move IMO). This is pretty awesome in itself, but to be honest I’m waiting for the full native bridge exposure and documentation. You wont be making any real time smooth arcade style games with 6.0 but its great for apps and none arcade style game development. Either way I’m going to be getting my hands dirty with Javascript (the most lawless language on Earth )
• iPad retina support
• New native UI enhancements including Toolbar, Table, Picket / Listbox , Tab / Tap Group, Activity indicator and Navigation bar
• New Mac anehancements such as support accelerometer and location in the simulator
• And a mass of bug fixes, including the notorious Facebook extension which has been upgraded to the latest on  Facebook SDK for iOS. Also native support for JPEG images

To see the full list of changes check out Marmalades web site at https://www.madewithmarmalade.com/marmalade/whats-new

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.

I can tell you one thing, testing in-app purchasing from scratch is NOT an easy task, in fact its a pain in the a** to be quite honest. However, like anything that’s cool its worth doing. Its been a while coming but we finally put together a unified API for in-app purchasing on the Android and iOS platforms. To see the end product in action check out Puzzle Friends on Android (the new name for the free version of cOnnecticOns (I must have been off my head when I invented the name cOnnecticOns ). The iOS version is currently with the great Apple reviewers in the sky.

Ok, here is the list of changes for 0.33:

• In-app purchasing added for Android and iOS (IwGameMarket)
• Scenes can now be augmented after they have been created (like partial classes)
• Scenes can now be layered visually
• New SetAllTimelines action added to XOML that will set the timeline of all scenes
• SetVariable action now allows you to specify the scene in which the variable lives
• Resources can now be tagged with a tag name
• New RemoveResource and RemoveResources actions that allow removal of resources from global resource manager
• New CallActions action added that enables execution of other actions lists
• Actor now has ScaleX and ScaleY bindings
• Relative actor depth is now 0 for linked actors
• UDID removed from IwGameAds for iOS
• Scenes now have a ClipStatic property that will force the clipping area of a scene to stay in place on screen instead of moving with the scenes camera
• BUG FIX: Scene NotifyResuming now called properly
• BUG FIX: CIwGameAnimInstance::setAnimation() no longer crashes if NULL is passed
• BUG FIX: IwGameAdsView sprites are now updated correctly

The most interesting addition this update is the well hidden IN-APP PURCHASING for iOS and Android. With the aid of copy and paste lets take a look at the changes in more detail:

IwGameMarket – Unified In App Purchasing API for iOS And Android

Its an incredibly tough job to get noticed in the app stores these days with approaching half a million apps available in the larger stores (insane competition), its an even tougher job persuading Joe public to part with their money for your app. Many developers are turning to developing freemium titles as a means to increase visibility (app users are much more likely to download a free app) and earn money by offering the app in a limited form then allowing users to purchase additional content and game features. As of IwGame v0.33, basic in-app purchasing is now available for iOS and Android using a wrapper around Marmalade’s EDK in-app purchase extensions called IIwGameMarket.

IIwGameMarket is a not a concrete class however so you cannot just create one and use it. Instead it provides a basic interface for creating the platform specific market class as well as access to common functionality. At the moment the following marker classes are available:

CIwGameMarketiOS – Uses iOS in-app purchasing
CIwGameMarketAndroid – Uses Android market billing
CIwGameMarketTest – This version is a test class that you can use to simulate purchases / errors etc in the simulator.

IwGameMarket is designed to allow you to initialise and set-up and use in-app purchasing in a platform agnostic fashion, allowing you to query / purchase content very easily.

IwGameMarket works using a product list system, where you create and add CIwGameMarketProduct products to the IwGameMarket. Each CIwGameMarketProduct represents a single consumable / none consumable product that can be purchased.

Setting up the IwGameMarket is very simple, you simply call IIwGameMarket::Create() which initialises the correct market for the platform that your game or app is running on then set-up a few handlers, depending upon which messages you want to handle. Below shows a quick example:

IiwGameMarket::Create("Your android public key");
IIwGameMarket::getMarket()->setReceiptAvailableHandler(PurchaseComplete, NULL);
IIwGameMarket::getMarket()->setErrorHandler(PurchaseError, NULL);
IIwGameMarket::getMarket()->setRefundHandler(Refunded, NULL);	// Android only

Note that if you are releasing for iOS only then you do not need to supply your Android Market public key, simply pass no parameters to Create().

In this example, we have told IwGameMarket that we want to be notified when a purchase receipt is available, when an error occurs or when a transaction refund has happened.

When done with the market don’t forget to clean it up using:

IIwGameMarket::Destroy();

Now that the market is set-up we need to add products, below shows a quick example:

// Which OS are we running
int os = s3eDeviceGetInt(S3E_DEVICE_OS);

// Create product 1
CIwGameMarketProduct* product = new CIwGameMarketProduct();
product->Consumable = true;
product->ID = 1;
product->Name = "10 Coins";
if (os == S3E_OS_ID_IPHONE)
	product->ExternalID = "com.companyname.gamename.coinsx10";
else
	product->ExternalID = "coinsx10";
product->Purchased = false;
IIwGameMarket::getMarket()->addProduct(product);

// Create product 2
product = new CIwGameMarketProduct();
product->Consumable = true;
product->ID = 2;
product->Name = "50 Coins";
if (os == S3E_OS_ID_IPHONE)
	product->ExternalID = "com.companyname.gamename.coinsx50";
else
	product->ExternalID = "coinsx50";
product->Purchased = false;
IIwGameMarket::getMarket()->addProduct(product);

In this example, we create 2 products, our first represents 10 in-game coins, whilst the second represents 50 in-game coins. The ExternalID property is the product ID as defined in the in-app purchase section of your app in iTunes Connect for iOS or the product id of the in-app purchase in the in-app purchase section of your Android Market product control panel for Android. ID can be anything you like but will need to be unique.

Now that the system and product set-up are out the way, lets take a look at how to purchase a product. Firstly you need to call PurchaseProduct() passing in the ID defined in the CIwGameMarketProduct that you added earlier:

if (IiwGameMarket::getMarket()->PurchaseProduct(product_id))
{
}

You then need to add code to the callbacks that we added in our set-up:

int32 MarketScene::PurchaseComplete(void* caller, void* data)
{
	int type = IIwGameMarket::getMarket()->getLastPurchaseID();
	if (type == 1)	// 10 coins
	{
		GAME->AddCoins(10);
	}
	else
	if (type == 2)	// 50 coins
	{
		GAME->AddCoins(50);
	}

	return 1;
}

int32 MarketScene::PurchaseError(void* caller, void* data)
{
	// Display an error to the user

	return 1;
}

int32 MarketScene::Refunded(void* caller, void* data)
{
	// Only available on th Andriod platform
	CIwGameString id = IW_GAME_MARKET_ANDROID->getRefundedID();

	// Player was refunded so take back the items(s)

	return 1;
}

Augmenting Scenes

Another cool new feature in v0.33 is the ability to augment a previously created scene and add extra stuff to it after the fact. You can for example have a basic common scene that provides the basic background of the scene. This gets loaded by many other scenes and serves as its basic background. After its been loaded you can declare the scene a 2nd time and add additional elements which will then be integrated into the original scene.

Layered Scenes

Scenes can now be depth sorted (visually only). This is incredibly useful as previously scenes would always be drawn in the order in which they were added to the game class. There is no limit to the layer number of a scene.

Tagged Resources

Resources can now be given a tag name, allowing you to identify groups of resources. New actions have also been added that allow the removal of specific resources or groups of tagged resources from the global resource manager. We added this new features because we found that sometimes it is very useful to have resources in the global resource manager so they can be shared across scenes, but later needed a way to remove those resources when done with them.

Calling Actions Lists

Its now possible to call an actions list from an action. This is great if you want to define lots of different action sets then pick and choose which ones you want to use.

And that’s it for this update, please enjoy.