Site navigation

Social networks

Contact us

Simple recipe for incredible creativity and efficiency with Titanium. Part 1

Nowadays cross-platform development seems to be a highly promising trend in programming. Having familiarized myself with different frameworks (Appcelerator Titanium, PhoneGap, moSync) my ultimate preference was for Appcelerator Titanium.

Titanium makes it possible to easily develop Android and iOS applications using JavaScript. The official website claims that currently the number of developers using this platform is already an impressive 300,000. It is worth mentioning that using Titanium, you can not only develop applications, but also create full-fledged games for mobile devices - a market which has enormous potential.

I'd like to draw your attention to a great two-dimensional game engine module for Titanium Mobile - QuickTiGame2d, based on OpenGL ES, which at present supports development for Android and iOS. Within this article we are going to scrutinize the setup process and examine the main features and opportunities this engine presents. Following articles will cover the creation of this little cross-platform game in more depth.

To include these libraries you should put them in to a relevant directory. On the Mac OS the folder structure looks like this:
/Users/username/Library/Application Support/Titanium/modules/

You will notice there are two directories: /android and /iphone. It's real easy to setup, just copy the libraries into their respective directories.
You are now ready to create a new project. Open tiapp.xml and add the following code:
<modules>
 <module platform="iphone" version="1.2">com.googlecode.quicktigame2d</module>
 <module platform="android" version="1.2">com.googlecode.quicktigame2d</module> </modules>
I also came across examples like this:
<module version="1.2">com.googlecode.quicktigame2d</module>
But from my experience this method does not function correctly so bite the bullet and copy the extra lines to be sure!

Everything is now ready for you to get going.  To begin, let's examine the main components that will be useful for the project. The first thing to do is to create a "window" and include QuickTiGame2d, and then afterwards you can create a game view. Step by step it looks as follows:
var window = Ti.UI.createWindow({
backgroundColor : 'black'
});
var quicktigame2d = require('com.googlecode.quicktigame2d');
var game = quicktigame2d.createGameView();
JS files necessary for the project should be included as well:
Ti.include('loadingScene.js');
The orientation of the screen while playing the game is of great importance; to describe the orientation you should address each platform in separate statements:
if (Titanium.Platform.osname === 'android') {
   game.orientation = Ti.UI.LANDSCAPE_LEFT;
   window.orientationModes = [Titanium.UI.LANDSCAPE_LEFT];
}else {
  game.orientation = Ti.UI.LANDSCAPE_RIGHT;
  window.orientationModes = [Titanium.UI.LANDSCAPE_RIGHT];
}
You can choose the color for the screen using this code:
game.color(0, 0, 0);
You can also add event handlers. For instance:
game.addEventListener('onload', function(e) {
 ...
LoadingScene.init();
game.pushScene(LoadingScene.scene);
game.start();
});
Let's examine the events of the scene in detail. There are some major handlers, such as:
this.scene.addEventListener('activated', activated);
this.scene.addEventListener('deactivated', deactivated);
this.scene.addEventListener('onloadsprite', onloadsprite);
where activated, for example, may look as follows:
var activated = (function(self) {
return function(e) {
...
};
})(this);
To my mind, the code itself makes everything clear - if it does no. We can describe the events that take place during activation/deactivation of the scene while adding sprites to the scene.
Touch events can be very useful:
game.addEventListener('touchstart', touchstart);
game.addEventListener('touchend', touchend);
Don't forget to add the game view as well as all the elements of the game and open the game window:
window.add(game);
window.open({fullscreen:true, navBarHidden:true});
Let's look more closely at some important functions:
There are a number of options when it comes to graphic and text elements in the scene. To begin with here is a simple example of a text element added to the scene:
var scoreTextSprite = quicktigame2d.createTextSprite({
text : score,
fontSize : 64
});
scoreTextSprite.color(1, 0, 0);
scoreTextSprite.x = game.screen.width*0.4;
self.scene.add(scoreTextSprite);
We have now created the text of the sprite, set its font size, color and its location on the x-axis.

The following code shows how to create a graphic sprite:
var sprite = quicktigame2d.createSprite({image:'images/sprite.png'});
Once created, you can perform various manipulations with sprites:

1. Hide and show
sprite.hide();
sprite.show();
2. Rotate
sprite.rotate(180);
3. Move
sprite.move(300, 500);
4. Scale (for both axes simultaneously and for each of the axes separately)
sprite.scale(5);
sprite.scaleBy(2, 3);
There is a special value where z = 0.99 used to place sprites one over another:
sprite.z = 1;
newSprite.z = 2;
Well, I think that's enough to start with for today - it's as much as my brain can manage for this afternoon and I don't want run before we can walk so please try out Appcelerator Titanium and you can look forward to my next installment when we will dig a little deeper and make you think a little harder. Maybe this will be the next mobile blockbuster who knows!
I hope this article has turned you on to cross-platform game development and will help you to get going and find your feet in mobile game creation. Although we do not have a game completed so far, we are well under way and will cover its development in detail during forthcoming articles - watch this space!
Andrey Kudievskiy

ABOUT

WEEZLABS

Not just another web and mobile apps development company!

WeezLabs is about dreaming big and helping our clients reach their full potential.

LEARN MORE

VISIT OUR OFFICE:

1848 Lincoln Blvd, Suite #100,
Santa Monica, CA 90404

TELL US HOW

WE CAN HELP

Call us 310.776.6234 or complete the form below.