• 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

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 IwGame Engine has been in development for around 6 months now and although we’ve received lots of feedback regarding bug reports and feature requests we would like to know your opinions on the current state of the engine. Here are a few questions to consider:

• Is IwGame difficult to use, if so can you suggest any improvements that we could make to make it easier to use?
• How are you finding the current feature set? Is anything particularly buggy, hard to use or simply missing something?
• What’s the next BIG feature for you, what would you really like to see come next?
• How are you finding using XOML? Do you prefer the declarative approach or do you prefer to code things up in C++ instead. Can you suggest any improvements you would like to see?
• If you have recently stopped using IwGame, what made you leave? Was there a better option and if so, what was the deal making features?

This is the opportunity to have your say, any feedback that you can provide is greatly appreciated and will help steer the direction of the IwGame engine.

Mat

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.

Please consider leaving us a nice review, it only takes 2 mins!

Great news. cOnnecticOns is now available on the Apple iTunes app store. Woohoo, passed fist time!

It’s available for almost a kings ransom ($0.99 in earth money). For those of you that are as bad off as me, here are a few promot codes so you can grab a FREE copy:

3KYAR49RTMMM
LLHREAPKT6W3
FKA3R6L6PJPF
J6AN4AWK3T9F
ETTWL46PYE4W

Please consider leaving a nice review. It’s always nice to see a good review

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

Its been a tough week, my Apple Mac blew a gasket and refused to boot. Didn’t know this until I had spent 4 hours trying to make the Mac boot from Snow Leopard, but you cannot boot a Mac Mini from any version of the OS other than the original version that came with the Mac! Arrrgggghhhhh, insanity! In the end I turned my office and house upside down to find the original Mac disk.

Finally got cOnnecticOns cleaned up and submitted to the app stores. I also added 10 more levels and a game editor that allows players to create up to 20 of their own levels on-device and play them. I plan to allow sharing of these custom levels in a future version. We also added Facebook posting to IwGame and therefore has now been added to cOnnecticOns. You can find our more info about the game at http://appliter.com/apps/connecticons/connecticons.aspx

Ok, onto the update. IwGame v0.31 is kind of a special release because it contains the FULL source and assets of the game that you will see on Android Market and very soon Blackberry App World, Apple iTunes and SamsungApps for Bada.

Here’s the full list of changes for 0.31:

IwGame 0.31 Changes:

• cOnnecticOns full commercial game with source and assets provided as an example of engine usage
• CIwGameFacebook added – Currently provides login and wall posting access
• New AddVariable action added which allows you to add a positive or negative value to a XOML variable with limits
• New EnterValue action added that brings up the devices keyboard allowing the user to enter a value into a XOML variable
• New UpdateText action added will update a text actor with the value of a variable
• New Exit action added that allows the user to exit the game
• 3rd paramater added to XOML actions
• DoSleep added to CIwGameBox2dWorld to enable / disable object sleeping, also added to scene XOM
• IIwGameXomlResource now has an actual type, allowing type checking for exact object types
• OnKeyBack and OnKeyMenu events added to scene and XOML. These fire when back and menu keys are pressed
• BUG FIX: CIwGameSprite position and origin now 32 bit vectors, which helps prevent positions overflowing
• BUG FIX: When a scene is destroyed and it has touch focus it was causing a crash
• BUG FIX: If a scene becomes inactive or invisible it now loses touch focus
• BUG FIX: Velocity / angular velocity now applied when actors have no physics attached
• BUG FIX: JPEG image data is now correctly converted from BGR to RGB
• BUG FIX: CIwGameString, find index now properly reset

As well as the release of the full source for cOnnecticOns, we also snook a few extra col bits and bobs in there.

New CIwGameFacebook Class

The main purpose of this class is to allow the user to log into facebook and interact with it. Right know, only logging in and wall posting functionality is provided using the following method:

bool PostWall(const char* message, const char* link_uri, const char* image_uri, const char* name, const char* description);

• message – Message to display to the users wall visitors
• link_uri – URL that the user will visit when clicking on the wall post link
• image_uri – URL of an image that you would like to be displayed along with the post
• name – The title of the post
• description – Description of the post (displayed in weaker font beneath title)

A Facebook wall post will look something like this:

POst to Facebook Example

        <!-- Create change connecticons buttons -->
        <InertActor Name="ConnectButton2" Position="0, -200" Size="81, 84" SrcRect="555, 482, 81, 84" Image="sprites1">
            <ActorText Name="ConnectButton" Depth="0" Font="trebuchet_12" Rect="-100, -50, 200, 100" Colour="0, 0, 0, 255" Text="2" />
            <InertActor Name="DownButton" Position="-60, 0" Angle="-90" Size="48, 51" SrcRect="868, 299, 48, 51" Image="sprites1" Depth="0" OnBeginTouch="DownBeginTouch" OnEndTouch="DownEndTouch" OnTapped="DownTapped">
                <Actions Name="DownBeginTouch">
                    <Action Method="SetTimeline" Param1="buttonin4_anim" />
                    <Action Method="PlaySound" Param1="ui_tap" />
                </Actions>
                <Actions Name="DownEndTouch">
                    <Action Method="SetTimeline" Param1="buttonout4_anim" />
                </Actions>
                <Actions Name="DownTapped">
                    <Action Method="AddVar" Param1="EditorConnecticons" Param2="-1" Param3="0" />
                    <Action Method="UpdateText" Param1="ConnectButton" Param2="EditorConnecticons" />
                </Actions>
            </InertActor>
            <InertActor Name="UpButton" Position="60, 0" Angle="90" Size="48, 51" SrcRect="868, 299, 48, 51" Image="sprites1" Depth="0" OnBeginTouch="UpBeginTouch" OnEndTouch="UpEndTouch" OnTapped="UpTapped">
                <Actions Name="UpBeginTouch">
                    <Action Method="SetTimeline" Param1="buttonin5_anim" />
                    <Action Method="PlaySound" Param1="ui_tap" />
                </Actions>
                <Actions Name="UpEndTouch">
                    <Action Method="SetTimeline" Param1="buttonout5_anim" />
                </Actions>
                <Actions Name="UpTapped">
                    <Action Method="AddVar" Param1="EditorConnecticons" Param2="1" Param3="10" />
                    <Action Method="UpdateText" Param1="ConnectButton" Param2="EditorConnecticons" />
                </Actions>
            </InertActor>
        </InertActor>

