Вступительное слово
Сегодня мы продолжим изучать 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: добавление управления к пользовательскому компоненту
