Инструменты для работы с изображениями в PushButton Engine (пятый урок)

Инструменты для работы с изображениями в PushButton Engine (пятый урок)

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

Техническое примечание: существует несколько различных способов встроить графику в компилируемый и мета-тег .

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

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

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



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

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

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

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

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

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