Pull to refresh

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

Reading time 7 min
Views 1.2K

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


«Если вы не контролируете свой разум, кто-то другой делает это.» — John Allston

image

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

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

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

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

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


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

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

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

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

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


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

«Начальный» набор для этого урока очень похож на результат урока #2, за исключением того, что шар сдвинут в левый верхний угол экрана, а точнее в координаты x = -375 и y = -275. Мы передвинули шар в эти координаты для того, чтобы он находился в левом-верхнем углу флешки. Обратите внимание на картинку, демонстрирующую систему координат нашей флешки.

image

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


Так же, как и в предыдущем уроке, мы настроим простую сцену. Объект героя будет иметь 3 компонента: компонент рендера, «пространственный» компонент и компонент-контроллер (DemoControllerComponent). Компонент-контроллер будет добавлять зигзагообразное движение к объекту шара, нечто подобное вы могли видеть в игре Space Invanders.

Для начала, нам нужно будет создать класс для нового компонента. Для того, чтобы наш новый компонент обладал базовыми свойствами компонентов, мы расширим класс для нового компонента от одного из стандартных классов. В качестве стандартного компонента, свойства которого мы будем использовать в этом примере, был выбран класс TickedComponent. Компоненты, которые будут расширены от класса TickedComponent «получат» метод onTick(), который будет вызываться 30 раз в секунду. Мы расположим логику передвижения в методе onTick().

Итак, каждые 33 миллисекунды, метод onTick() будет вызываться в компоненте-контроллере. Этот метод будет «смотреть» на положение родительского объекта (позиция будет получена из «пространственного» компонента), и потом добавлять небольшие изменения, для того, чтобы создать простое передвижение. Логика работы у компонента-контроллера будет следующей:

1) Если мы находимся в левом углу флешки:
1.1) Начать двигаться вправо.
1.2) Сдвинуть вниз.

2) Если мы находимся в правом углу флешки:
2.2) Начать двигаться влево.
2.3) Сдвинуть вниз.

3) В других случаях продолжаем двигаться в том направлении, в котором двигаемся сейчас.

Теперь, когда у нас есть план действий, нам нужно внедрить всё это в наш проект. Создайте новый файл в директории исходников вашего проекта, назовите его DemoControllerComponent.as и скопируйте в него следующий код:

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

package
{
    import com.pblabs.engine.components.TickedComponent;
    import com.pblabs.engine.entity.PropertyReference;

    import flash.geom.Point;

    // Создание TicketComponent, который может обновлять себя на каждом кадре с помощью метода onTick()
    public class DemoControllerComponent extends TickedComponent
    {
        // Переменная, котораябудет сохранять ссылку на переменную положения объекта
        public var positionReference:PropertyReference;
        
        // Переменная, которая будет запоминать направление движения объекта
        // 1 означает движение вправо, -1 означает движение влево
        private var direction:int = 1;
        
        public function DemoControllerComponent()
        {
            
        }
        
        // Метод onTick() будет вызываться каждый кадр
        public override function onTick(tickRate:Number):void
        {
            // Копируем позицию родительского объекта
            var position:Point = owner.getProperty(positionReference);
            
            // Если мы вышли за левый край экрана
            if (position.x < -375)
            {
                // Начинаем передвижение вправо
                direction = 1;
                
                // Сдвигаем объект вниз
                position.y += 20;
                
            // Если мы вышли за правый край флешки
            }else if (position.x > 375)
            {
                // Начинаем передвижение влево
                direction = -1;
                
                // Сдвигаем объект вниз
                position.y += 20;
            }
            
            // Изменяем координату по X в том направлении, в котором мы движемся
            position.x += direction * 5;
            
            // Устанавливаем положение «пространственного» объекта в соответствии с найденным положением
            owner.setProperty(positionReference, position);
        }
    }
}


* This source code was highlighted with Source Code Highlighter.


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

В конце метода createHero(), сразу за последним вызовом метода hero.addComponent(), нужно добавить следующие строчки кода:

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

// Создание компонента-контроллера
var controller:DemoControllerComponent = new DemoControllerComponent();
// Связывание компонента-контроллера с объектом. Связывание компонента-контроллера
// с информацией о положении объекта через «пространственный» компонент
controller.positionReference = new PropertyReference("@Spatial.position");

// Добавление компонента-контроллера к объекту героя под именем "Controller"
hero.addComponent( controller, "Controller");


* This source code was highlighted with Source Code Highlighter.


Мы закончили создание нового контроллера с именем DemoControllerComponent, а так же подключение его к объекту и связывание его с «пространственным» компонентом объекта.

Вот и всё! Теперь нам ничего не мешает скомпилировать и запустить флешку.

Заценить это всё в действии


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

image

Заключение


Поздравляем!!! Вы завершили урок #3, создали свой первый пользовательский компонент и увидели его работу в действии.

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

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

Ссылки на все уроки (будут пополняться по мере выкладывания уроков):


1) PushButton Engine Lesson #1: настройка FlashDevelop
2) PushButton Engine Lesson #2: добавление простой фигуры
3) PushButton Engine Lesson #3: добавление управления к пользовательскому компоненту
Tags:
Hubs:
+5
Comments 8
Comments Comments 8

Articles