Pull to refresh

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

Adobe Flash

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



image

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

image

Обзор


Итак, теперь мы знаем, что для того, чтобы создать объект с помощью 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: добавление управления к пользовательскому компоненту
Tags:AS3FlashPushButton EngineИгрыУрокФреймворк
Hubs: Adobe Flash
Rating +12
Views 1.3k Add to bookmarks 18
Comments
Comments 18

Popular right now

UX/UI Дизайнер
from 60,000 to 90,000 ₽Software Solutions IncRemote job
Специалист по WordPress
from 80,000 to 110,000 ₽Software Solutions IncRemote job
UI/UX designer
from 80,000 ₽MircodКазань
TeamLead разработки (Ridero)
from 100,000 to 200,000 ₽JetStyleЕкатеринбургRemote job
Руководитель группы Team Lead на Unity Engine
from 120,000 ₽Ceramic 3DЕкатеринбург

Top of the last 24 hours