Игра на QuickTiGame2d в Appcelerator Titanium. Часть 1

В настоящее время весьма перспективным направлением в программировании является кроссплатформенная разработка. Познакомившись с различными средствами (Appcelerator Titanium, PhoneGap, moSync), я, всё же, отдаю свои предпочтения Appcelerator Titanium.

Titanium позволяет создавать Android и iOS приложения на JavaScript. В настоящее время официальный сайт утверждает, что количество разработчиков на данной платформе достигает 300 000.

Интересным моментом является то, что на Titanium можно создавать не только приложения, но и полноценные игры для мобильных устройств.

Я бы хотела обратить ваше внимание на двухмерный модуль игрового движка для Titanium Mobile — QuickTiGame2d, основанный на OpenGL ES, который в настоящее время поддерживает разработку для Android и iOS. В данной статье мы рассмотрим процесс установки, а также основные моменты данного движка, а в следующей уже будет непосредственно описано создание небольшой кроссплатформенной игры.

Перво-наперво, стоит скачать последние версии библиотек здесь: одну для Android, одну для iOS. В момент написания данной статьи последней была версия 1.2 (недавно вышла 1.3).

Для того, чтобы подключить данные библиотеки, следует поместить их в соответствующую директорию. На Mac OS это выглядит так:

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

Здесь находятся две папки: android, iphone. Всё очень просто: нужно скопировать в каждую из них соответствующую библиотеку.

Далее создаем новый проект. Открываем tiapp.xml и добавляем соответствующий код:

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

Встречала примеры где было написано так:

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

На моём опыте такой способ подключения библиотек не действовал.

Вот всё и готово к работе. Давайте рассмотрим основные элементы, которые в этой работе пригодятся. Первым делом необходимо создать «окно» и подключить QuickTiGame2d, потом создать экран игры. Всё по порядку:


var window = Ti.UI.createWindow({
backgroundColor : 'black'
});


var quicktigame2d = require('com.googlecode.quicktigame2d');

var game = quicktigame2d.createGameView();

Js файлы, которые нужны для проекта подключаются так:

Ti.include('loadingScene.js');

Немаловажным фактором является расположения экрана в процессе работы игры. Для того, чтобы описать это расположение, следует обращаться к каждой платформе по отдельности:

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];
}

Можно менять цвет экрана:

game.color(0, 0, 0);

Добавлять на него обработчики событий, например:

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

Давайте рассмотрим события на сцене более подробно. Можно выделить основные обработчики, такие как:

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

где activated, к примеру, будет выглядять примерно таким образом:

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


На мой взгляд, код сам себя разъясняет: мы прописываем события, которые происходят при активации, деактивации сцены, а также при загрузке спрайтов на сцену.

Очень полезны события нажатия на экран:

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

Продолжим.

Не забываем и о том, что необходимо добавить игровой экран, как и все элементы, а также открыть окно игры:

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

Перейдем к рассмотрению графических и текстовых элементов на сцене.

Для начала, простой пример добавления текстового элемента:

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

Здесь создается текст спрайта, устанавливается размер шрифта, цвет и его расположение по оси х.

Создание графического спрайта выглядит следующим образом:

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

Можно производить различные манипуляции со спрайтами:

1. Скрывать и показывать

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

2. Вращать

sprite.rotate(180);

3. Перемещать

sprite.move(300, 500);

4. Изменять масштаб (как по двум осям сразу, так и по каждой в отдельности)

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

Для расположения спрайтов друг на друге существует специальная величина z = 0..99:

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

Что ж, думаю, для начала будет достаточно. Надеюсь, данная статья пробудит рвение к кроссплатформенной разработке игр и поможет в этих начинаниях. На данном этапе у нас еще нет игры, но в следующей статье мы поговорим о ее создании.

Автор: mkolenchukova