Фреймворк

PushButton Engine: Урок #1

admin — Fri, 18 Jun 2010 15:47:58 +0400

И вот я задумался об изучении какого-нибудь игрового фреймворка, для создания, не поверите, ИГР!!! Да, да, именно фреймворка, а не движка, так как хотелось бы, чтобы фреймворк предоставлял определённый функционал по облегчению создания игр, который не могут и, наверно, не должны, предоставлять игровые движки (фреймворк — управление страницами, стандартизация создания уровений и т.п., а движок — это поиск столкновений и «эмуляция» физики движения объектов). В общем, моё желание сподвигнуло меня на изучение какого-нибудь фреймворка, и, в качестве пробы я решил выбрать PushButton Engine, о котором я слышал уже давно, но как-то всё не приходилось его опробовать.

Время для перевода

В качестве отправной точки для изучения PushButton Engine я для себя выбрал уроки, представленные на сайте PushButton Engine. И подумалось мне, почему бы не поделиться переводом с другими людьми? Сказано — сделано, и ниже пойдёт перевод 1-го урока по PushButton Engine. Если у вас есть желание, то вы всегда можете ознакомиться с уроком в оригинале.

PushButton Engine Lesson #1 - настройка FlashDevelop

Привет, в этом уроке вы узнаете как можно использовать PushButton Engine с FlashDevelop.

Содержание:
- Требования к уроку
- Настройка FlashDevelop
- Создание нового проекта
- Библиотека
- Исходники
- Hello, World!
- Обзор
- Заключение
- Файлы

Требования к уроку:
Для того, чтобы выполнить этот урок, вам нужно скачать и установить несколько программ:
1) Adobe Flash 10 Project Content Debugger - Скачать
2) Adobe Flash 10 Debug Player - Скачать - Установка
3) Adobe Flex 3 SDK - Скачать - Чтобы установить, просто распакуйте архив в нужную директорию.
4) FlashDevelop - Скачать - Установка
5) PushButton Engine - Скачать - Чтобы установить, просто распакуйте архив в нужную директорию.

Настройка FlashDevelopх

Когда вы запустите FlashDevelop в первый раз после установки, вам необходимо будет указать путь к Flex SDK. Для того, чтобы сделать это вам необходимо зайти в меню программы Tools->Program Settings, в открывшемся окне необходимо будет выбрать пункт AS3Context и кликнуть на нём. В списке параметров (ближе к концу списка) нужно будет найти пункт «Flex SDK Location» (см. скриншот). Тут необходимо будет вписать путь или выбрать в окне проводника нужную папку с Flex SDK (та папка, куда вы распаковали Flex SDK архив).

Теперь FlashDevelop готов к разработке ActionScript или Flex приложений.

Создание нового проекта

Теперь нам нужно настроить проект для урока. Кликните в меню на пункт Project->New Project. У вас откроется окно с различными типами проектов для FlashDevelop. Для этого урока нам необходимо создать AS3 Project (выберите этот пунект в списке типов проектов). Назовите его Lesson1FlashDevelop и укажите нужную папку. Можно нажимать OK и двигаться дальше =)

Теперь мы должны задаться вопросом: «планируем ли мы использовать PushButton Engine как есть или мы будем изменять исходный код PushButton Engine».

Если вы планируете использовать PushButton Engine как есть, то пропустите раздел «Исходники» и перейдите к разделу «Библиотека». прим. переводчика: «в принципе, если вы не знакомы с азами работы FlashDevelop, то ничего плохого в прочтении раздела „Исходники“ не будет в любом случае, даже если вы планируете править исходники PushButton Engine».

Если вы планируете работать с исходным кодом PushButton Engine, то пропустите раздел «Библиотека» и перейдите к разделу «Исходники». прим. переводчика: «как и в предыдущем случае, если вы не очень знакомы с FlashDevelop, то вам будет только на пользу прочитать раздел „Библиотека“».

Библиотека

С нашими текущими настройками мы можем начать разработку «чистого» ActionScript или Flex, на выбор. В этом уроке мы будем создавать «чистый» ActionScript проект, но вам ничего не мешает создать Flex проект. Чтобы использовать PushButton Engine нам нужно указать ссылку на файл PBEngine.swc в нашем проекте. Так давайте сделаем это сейчас!

