Play on QuickTiGame2d in Appcelerator Titanium. Part 1

Currently, a very promising direction in programming is cross-platform development. Acquainted with various means (Appcelerator Titanium, PhoneGap, moSync), I, nevertheless, give my preferences 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 module of the game engine for Titanium Mobile - QuickTiGame2d, based on OpenGL ES, which currently supports development for Android and iOS. In this article we will look at the installation process, as well as the main points of this engine, and the next one will directly describe the creation of a small cross-platform game.



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



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

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

Here are two folders: 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 method of connecting libraries did not work.



That's all ready to go. Let's look at the main elements that will be 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 as follows:

 Ti.include('loadingScene.js'); 

An important factor is the location of the screen in the process of 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. We can distinguish 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 register the events that occur during activation, deactivation of the scene, as well as when loading sprites to the scene.



Touch screen events are very useful:

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

We 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 us proceed to the consideration of graphic and text elements on the scene.



First, a simple example of adding a text item:

 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 you create the text of the sprite, set the font size, color and its location along the x axis.



Creating a graphic sprite looks like this:

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

You can make various manipulations with sprites:



1. Hide and show

 sprite.hide(); sprite.show(); 

2. Rotate

 sprite.rotate(180); 

3. Move

 sprite.move(300, 500); 

4. To change the scale (both along two axes at once, and each separately)

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

For the location of sprites on each other there is a special value z = 0..99:

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

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