PushButton Engine Lesson #2: добавление простой фигуры

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

Сегодня мы продолжим изучать PushButton Engine (PBE) и узнаем, как в PBE создавать свои объекты и компоненты. Статья является переводом 2-го официального урока по PushButton Engine, в которой рассказывается про работу с компонентами PBE и создание простых фигур.

PushButton Engine Урок #2: добавление простой фигуры

«Чем выше должно быть ваше здание, тем ниже должно быть его основание» — Святой Августин

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

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

Содержание:
— Файлы для начала урока
— Загрузка начального проекта
— Редактирование исходных файлов
— Заценить это всё в действии
— Обзор
— Заключение

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

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

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

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

Загрузка начального проекта

Опираясь на урок #1 вам нужно будет распаковать содержимое архива в нужную папку и убедиться, что проект компилируется у вас. Это даст вам «базовый» проект, с которым вы сможете дальше работать.

Теперь мы можем приступить к настройке простой сцены PushButton Engine, а так же добавить на сцену круг, который будет отрисовываться в центре.

Редактирование исходных файлов

На первый взгляд, наш проект выглядит, как обычный Flash проект без содержимого.

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

[SWF(width="800", height="600", frameRate="60")]
public class Lesson2Base extends Sprite
{
    public function Lesson2Base()
    {
        // Запускаем работу PBE
        PBE.startup(this);
    }
}

* This source code was highlighted with Source Code Highlighter.

В начале мы настроим SceneView, который представляет собой «полотно», на котором будут отрисовываться объекты, созданные на сцене.

Теперь мы создадим саму сцену (Scene), через вызов вспомогательной функции PBE.initializeScene:

/**
* Создание сцены.
*/
private function createScene():void
{
    // Создание сцены
    var sceneView:SceneView = new SceneView();
    sceneView.width = 800;
    sceneView.height = 600;
    
    // Это вспомогательная функция, которая настроит простую сцену
    PBE.initializeScene(sceneView);
}

* This source code was highlighted with Source Code Highlighter.

Теперь мы создадим объект героя. Объект героя, так же как и объект сцены, будет обладать 2-мя компонентами.

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

Второй компонент — это компонент рендера (отрисовки): она регистрирует самого себя в менеджере рендера и «говорит» менеджеру, как объект должен быть показан на экране. В текущем уроке мы будем использовать простое изображение круга, но PBE предоставляет гораздо больше возможностей.

/**
* Создание объекта героя.
*/
private function createHero():void
{
    // Создание объекта для аватара героя
    var hero:IEntity = PBE.allocateEntity();
    
    // Создание «пространственного» компонента
    var spatial:SimpleSpatialComponent = new SimpleSpatialComponent();
    
    // Установка пространственного положения героя в координаты 0,0
    spatial.position = new Point(0,0);
    // Установка размеров героя в 50,50
    spatial.size = new Point(50,50);
    spatial.spatialManager = PBE.spatialManager;
    
    // Добавление к герою пространственного компонента под именем "Spatial"
    hero.addComponent(spatial, "Spatial");
    
    // Создание и настройка рендера для отображения объекта
    var render:SimpleShapeRenderer = new SimpleShapeRenderer();
    render.fillColor = 0x0000FF0;
    render.isCircle = true;
    render.lineSize = 2;
    render.radius = 25;
    render.lineColor = 0x000000;
    // Привязка компонента рендера к конкретной сцене
    render.scene = PBE.scene;
    
    // «Связывание» компонента рендера с объектом пространственного компонента, для получения информации о положении
    render.positionProperty = new PropertyReference("@Spatial.position");
    // «Связывание» компонента рендера с объектом пространственного компонента, для получения информации о вращении
    render.rotationProperty = new PropertyReference("@Spatial.rotation");
    
    // Добавление к герою компонента рендера под именем "Render"
    hero.addComponent(render, "Render");
    
    // Регистрация объекта под именем "Hero"
    hero.initialize("Hero");
}

* This source code was highlighted with Source Code Highlighter.

Мы уже многого добились! Если вы сейчас скомпилируете проект, вы должны будете увидеть объект на экране!

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

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

Обзор

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

// Создаём сущность
var newEntity:IEntity = PBE.allocateEntity();

// Добавляем компоненты и устанавливаем свойства (код пропущен)

// Ригистрируем объект в PBE под именем "EntityName"
newEntity.intialize("EntityName");

* This source code was highlighted with Source Code Highlighter.

Для создания компонентов потребуется написать немного больше кода:

// Создаём новый компонент
var newComponent:IEntityComponent = new WhateverComponent();
// Устанавливаем настройки компонента
newComponent.field = value;
// Добавляем компонент к объекту под именем "TheComponentName"
newEntity.addComponent(newComponent, "TheComponentName");

// Повторяем эти действия для каждого компонента и его свойств

* This source code was highlighted with Source Code Highlighter.

Заключение

Ура! Вы только что завершили урок #2. В ходе этого урока вы добавили свои первые объекты и компоненты в игру и увидели результаты своей работы! Будущие уроки будут более сложными, но мы надеемся, что уроки помогут вам разобраться с PBE.

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

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

От переводчика

Перевод второго урока подошёл к концу, не могу сказать, что этот урок, в купе с уроком #1 рассказал нам много про PBE, но, надеюсь, дальше будет интереснее и мы поймём все прелести работы с PBE.

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

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