Вступительное слово

В сегодняшнем уроке мы разберём, как в PushButton Engine можно создавать объекты, управляемые клавиатурой. Если вы только начали изучение PushButton Engine (PBE), то, возможно, вам будет полезно прочитать урок #1, урок #2 и урок #3 из серии уроков про PBE. Так же вы всегда можете прочитать уроки в оригинальных статьях на официальном сайте.

Управление с помощью клавиатуры

«Человеческие существа, овощи или космическая пыль, все мы танцуем под таинственную мелодию, которую на расстоянии играет невидимый музыкант.» — Альберт Эйнштейн.

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

Как и предыдущие уроки, данный урок состоит из серии шагов: маленьких промежутков, которые будут фокусироваться на достижении небольших целей. Такой подход позволит ускорить процесс понимания PusButton Engine.

Этот урок будет полезен вам, если вы только начинаете изучать PBE. Но, несмотря на это, не обязательно, чтобы вы были новичком в программировании.

Содержание:
— Файлы для начала урока
— Вступление к уроку
— Создание компонента
— Проверка результатов работы
— Заключение

Файлы для начала урока

Чтобы начать изучение урока, вы можете скачать стартовый проект и использовать его, как базу для выполнения урока:

Набор для начала изучения урока

Если вы скомпилируете .swf файл из стартового набора для урока, то у вас должен будет появиться голубой круг в центре экрана.

Исходные файлы выполненного урока будут доступны в конце статьи.

Вступление к уроку

В предыдущем уроке мы научились создавать простой компонент-контроллер, который управляет персонажем, основываясь на поведенческой модели. Теперь, мы добавим нажатия клавиатуры, которые будут добавлять движения, контролируемые игроком.

Для того, чтобы упорядочить пользовательский ввод PBE предоставляет метод PBE.isKeyDown(), который проверяет, нажата ли сейчас какая-нибудь кнопка.

Для более сложных настроек ввода, таких как действия при сочетаниях клавиш или рассылка специальных событий для кнопок, PBE предоставляет классы InputManager и InputMap. Эти классы предоставляют более «сильный» функционал, но, обычно, они не нужны при создании простых игр. В этом уроке мы не будем обсуждать их.

Создание компонента

Так же, как и в предыдущем уроке мы опять создадим простую сцену с 3-мя простыми компонентами: компонент-рендера, «пространственный» компонент и компонент-контроллер. И, снова, мы создадим пользовательский компонент, который будет унаследован от класса TicketComponent, который обладает способностью «обновлять» себя на каждом кадре.

Этот новый компонент будет проверять, нажаты ли кнопки влево или вправо, и, если какая-то из них будет нажата, компонент будет перемещать объект.

Класс InputKey предоставляет возможность работы с большим количеством кнопок:

// Коды кнопок могут быть получены через статические константы класса InputKey InputKey.LEFT // Или с помощью строковых имён InputKey.stringToKey("LEFT") * This source code was highlighted with Source Code Highlighter.

В корневой директории урока вы найдёте заготовку для класса HeroControllerComponent. Чтобы добавить реагирование на события клавиатуры, при каждом вызове метода onTick() мы будем запрашивать у PBE проверку на нажате кнопок, нажатие которых нас интересует. Это можно сделать с помощью метода PBE.isKeyDown(), примерно следующим способом:

// Метод isKeyDown() возвращает булево значение, которое показывает, нажата сейчас проверяемая кнопка или нет (true — да, false — нет) if (PBE.isKeyDown(InputKey.SPACE)) { // Реакция на нажатие клавиши Logger.print(this, "Hey, cheer up!"); } * This source code was highlighted with Source Code Highlighter.

В зависимости от того, какая клавиша сейчас была нажата, мы изменяем положение пространственного компонента. Так же, как и в предыдущем уроке, мы будем получать ссылку на переменную положения пространственного компонента через класс PropertyReference, вносить изменения в соответствии с нашими правилами и устанавливать новое значение для данной переменной.

Правила, в соответствии с которыми мы будем изменять положение объекта:

1) Если нажата клавиша «Вправо»: передвигаем объект вправо
2) Если нажата клавиша «Влево»: передвигаем объект влево
3) Если объект вышел за правый край флешки: возвращаем объект к правому краю флешки
4) Если объект вышел за левый край флешки: возвращаем объект к левому краю флешки

Теперь, когда мы разобрали, как всё должно работать, мы можем реализовать это в коде. Измените класс HeroControllerComponent в соотвтествии с кодом, представленным ниже:

Путь к файлу: /src/HeroControllerComponent.as

package { import com.pblabs.engine.PBE; import com.pblabs.engine.components.TickedComponent; import com.pblabs.engine.core.InputKey; import com.pblabs.engine.entity.PropertyReference; import flash.geom.Point; /** * Класс, который умеет «обновлять» себя на каждом кадре с помощью метода onTick() */ public class HeroControllerComponent extends TickedComponent { // Переменная, которая будет сохранять ссылку на положение объекта public var positionReference:PropertyReference; public function HeroControllerComponent() { } /** * Функция, которая будет вызываться на каждом кадре. * * @param deltaTime время, прошедшее с предыдущего обновления. */ public override function onTick(deltaTime:Number):void { // Получаем ссылку на переменную положения объекта var position:Point = owner.getProperty(positionReference); // Проверяем, нажата ли кнопка «Вправо» if (PBE.isKeyDown(InputKey.RIGHT)) { // Передвигаем объект вправо position.x += 15; } // Проверяем, нажата ли кнопка «Влево» if (PBE.isKeyDown(InputKey.LEFT)) { // Передвигаем объект влево position.x -= 15; } // Если объект выходит вправо за пределы флешки if (position.x > 375) { // Возвращаем объект к правому краю position.x = 375; // Если объект выходит влево за пределы флешки }else if (position.x < -375) { // Возвращаем объект к левому краю position.x = -375; } // Устанавливаем положение объекта в соответствии с изменениями owner.setProperty(positionReference, position); } } } * This source code was highlighted with Source Code Highlighter.

Проверка результатов работы

После того, как вы скомпилируете флешку, вы должны будете увидеть .swf файл, содержимое которого должно быть похоже на скриншот ниже:

Заключение

Поздравляем, вы завершили урок 4 и научились добавлять реакции на пользовательский ввод.

Вы можете скачать все файлы, которые использовались в уроке по ссылке ниже.

Архив с исходниками урока

PushButton Engine Lesson #4: добавление управления к пользовательскому компоненту