Откройте папку, в которую вы распаковали PushButton Engine. Найдите папку Bin, в ней нужно найти файл PBEngin.swc и скопировать его в папку lib внутри созданного FlashDevelop проекта.

Далее вам нужно будет открыть окно FlashDevelop, в правой части окна вам нужно будет переключиться на вкладку «Project», найдите в этой вкладке папку lib, а внутри ней скопированный файл FBEngine.swc, кликните на нём правой кнопкой и выберите пункт «Add To Library». Этим действием мы каг-бэ говорим FlashDevelop, что мы хотим использовать данную .swc библиотеку в нашем проекте.

Исходники

Для того, чтобы наш FlashDevelop проект мог работать с исходниками PushButton Engine, нужно указать путь к исходным файлам PushButton Engine. Кликните правой кнопкой мыши на названии вашего проекта во вкладке «Project», обычно название находится в самом верху, и выберите пункт «Properties». В открытом окне нужно перейти на вкладку «Classpath», в ней нужно будет нажать на кнопку «Add Classpath…» и в диалоговом окне указать путь к папке src, которая находится в папке с разархивированными файлами PushButton Engine.

Теперь нам нужно установить несколько настроек компилятора для работы с PushButton Engine. Для этого кликните правой кнопкой мыши на названии вашего проекта во вкладке «Project», выберите пункт «Properties» и перейдите на вкладку «Compiler Options». Далее в строку «Additional Compiler Options» необходимо добавить строку «--keep-as3-metadata+=TypeHint,EditorData,Embed» (без кавычек) и нажать OK.

Hello, World!

Всё клёво =) Теперь настало время для написания кода!

В окне FlashDevelop кликните на вкладке «Project», если она ещё не открыта. В папке src будет находиться файл Main.as (он создаётся автоматически FlashDevelop). Кликните по нему правйо кнопкой мышки и переименуйте его в Lesson1FlashDevelop.as

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

// ...
package
{
  // Flash Imports
  import flash.display.Sprite;
  
  // PushButton Engine Imports
  import com.pblabs.engine.PBE;
  import com.pblabs.engine.debug.Logger;
     
  public class Lesson1FlashDevelop extends Sprite
  {
    public function Lesson1FlashDevelop():void
    {
      PBE.startup(this);
      Logger.print(this, "Hello, World!");
    }
  }   
}

Этот код представляет собой минимальное приложение для PushButton Engine. Когда мы скомпилируем приложение (Ctrl+Enter) в панеле «Output» должно будет появиться примерно следующее сообщение:

INFO: Lesson1FlashDevelop - Hello, World!

Так давайте же скомпилируем флешку и протестируем всё. Нажмите на пункт меню Project->Test movie (или Cntr+Enter) и, если мы не допустили ошибок, у нас должно будет появиться сообщение во вкладке «Output».

Обзор

Итак, кратко перечислим необходимые действия, для создания минимального приложения:
1) Создать новый FlashDevelop проект (Project->New Project).
2) В качестве типа проекта необходимо указать AS3 Project.
3.а) Чтобы начать работу с .swc библиотекой PushButton Engine, вам нужно скопировать файл PBEngine.swc в папку lib вашего проекта. После этого нужно будет кликнуть правой кнопкой мышки по .swc файл и выбрать пункт «Add To Library».
3.б) Чтобы начать работу с исходниками PushButton Engine, необходимо указать путь к папке src, внутри папки, куда вы разархивировали PushButton Engine, а так же задать настройки компилятора в настройках FlashDevelop проекта.

Заключение

Поздравляем вас! Вы только что завершили урок #1 и знаете, как создавать проекты для работы с PushButton engine.

Знания, полученные в данном уроке помогут вам в выполнении будущих уроков.

Файлы

Вы можете скачать все файлы, которые использовались в уроке по ссылке ниже.

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

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

Вот и закончился первый урок. Надеюсь, это будет хорошим началом к изучению PushButton Engine. Если вы, пока ещё, не имеете опыта работы с FlashDevelop, то, думаю, что вам будет полезно ознакомиться со статьёй про создание Flash приложений в FlashDevelop.

PushButton Engine Урок #2

admin — Wed, 23 Jun 2010 17:28:21 +0400

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

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

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

После компиляции у вас должен будет появиться .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.

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

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

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

PushButton Engine Урок #3

