30
июн
  PushButton Engine Урок #3 0 баллов
 

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


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

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

Данный урок состоит из серии шагов: маленьких промежутков, которые будут фокусироваться на достижении небольших целей. Такой подход позволит ускорить процесс понимания PusButton Engine (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, создали свой первый пользовательский компонент и увидели его работу в действии.

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

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

Комментарии (9)   Автор: admin
Комментарии
omaggot
02.07.10 | 15:28
17 баллов

Не успеваю следить за уроками^)

У вас плывет верстка:
заголовок"PushButton Engine Lesson #3: добавление управления к пользовательскому компоненту" при сужении окна ложиться на текст.
Mozilla/5.0 (Windows; U; Windows NT 6.1; ru; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

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

admin
03.07.10 | 13:18
0 баллов

Цитата:
У вас плывет верстка:

Спасибо, что указали на баг, к сожалению, пока, не знаю как его решить =(

Цитата:
По теме: на адоби видел часовое видио по теории с пушбатонинжин, если интересно и не будет спамом могу наити ссылку.

Был бы благодарен за подобную ссылку =)

omaggot
04.07.10 | 13:39
17 баллов

____Видео____

Уже неделю смотрю и все не добью, уже подумаю на плеер залить)
Эмм...верстальцщик из меня никакои, помочь не смогу :(
Спасибо за уроки.

omaggot
04.07.10 | 14:36
0 баллов

По уроку:
1 Кто нибудь разобрался что значит
в controller.positionReference = new PropertyReference("@Spatial.position");
это: "@Spatial.position");
В частности знак собаки. Так понимаю привяка >_<
2 Заметил что у класса SceneView напрочь отсутствуют стили (нехватка нормальных доков на PBE раздражает) и
private function createScene():void {
// Переменная Сценко
var sceneView:SceneView = new SceneView();
sceneView.width = 800;
sceneView.height = 600;
sceneView.backgroundColor = 0xff0000; //получаем ошибку компиляции

PBE.initializeScene(sceneView);
}
цвет фона мы задать не можем. Как насчет того чтобы помозговать над этим вместе?

admin
06.07.10 | 22:17
0 баллов

Цитата:
1 Кто нибудь разобрался что значит
в controller.positionReference = new PropertyReference("@Spatial.position");
это: "@Spatial.position");

Если честно, то мне такой вид записи не очень понравился. По-моему, @ — это что-то типо ссылки на какой-то объект.

Цитата:
Заметил что у класса SceneView напрочь отсутствуют стили (нехватка нормальных доков на PBE раздражает)

Мне непонятны ваши замечания на этот счёт. Какие стили вы хотели увидеть?

Цитата:
sceneView.backgroundColor = 0xff0000; //получаем ошибку компиляции

С чего вы взяли, что свойство с именно таким именем должно существовать?

Что касается документации, то, на мой взгляд, у них с ней всё нормально:
1) Ссылки на различную документацию
2) Документация по всем классам фреймворка

omaggot
07.07.10 | 09:47
0 баллов

Цитата:
Если честно, то мне такой вид записи не очень понравился. По-моему, @ — это что-то типо ссылки на какой-то объект.

Кусочек моего кода, просто так :)
else if ( stepIsVisible == true ) {
btn_showPayment.toolTip = dataText.btnShowPayment.@toolTipe;
closePaymentWin();
}

Да так оно и есть, но через что оно ходит к "Spatial.position", хм, неясно.

Цитата:
Мне непонятны ваши замечания на этот счёт. Какие стили вы хотели увидеть?

Стили тоесть атрибуты style у компонента.
Хотя взглянул на Scene во флеше стилей у нее нет, почему то мне казалось по другому. Вопроса как задать цвет фона сцены это не снимает. Буду дома попробую напрямую через компилятор, думаю сработает.
Цитата:
С чего вы взяли, что свойство с именно таким именем должно существовать?

Я не брал. Прекрасно понимаю что не существует. А вот для того чтобы узнать что существует, а чего нет и существуют доки, которых нет. Философская нагрузка.
По поводу документации. То что Вы привели, это хорошо, был там,но доков как таковых там нет.
Доки выглядят так. Тыц Хочется описание компонентов и соответственно своиств, методов и стилей что предоставляет ПБИ.
Но это так, в общем.

admin
07.07.10 | 20:59
0 баллов

Цитата:
Хотя взглянул на Scene во флеше стилей у нее нет, почему то мне казалось по другому. Вопроса как задать цвет фона сцены это не снимает. Буду дома попробую напрямую через компилятор, думаю сработает.

Задать цвет фона для любого потомка класса DisplayObject можно через свойство opaqueBackground. К слову Scene не является компонентом, это один из классов фреймворка PushButton Engine.

Цитата:
По поводу документации. То что Вы привели, это хорошо, был там,но доков как таковых там нет.

Доки, ссылку на которые вы привели, абсолютно похожи на доки PushButton Engine, подозреваю даже, что они создавались с помощью одних и тех же программных средств.

omaggot
12.07.10 | 16:35
0 баллов

Забыл ответить: спасибо большое за доки, это именно то что нужно.

dymbers
19.05.11 | 11:17
0 баллов

Спасибо за переводы уроков.
Самому лень было этим занимаццо.

При просмотре этого урока нашел ошибочку в начальных файлах.
главный класс Lesson3Base.as в src написан неполностью. там не хватает куска кода, где происходит привязка рендера к герою.
А именно вот этого куска нету:

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

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

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

И в дополнении хотел сказать, что если не учитывать отсутствие этого куска кода в главном скрипте проекта, то начальный проект и конечный проект идентичны. Думаю было бы лучше начальные файлы выложить без кода с контроллером в главном классе и без класса DemoControllerComponent.as. пусть те, кто изучает урок, сами своими руками будут добавлять код в своем проекте чтобы достигнуть конечного результата. так будет легче усваивать новую информацию. Как это было в первых двух уроках.

 
 
 
 

Последние комментарии

Полезные ссылки

Реклама сайтов