The mark-up marked in red show the new AddVar and UpdateText XOML actions.

Basically when the user taps the DownButton actor the OnTapped event fires which calls the DownBeginTouch actions list. This actions list contains two actions:

AddVar – This adds -1 onto the EditorConnecticons variable and limits it to 0, so it does not go below 0.
UpdateText – The next action copies the value of the EditorConnecticons variable into the ConnectButton text actor, which updates the number of connecticons on screen.

Support for Android Back and Menu Buttons in XOML

It is now possible to attach actions in XOML to the menu and back button events in a scene by handling the OnKeyBack and OnKeyMenu events. Note that only the current scene will handle button events.

Text Input via XOML

Using the new EnterValue XOML tag you can bring up the device keyboard and allow the user to input some text into a XOML variable.

cOnnecticOns

As previously mentioned the full source to cOnnecticOns has been provided to enable developers to see a real working commercial game utilising IwGame. The first thing you will notice when looking at the code base is just how little code is actually there. This is because much of the mundane functionality such as creating layouts, handling events, creating animations, scenes etc.. are all handled by XOML. Please note that the supplied XOML is not optimised in way shape or form, in fact I have done many things long hand so as not to make the scripts convoluted and difficult to understand. When creating your own XOML you should probably focus more on re-use with templates, styles and global actions / animations etc..

Here is a brief overview of the provided XOML scripts:

• Actors – This file contains physics materials, shapes and game object templates
• Common – Contains common styles, animations and actions that are used across many scenes
• ConfirmDialog – This is the dialog box scene for the rest scores action, it is displayed to the user when they attempt to reset their records
• EditLevelSelect – Level selection screen that allows the user to select a custom level to edit
• Editor – The level editor scenes
• GameComplete – Shown to the player when they complete all zones and all rounds
• Help – The basic help dialog that is accessible from the main menu
• HUD – The in-game HUD that displays the scores and game buttons
• Intro – The IwGame intro that is displayed at game boot
• LevelCleared – The end of level score dialog that is displayed when the user completed or fails a round
• LevelSelect – Level selection screen that allows the user to select a level to play
• LevelSelect2 – Level selection screen that allows the user to play a custom level to play
• Menu – The main front-end menu scenes
• PauseMenu – The in-game pause men scene
• ZoneLocked – Dialog scene that is displayed when the player finishes round 10 but has not unlocked all levels in the zone
• ZoneSelect – Zone selection scene
• Scenes 1 to 30 – Game level scenes
• Scenes 101-120 – Custom blank level scenes

Note that some files contain more than one scene. For example, each game level file contains the pause menu, the main game level scene as well as the in-game HUD. The pause menu and HUD exist as separate XOML files so they can be re-used across all levels.

The code base contains implementations of the following custom scenes:

• EditScene – Level editor scene, contains level editor logic
• GameScene – A game level scene, contains game logic
• LevelSelectScene – Custom scene for level select that handles updating of the scores in the level screen
• ZoneSelectScene – Custom scene for zone select that handles updating of the lock / unlocked status of each zone

The following custom actors are also used:

• ConnectActor – An actor that connect two bugs together with minimal logic
• CounterActor – This is the main bug actor (originally called counters), handles all bug logic / collision etc
• FloaterActor – Handles floating / fading text
• GravityPlacerActor – Special actor that can be modified to change gravity within the editor
• InertActor – Basically an actor that doesn’t much other than display itself
• PlacerActor – A basic placeable object, used to position actors in the editor
• SelectorActor – A basic selector actor used by the editor object selection screen to select which object to place

The rest of the code is pretty bog standard stuff. Game is the implementation of CIwGame and contains initialisation and shut down. Probably the most interesting part is where the custom XOML classes and events are added using the following code:

	// Add custom classes to XOML system
	IW_GAME_XOML->addClass(new InertActorCreator());
	IW_GAME_XOML->addClass(new GameSceneCreator());
	IW_GAME_XOML->addClass(new LevelSelectSceneCreator());
	IW_GAME_XOML->addClass(new ZoneSelectSceneCreator());
	IW_GAME_XOML->addClass(new CounterActorCreator());
	IW_GAME_XOML->addClass(new PlacerActorCreator());
	IW_GAME_XOML->addClass(new GravityPlacerActorCreator());
	IW_GAME_XOML->addClass(new SelectorActorCreator());
	IW_GAME_XOML->addClass(new EditSceneCreator());

	// Add custom game actions to XOML system
	for (int t = 0; t < CIwGameXomlAction_Global::Action_Max; t++)
 		IW_GAME_XOML->addAction(new GameXomlAction_Global((GameXomlAction_Global::ActionType)t));

These custom actions and events allow us to tie our game logic much closer to our XOML code.

Well that’s it for this update. We were aiming to get conditional XOML actions in for 0.31, but unfortunately it didn’t make it, but should do for 0.32.