admin — Thu, 01 Jul 2010 00:27:35 +0400

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

«Если вы не контролируете свой разум, кто-то другой делает это.» — John Allston

В ходе этого урока мы добавим пользовательский компонент, который будет передвигать простую заливку по экрану. Если вы только начали изучение PushButton Engine (PBE), то, возможно, вам будет полезно прочитать урок #1 и урок #2 из серии уроков про PBE. Так же вы всегда можете прочитать уроки в оригинальных статьях на официальном сайте.

Этот урок будет полезен вам, если вы только начинаете изучать PBE. Но, несмотря на это, не обязательно, чтобы вы были новичком в программировании.

Содержание:
- Файлы для начала урока
- Вступление к уроку
- Создание компонента
- Коннектимся
- Заценить это всё в действии
- Заключение

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

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

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

Если вы скомпилируете .swf файл из стартового набора для урока, то у вас должен будет появиться голубой круг в левом-верхнем углу флешки.

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

Вступление к уроку

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

«Начальный» набор для этого урока очень похож на результат урока #2, за исключением того, что шар сдвинут в левый верхний угол экрана, а точнее в координаты x=-375 и y=-275. Мы передвинули шар в эти координаты для того, чтобы он находился в левом-верхнем углу флешки. Обратите внимание на картинку, демонстрирующую систему координат нашей флешки.

Создание компонента

Так же, как и в предыдущем уроке, мы настроем простую сцену. Объект героя будет иметь 3 компонента: компонент рендера, «пространственный» компонент и компонент-контроллер (DemoControllerComponent). Компонент-контроллер будет добавлять зигзагообразное движение к объекту шара, нечто подобное вы могли видеть в игре Space Invanders.

Для начала, нам нужно будет создать класс для нового компонента. Для того, чтобы наш новый компонент обладал базовыми свойствами компонентов, мы расширим класс для нового компонента от одного из стандартных классов. В качестве стандартного компонента, свойства которого мы будем использовать в этом примере, был выбран класс TickedComponent. Компоненты, которые будут расширены от класса TickedComponent «получат» метод onTick(), который будет вызываться 30 раз в секунду. Мы расположим логику передвижения в методе onTick().

Итак, каждые 33 миллисекунды, метод onTick() будет вызываться в компоненте-контроллере. Этот метод будет «смотреть» на положение родительского объекта (позиция будет получена из «пространственного» компонента), и потом добавлять небольшие изменения, для того, чтобы создать простое передвижение. Логика работы у компонента-контроллера будет следующей:

1) Если мы находимся в левом углу флешки:
1.1) Начать двигаться вправо.
1.2) Сдвинуть вниз.

2) Если мы находимся в правом углу флешки:
2.2) Начать двигаться влево.
2.3) Сдвинуть вниз.

3) В других случаях продолжаем двигаться в том направлении, в котором двигаемся сейчас.

Теперь, когда у нас есть план действий, нам нужно внедрить всё это в наш проект. Создайте новый файл в директории исходников вашего проекта, назовите его DemoControllerComponent.as и скопируйте в него следующий код:

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

package 
{
	import com.pblabs.engine.components.TickedComponent;
	import com.pblabs.engine.entity.PropertyReference;

	import flash.geom.Point;

	// Создание TicketComponent, который может обновлять себя на каждом кадре с помощью метода onTick()
	public class DemoControllerComponent extends TickedComponent
	{
		// Переменная, котораябудет сохранять ссылку на переменную положения объекта
		public var positionReference:PropertyReference;
		
		// Переменная, которая будет запоминать направление движения объекта
		// 1 означает движение вправо, -1 означает движение влево
		private var direction:int = 1;
		
		public function DemoControllerComponent()
		{
			
		}
		
		// Метод onTick() будет вызываться каждый кадр
		public override function onTick(tickRate:Number):void
		{
			// Копируем позицию родительского объекта
			var position:Point = owner.getProperty(positionReference);
			
			// Если мы вышли за левый край экрана
			if (position.x < -375)
			{
				// Начинаем передвижение вправо
				direction = 1;
				
				// Сдвигаем объект вниз
				position.y += 20;
				
			// Если мы вышли за правый край флешки
			}else if (position.x > 375)
			{
				// Начинаем передвижение влево
				direction = -1;
				
				// Сдвигаем объект вниз
				position.y += 20;
			}
			
			// Изменяем координату по X в том направлении, в котором мы движемся
			position.x += direction * 5;
			
			// Устанавливаем положение «пространственного» объекта в соответствии с найденным положением
			owner.setProperty(positionReference, position);
		}
	}
}

