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

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

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

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

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

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

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

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

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

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

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

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

В этом примере мы добавим все наши объекты и компоненты «вручную». PushButton Engine обладает клёвыми инструментами для создания уровней в XML и загрузки их, но в целях упрощения, в этом уроке мы будем создавать наши объекты и компоненты средствами ActionScript.

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

В текущем уроке мы добавим 2 объекта, каждый из которых будет обладать 2-мя компонентами. Первым объектом будет наша сцена, а вторым — наш герой.

Давайте продолжим редактирование исходного файла:

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

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

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

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

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

Теперь мы создадим объект героя. Объект героя, так же как и объект сцены, будет обладать 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");
}

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

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

Обзор

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

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

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

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

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

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

Заключение

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

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