Добавление простой фигуры в PushButton Engine (второй урок)

Добавление простой фигуры в PushButton Engine (второй урок)

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

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);
	}
}

В этом примере мы добавим все наши объекты и компоненты «вручную». .

Обычно, в рамках 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");
}

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

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


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

Обзор


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

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

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

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

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

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

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

Заключение


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

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



Полный цикл уроков:
Изучение игрового фреймворка на примере PushButton Engine
Добавление простой фигуры в PushButton Engine
Микрошаги в изучении PusButton Engine
Управление объектами в PushButton Engine с помощью клавиатуры
Инструменты для работы с изображениями в PushButton Engine

Источник: Flashist.ru

Подборка лучших дизайнов и шаблонов сайтов:

Не удалось обработать запрос

Не удалось обработать запрос

Вы можете вернуться на начальную страницу или повторить попытку.