Теперь, когда мы создали новый компонент, наступило время для того, чтобы добавить его в нашу игру! Мы добавляем компонент-контроллер таким же способом, как добавлялись другие компоненты в уроке #2.

В конце метода createHero(), сразу за последним вызовом метода hero.addComponent(), нужно добавить следующие строчки кода:

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

// Создание компонента-контроллера
var controller:DemoControllerComponent = new DemoControllerComponent();
// Связывание компонента-контроллера с объектом. Связывание компонента-контроллера
// с информацией о положении объекта через «пространственный» компонент
controller.positionReference = new PropertyReference("@Spatial.position");

// Добавление компонента-контроллера к объекту героя под именем "Controller"
hero.addComponent( controller, "Controller");

Мы закончили создание нового контроллера с именем DemoControllerComponent, а так же подключение его к объекту и связывание его с «пространственным» компонентом объекта.

Вот и всё! Теперь нам ничего не мешает скомпилировать и запустить флешку.

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

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

Заключение

Поздравляем!!! Вы завершили урок #3, создали свой первый пользовательский компонент и увидели его работу в действии.

Вы можете скачать все файлы, которые использовались в уроке по ссылке ниже.

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

PushButton Engine Урок #4

admin — Tue, 06 Jul 2010 23:09:15 +0400

В сегодняшнем уроке мы разберём, как в PushButton Engine можно создавать объекты, управляемые клавиатурой. Если вы только начали изучение PushButton Engine (PBE), то, возможно, вам будет полезно прочитать урок #1, урок #2 и урок #3 из серии уроков про PBE. Так же вы всегда можете прочитать уроки в оригинальных статьях на официальном сайте.

Управление с помощью клавиатуры

«Человеческие существа, овощи или космическая пыль, все мы танцуем под таинственную мелодию, которую на расстоянии играет невидимый музыкант.» — Альберт Эйнштейн.

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

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

Содержание:
- Файлы для начала урока
- Вступление к уроку
- Создание компонента
- Проверка результатов работы
- Заключение

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

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

Если вы скомпилируете .swf файл из стартнового набора для урока, то у вас должен будет появиться голубой круг в центре экрана.

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

Вступление к уроку

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

Для того, чтобы упорядочить пользовательский ввод PBE предоставляет метод PBE.isKeyDown(), который проверяет, нажата ли сейчас какая-нибудь кнопка.

Для более сложных настроек ввода, таких как действия при сочетаниях клавиш или рассылка специальных событий для кнопок, PBE предоставляет классы InputManager и InputMap. Эти классы предоставляют более «сильный» функционал, но, обычно, они не нужны при создании простых игр. В этом уроке мы не будем обсуждать их.

Создание компонента

Так же, как и в предыдущем уроке мы опять создадим простую сцену с 3-мя простыми компонентами: компонент-рендера, «пространственный» компонент и компонент-контроллер. И, снова, мы создадим пользовательский компонент, который будет унаследован от класса TicketComponent, который обладает способностью «обновлять» себя на каждом кадре (см. урок #3).

Этот новый компонент будет проверять, нажаты ли кнопки влево или вправо, и, если какая-то из них будет нажата, компонент будет перемещать объект.

Класс InputKey предоставляет возможность работы с большим количеством кнопок:

// Коды кнопок могут быть получены через статические константы класса InputKey
InputKey.LEFT
// Или с помощью строковых имён
InputKey.stringToKey("LEFT")

В корневой дирректории урока вы найдёте заготовку для класса HeroControllerComponent. Чтобы добавить реагирование на события клавиатуры, при каждом вызове метода onTick() мы будем запрашивать у PBE проверку на нажате кнопок, нажатие которых нас интересует. Это можно сделать с помощью метода PBE.isKeyDown(), примерно следующим способом:

// Метод isKeyDown() возвращает булево значение, которое показывает, нажата сейчас проверяемая кнопка или нет (true — да, false — нет)
if (PBE.isKeyDown(InputKey.SPACE))
{
	// Реакция на нажатие клавиши
	Logger.print(this, "Hey, cheer up!");
}

В зависимости от того, какая клавиша сейчас была нажата, мы изменяем положение пространсвтенного компонента. Так же, как и в предыдущем уроке, мы будем получать ссылку на пременную положения пространственного компонента через класс PropertyReference, вносить изменения в соответствии с нашими правилами и устанавливать новое значение для данной переменной.

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

1) Если нажата клавиша «Вправо»: передвигаем объект вправо
2) Если нажата клавиша «Влево»: передвигаем объект влево
3) Если объект вышел за правый край флешки: возвращаем объект к правому краю флешки
4) Если объект вышел за левый край флешки: возвращаем объект к левому краю флешки

