В настоящее время весьма перспективным направлением в программировании является кроссплатформенная разработка. Познакомившись с различными средствами (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
