Создание флеш-игры жанра платформер с помощью Flixel и Adobe Flex: старт

Вступление

Рынок флеш-игр в последнее время интенсивно развивается. Благодаря крупным игровым порталам kongregate, newgrounds, MochiMedia и другим каждый желающий может показать собственные игрушки большому числу игроков. И в дополнение, заработать на этом.

Благодаря существующим бесплатным фреймворкам каждый желающий может сделать игру (её прототип) в короткие сроки. Изучая «рынок» игровых фреймворков я остановил своё внимание на flixel. Он полностью бесплатен; обладает нужным мне функционалом; на нём можно делать мои любимые игры-платформеры. В дальнейших планах сделать на нём какой-нибудь платформер.

А пока, я решил перевести туториал Мэтью Касперсона — Creating a Flash platform game with Flixel and Flex, который описывает весь процесс разработки платформера: от добавления персонажа в игру до создания игрового окружения и врагов.

Начало

Flixel — популярный игровой движок, способный значительно облегчить разработку флеш-игр. Его создателем является Adam Atomic. На данном фреймворке написано множество популярных игр (ознакомиться с ними можно на официальном сайте).

Туториал поможет вам с созданием простых игр при помощи непосредственно Flixel и Adobe Flex. Для упрощения работы мы будем использовать инструментарий среды разработки Flex Builder (пробную 30-дневную версию можно скачать с сайта Adobe).

Первым делом скачаем сам архив фреймворка с сервиса GitHub и распакуем его в удобное место.

Затем создалим новый flex-проект в среде Flex Builder. Не забудьте указать путь файлов Flixel на компьютере в Flex Build Path.

Как обычно, для каждого нового приложения, создаём MXML файл:

Здесь мы определили, что наше будущее приложение будет иметь разрешение 640 на 480, и добавили функцию appComplete, вызывающую инициализацию.

Данная функция находится внутри элемента Script. В ней мы создали новый экземпляр класса FlixelGame, который был передан в конструктор нового экземпляра класса DisplayObjectUIComponent. Мы вынуждены использовать класс-посредник DisplayObjectUIComponent, потому что объекты Flixel базируются на флеш-классе Sprite, который не может быть добавлен в качестве потомка объекта в MXML приложении. Несмотря на тот факт, что функция addChild принимает DisplayObject в качестве параметра, будет вызвано исключение во время её выполнения, если объект для addChild не содержится в классе UIComponent. DisplayObjectUIComponent позволяет обойти это, потому что он содержится в классе UIComponent, и потом добавляет DisplayObject в качестве собственного потомка.

package
{
import flash.display.DisplayObject;
import mx.core.UIComponent;
public class DisplayObjectUIComponent extends UIComponent
{
public function DisplayObjectUIComponent(sprite:DisplayObject)
{
super ();
explicitHeight = sprite.height;
explicitWidth = sprite.width;
addChild (sprite);
}
}
}


Класс FlixelGame является наследником класса FlxGame библиотеки Flixel и служит для старта нашей игры.

package
{
import org.flixel.*;public class FlixelGame extends FlxGame
{
public function FlixelGame():void
{
super(320, 240, MenuState, 2, 0xff131c1b, true, 0xff729954);
help("Jump", "Shoot", "Nothing");
useDefaultVolumeControls(true);
}
}
}

Класс FlixelGame лёгок в понимании. Класс FlxGame инициализирует свойства игры.

Первые два параметра функции super — размеры игры. В данном случае — 320 на 240. Можно заметить, что это ровно половина размеров MXML приложения. Мы сделали такие размеры преднамеренно, так как следующим параметром является зум (увеличение), равный двум. Поэтому, каждый пиксель наших исходных изображений (графики) будет отображаться на мониторе как 4 пикселя (2 по вертикали и 2 по горизонтали). Такое масштабирование делает игру «пиксельной», подобно играм на старых восьмибитных консолях.

Параметр MenuState — ссылка на класс, который будет создан при инициализации. Flixel может переключаться между различным числом классов, будь-то экран меню, экран игры, экран победы и т. д. Класс MenuState будет создан позже, при инициализации меню.

Следующий параметр — цвет фона, в шестнадцатиричном формате (по аналогии с цветами HTML).

Далее идёт параметр true, который сообщает объекту класса FlxGame возможность показывать Flixel intro. Последний параметр показывает какой будет цвет логотипа Flixel в Intro.

Функция help определяет действия некоторых стандартных клавиш. X, C и клавиши со стрелками — стандартные клавиши во Flixel, хотя вы можете добавить и другие. Функция help позволяет добавить некоторые инструкции к этим клавишам.

Наконец, функция useDefaultVolumeControls содержит булево значение true в качестве параметра. Это значит, что мы можем использовать по умолчанию элементы управления громкостью звука.

Класс MenuState отвечает за экран с меню в игре. Он является наследником класса FlxGame и может использовать всю его функциональность.

package
{
import org.flixel.FlxSprite;
import org.flixel.FlxState;
public class MenuState extends FlxState
{http://habrahabr.ru/sandbox/add/#js-topic-form-title
[Embed(source="../media/title.png")]
protected var TitleImage:Class;
public function MenuState()
{
this.add(new FlxSprite(TitleImage));
}
}
}


Как можно заметить, это маленький класс. Мы вставляем изображение, которое будет отображаться в качестве фона. Затем создаём новый экземпляр класса FlxSprite и передаём изображение в качестве его параметра.

При запуске игры вы увидите экран с Flixel intro, затем игра переключится на экран меню.

Если нажать клавиши плюс или минус, на экране появится переключатель уровня громкости звука. Вы можете его менять.

Кроме того, при клике на закрытие приложения флеш игра перейдёт в режим паузы, появится экран помощи со стандартными клавишами.

Текст на дисплее можно менять в конструкторе класса FlixelGame при помощи функции help.

В следующем уроке мы начнём разработку настоящей игры жанра платформер.

Исходники и демо

Исходники можно скачать здесь, а демо можно посмотреть здесь.

P. S.:

В скором времени, планируются переводы остальных уроков из туториала. Надеюсь, эта информация вам в чём-то поможет. :)