Теперь, когда мы разобрали, как всё должно работать, мы можем реализовать это в коде. Измените класс HeroControllerComponent в соотвтествии с кодом, представленным ниже:

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

package 
{
	import com.pblabs.engine.PBE;
	import com.pblabs.engine.components.TickedComponent;
	import com.pblabs.engine.core.InputKey;
	import com.pblabs.engine.entity.PropertyReference;

	import flash.geom.Point;
    
	/**
	 * Класс, который умеет «обновлять» себя на каждом кадре с помощью метода onTick()
	 */
    public class HeroControllerComponent extends TickedComponent
    {
		// Переменная, которая будет сохранять ссылку на положение объекта
        public var positionReference:PropertyReference;
		
		public function HeroControllerComponent()
		{
			
		}
		
		/**
		 * Функция, которая будет вызываться на каждом кадре.
		 * 
		 * @param	deltaTime время, прошедшее с предыдущего обновления.
		 */
        public override function onTick(deltaTime:Number):void
        {
			// Получаем ссылку на переменную положения объекта
			var position:Point = owner.getProperty(positionReference);
			
			// Проверяем, нажата ли кнопка «Вправо»
			if (PBE.isKeyDown(InputKey.RIGHT))
			{
				// Передвигаем объект вправо
				position.x += 15;
			}
			
			// Проверяем, нажата ли кнопка «Влево»
			if (PBE.isKeyDown(InputKey.LEFT))
			{
				// Передвигаем объект влево
				position.x -= 15;
			}
			
			// Если объект выходит вправо за пределы флешки
			if (position.x > 375)
			{
				// Возвращаем объект к правому краю
				position.x = 375;
				
			// Если объект выходит влево за пределы флешки
			}else if (position.x < -375)
			{
				// Возвращаем объект к левому краю
				position.x = -375;
			}
			
			// Устанавливаем положение объекта в соответствии с изменениями
			owner.setProperty(positionReference, position);
		}    
	}
}

Проверка результатов работы

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

Заключение

Поздравляем, вы завершили урок 4 и научились добавлять реакции на пользвоательский ввод.

Вы можете скачать все файлы, которые использовались в уроке по ссылке ниже.

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

PushButton Engine Урок #5

admin — Sun, 18 Jul 2010 15:07:12 +0400

В сегодняшнем уроке мы разберём, какие инструменты для работы с изображениями предоставляет PushButton Engine. К слову, инструменты для встраивания изображений, которые предоставляются разработчиками PBE действительно выглядят очень удобными. Только пожалуйста, не забывайте указывать настройки компилятора, которые были описаны в уроке #1, иначе, у вас могут возникнуть проблемы с встраиванием графики в этом уроке.

Если вы только начали изучение PushButton Engine (PBE), то, возможно, вам будет полезно прочитать урок #1, урок #2, урок #3 и урок #4 из серии уроков про PBE. Так же вы всегда можете прочитать официальные уроки на английском языке.

Использование и встраивание изображений

