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:

[poll id=”6″]

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.

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:

[sourcecode language=”cpp”]
// LUA headers
extern "C"
{
#include "lua.h"
#include "lauxlib.h"
#include "lualib.h"
}
[/sourcecode]

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:

[sourcecode language=”cpp”]
// 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
[/sourcecode]

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:

[sourcecode language=”cpp”]
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
}
[/sourcecode]

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:

[sourcecode language=”cpp”]
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
}
[/sourcecode]

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:

[sourcecode language=”cpp”]
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
}
[/sourcecode]

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:

[sourcecode language=”cpp”]
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}
}
[/sourcecode]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</Scene>

</xml>
[/sourcecode]

Mobile Game Engines: Interviews with Mobile Game Developers Book coming Soon

Jason Brownlee of MobileGamesEngines has written a new book based on his interviews with mobile game engine users. One of our very own interviews based on the Marmalade SDK will appear in the book. The book will be available very soon.

For more info take a look at Interviews With Mobile Game Developers web site.

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

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

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

Here is the latest list of changes:

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

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

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

User Interface

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

Here are the main features of IwGameUI:

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

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

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

Programs and Commands

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

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

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

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

Multi-touch in XOML

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

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

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

Array Variables, System Variables and Simple Bindings

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

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

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

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

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

Event Bubbling

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

Actor and sprite optimisations

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

Scene Virtual Canvas Sizing

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

Image filtering and format conversion

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

Licensing Terms Updated

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

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

IwGame Engine 0.35 coming this weekend with luck

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

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

 

Yet another IwGame Engine UI Progress Update

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

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

Heres a quick screen shot showing the current UI demo:

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

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

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

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

IwGame UI Progress Update

Got a quick update showing how the IwGame engines UI system is shaping up. Note that the UI system is “bitmap” based and IwGame does not draw things like buttons, grids etc.. manually. Here’s a quick screen shot at iPad resolution showing some basic UI:

Basic IwGame Engine UI Screenshot
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 is taking on New Mobile Projects


Pocketeers Limited Mobile Developer Logo
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