Play on QuickTiGame2d in Appcelerator Titanium. Part 1

Published on August 18, 2012

Play on QuickTiGame2d in Appcelerator Titanium. Part 1

Currently, a very promising direction in programming is cross-platform development. Having become acquainted with various means (Appcelerator Titanium, PhoneGap, moSync), I nevertheless give preference to Appcelerator Titanium.

Titanium allows you to create Android and iOS applications in JavaScript. Currently, the official website claims that the number of developers on this platform reaches 300,000.

An interesting point is that on Titanium you can create not only applications, but also full-fledged games for mobile devices.

I would like to draw your attention to the two-dimensional game engine module for Titanium Mobile - QuickTiGame2d, based on OpenGL ES, which currently supports development for Android and iOS. In this article we will consider the installation process, as well as the main points of this engine, and the next will directly describe the creation of a small cross-platform game.

First things first, you should download the latest libraries here : one for Android, one for iOS. At the time of this writing, the latest was version 1.2 (recently released 1.3).

In order to connect these libraries, place them in the appropriate directory. On Mac OS, it looks like this:

/Users/username/Library/Application Support/Titanium/modules/

There are two folders here: android, iphone. Everything is very simple: you need to copy the corresponding library into each of them.

Next, create a new project. Open tiapp.xml and add the appropriate code:

<modules>
 <module platform="iphone" version="1.2">com.googlecode.quicktigame2d</module>
 <module platform="android" version="1.2">com.googlecode.quicktigame2d</module>
</modules>

I met examples where it was written like this:

<module version="1.2">com.googlecode.quicktigame2d</module>

In my experience, this way of connecting libraries did not work.

That's it and ready to go. Let's look at the basic elements that are useful in this work. The first step is to create a “window” and connect QuickTiGame2d, then create a game screen. All in order:

var window = Ti.UI.createWindow({
backgroundColor : 'black'
});
var quicktigame2d = require('com.googlecode.quicktigame2d');
var game = quicktigame2d.createGameView();

Js files that are needed for the project are connected like this:

Ti.include('loadingScene.js');

An important factor is the location of the screen during the game. In order to describe this location, you should refer to each platform separately:

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 change the screen color:

game.color(0, 0, 0);

Add event handlers to it, for example:

game.addEventListener('onload', function(e) {
 ...
LoadingScene.init();
game.pushScene(LoadingScene.scene);
game.start();
});

Let's look at the events on the scene in more detail. You can highlight the main handlers, such as:

this.scene.addEventListener('activated', activated);
this.scene.addEventListener('deactivated', deactivated);
this.scene.addEventListener('onloadsprite', onloadsprite);

where activated, for example, will look something like this:

var activated = (function(self) {
return function(e) {
...
};
})(this);

In my opinion, the code explains itself: we prescribe the events that occur when the scene is activated, deactivated, and also when loading sprites onto the scene.

Screen tapping events are very useful:

game.addEventListener('touchstart', touchstart);
game.addEventListener('touchend', touchend);

Let's continue.

Do not forget that you need to add a game screen, like all elements, and also open the game window:

window.add(game);
window.open({fullscreen:true, navBarHidden:true});

Let's move on to the consideration of graphic and textual elements on the stage.

For starters, a simple example of adding a text element:

var scoreTextSprite = quicktigame2d.createTextSprite({
text : score,
fontSize : 64
});
scoreTextSprite.color(1, 0, 0);
scoreTextSprite.x = game.screen.width*0.4;
self.scene.add(scoreTextSprite);

Here the sprite text is created, the font size, color and its location along the x axis are set.

Creating a graphic sprite is as follows:

var sprite = quicktigame2d.createSprite({image:'images/sprite.png'});

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. Change the scale (both on two axes at once, and on each separately)

sprite.scale(5);
sprite.scaleBy(2, 3);

To arrange sprites on top of each other, there is a special value z = 0..99:

sprite.z = 1;
newSprite.z = 2;

Well, I think that will be enough for a start. I hope this article awakens the zeal for cross-platform game development and helps in these endeavors. At this stage, we still do not have a game, but in the next article we will talk about its creation.