«A novel is never anything but a philosophy put into images» - Альберт Камю (к сожалению, у меня не получилось найти перевод данной фразы =(

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

Содержание:
- Файлы для начала урока
- Вступление к уроку
- Разбираемся, что к чему
- Встраивание графики
- Проверка результатов работы
- Подытожим
- Заключение

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

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

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

Вступление к уроку

Все предыдущие уроки ограничивали себя показыванием простых цветов и фигур. В этом уроке мы начнём изучать, как можно органзиовать отображение и встраивание картинок.

Техническое примечание: существует несколько различных способов встроить графику в компилируемый Flash файл. В этом уроке мы сосредоточимся на встраивании графики используя ActionScript и мета-тег [Embed], так как это является наиболее универсальным способом встраивания, доступным в Flash CS4 или других инструментах основанных на работе с ActionScript/Flex.

Примечание от переводчика: на мой взгляд нужно стараться избегать использование мета-тега [Embed], до «крайних» ситуаций, в которых другие способы встраивания внешних файлов в проект не подходят. Встраивание графики не является «крайней» ситуацией и её можно заменить удобным способом встраивания графики через .swc библиотеку. Основным приемуществом .swc библиотк перед мета-тегом [Embed] является типизация встраиваемой информации и удобная «структруизация» всех файлов в одном месте. В общем, несмотря на заумные слова, работа с .swc библиотеками достаточно проста и удобна, поэтому я всем настоятельно советую работать именно с этим способом встраивания графики. Далее, в ходе перевода мы урока мы будем использовать встраивание через [Embed], но это связано только с тем, что в исходном уроке был использован именно этот способ.

Разбираемся, что к чему

Почти весь функционал в PBE реализуется с помощью компонентов и регндеринг графики не является исключением. Напоминаю, что в предыдущем уроке мы использовали SimpleShapeRenderComponent для отображения голубого круга, который представлял героя игры. Чтобы реализовать возможность отображения героя игры в качестве корабля на воздушной подушке, мы будем использовать компонент-рендер, который не использовали ранее, а именно SpriteRenderComponent.

Компонент SpriteRenderer обладает очень схожими параметрами с компонентом рендера фигур. Основное их отличие в том, что для SpriteRenderer нам необходимо указывать путь к файлу (картинке), которая будет отображаться. На следующем шаге мы добавим в игру объект, в которм будет отображаться графика фона, а так же начнём работу со свойством layerIndex у компонента-рендера, чтобы убедиться в том, что объект-герой будет отрисовываться поверх фона.

Для реализации нового функицонала в методе createHero() был изменён код, отвечающий за создание компонента-рендера:

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

// Создание простого компонента-рендера для отображения объекта
var render:SpriteRenderer = new SpriteRenderer();
// Устанавливаем ссылку на файл с графикой
render.fileName = "../assets/fanship.png";

// Добавляем компонент-рендер на сцену
render.scene = PBE.scene;

// Делаем так, чтобы объект-герой отображался перед фоном
render.layerIndex = 10;

// «Связывание» компонента рендера с объектом пространственного компонента, для получения информации о положении
render.positionProperty = new PropertyReference("@Spatial.position");
// «Связывание» компонента рендера с объектом пространственного компонента, для получения информации о размере
render.sizeProperty = new PropertyReference("@Spatial.size");

// Добавление к герою компонента рендера под именем "Render"
hero.addComponent(render, "Render");

На этом этапе у вас должно получиться скомпилировать и запустить игру. Если всё пройдёт хорошо, то вы должны будете увидеть маленький корабль на воздушной подушке, который будет заменой голубому кругу.

Примечание: на данном этапе изображение корабля не встроено в игру, если вы загрузить .swf файл на сервер сейчас, то он не будет ничего отображать. Это удобно для быстрой разработки прототипов, но, чтобы изображения показывались даже после загрузки на сервер или рассылки .swf файла по e-mail, вам неообходимо будет выполнить финальный шаг в данном уроке: встраивание изображение в .swf при компиляции.

Добавление фоновой картинки

Теперь мы добавим новый объект для отображения фоновой картинки. Этот объект не будет двигаться, он будет просто находиться в центре экрана и будет прездназначен для того, чтобы отображать большое фоновое изображение.

Участок кода, отвечающий за добавление фонового изображения должен быть вам знаком, так как он похож на создание объекта Hero.

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

/**
 * Создание фона.
 */
private function createBackground():void
{
	// Создание объекта для фона игры
	var bg:IEntity = PBE.allocateEntity();
	
	// Создание пространственного компонента для объекта фона
	var position:Point = new Point(0, 0);
	this.createSpatial(bg, position);
	
	// Создание простого компонента-рендера для отображения объекта
	var render:SpriteRenderer = new SpriteRenderer();
	// Установка ссылки на файл с графикой
	render.fileName = "../assets/bg.jpg";
	
	// Делаем так, чтобы фон отображался «за» клипом героя
	render.layerIndex = 1;
	
	// Добавляем компонент-рендер на сцену
	render.scene = PBE.scene;
	
	// «Связывание» компонента рендера с объектом пространственного компонента, для получения информации о положении
	render.positionProperty = new PropertyReference("@Spatial.position");
	
	// Добавление к герою компонента рендера под именем "Render"
	bg.addComponent( render, "Render" );
	
	// Регистрация объекта под именем "BG"
	bg.initialize("BG");
}

И, после того, как мы добавили функцию создания фона, не забудьте добавить вызов этой функции после вызова функции createHero().

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

// Создаём сцену
this.createScene();
// Создаём героя
this.createHero();
// Создаём фон
this.createBackground();

Встраивание графики

На предыдущих этапах мы создали .swf файл, который подгружает графику из соседних папок. Тем не менее, если вы хотите распространять вашу игру (или просто переместить в другой раздел вашего жёсткого диска, где не будет доступа к файлам с внешней графикой), первое, что вам нужно будет сделать — это встроить графику в ваш .swf файл.

Чтобы упростить встраивание внешних файлов (графики и т.п.), PBE предоставляет класс ResourceBundle. Этот класс взаимодействует с ResourceManager, чтобы упростить процесс встраивания.

Один из способов использовать класс ResourceBundle — это создать свой класс, который будет наследоваться от ResourceBundle. Чтобы сделать это, создайте новый файл в папке src/, под названием MyResources.as. Это будет объект ResourceBundle, который мы будем использовать в нашем проекте. Внутри этого класса нужно будет вставить следующий код:

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

package
{
	import com.pblabs.engine.resource.*;

	public class MyResources extends ResourceBundle
	{
	}
}

Внутри папки assets/ находится 2 файла — bg.jpg и fanship.png. Чтобы эти файлы были доступны в классе ResourceBundle вам нужно будет объявить переменные, которые будут ссылаться на встроенные файлы, с помощью мета-тега [Embed]. Например:

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

package  
{
	import com.pblabs.engine.resource.ResourceBundle;
	
	public class MyResources extends ResourceBundle
	{
		// Встраиваем графку фона
		[Embed(source="../assets/bg.jpg")]
		public var  resBg:Class;
		
		// Встраиваем графику корабля
		[Embed(source="../assets/fanship.png")]
		public var  resShip:Class;
		
		public function MyResources() 
		{
			
		}	
	}
}

Для того, чтобы мы могли использовать наш пользовательский класс ResourceBundle, нам нужно создать его экземпляр из главного класса. Это лучше сделать в конструкторе главного класса сразу после вызова функции PBE.startup(). Например так:

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

public class Lesson5Base extends Sprite
    {
		public function Lesson5Base()
		{
			// Запускаем работу PBE
			PBE.startup(this);
			
			// Создаём объект для работы со встроенными файлами
			new MyResources();

На этом всё должно быть закончено. Приведённый код встроит графику и сделает её доступной для PBE. Когда ResourceBundle будет инициализирован он автоматически будет «смотреть» какие файлы были встроены в него и зарегистрирует их для PBE ResourceManager.

Подытожим

SpriteRenderComponent может быть использован для отображения графики объекта. Для того, чтобы установить изображения необходимо задать свойство fileName класса SpriteRenderComponent.

Если вы не будете встраивать графику игры в скомпилированный .swf файл, то вы не сможете распространять .swf файл или перемещать его в другое место (без дополнительного перемещения файлов графики. Наиболее простым способом встраивания внешних файлов в PBE является использование класса ResourceBundle. К тому же, если вы используете библиотеку Flash IDE или .swc библиотеки, то вы сможете задавать графику для отображения напрямую, для этого свойству displayObject класса DisplayObjectRenderer или его дочерних классов нужно задать ссылку на объект, который вы хотите использовать в качестве графики.

Для использования ResourceBundle используйте следующий синтаксис:

public class MyResources extends ResourceBundle
{
	[Embed(source="../assets/imageFilename.png")]
	public var someName:Class;
}

Где ../assets/imageFilename.png — это путь к файлу, а someName — уникальное имя, которое будет ссылаться на встроенный файл.

Заключение

Поздравляем, вы завершили урок #5, и научились использовать внешние файлы при создании игр.

Вы можете скачать все файлы, которые использовались в уроке по ссылке ниже.

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