HTML5 Phaser ECMAScript 6

Часть 10: Создаем свой prefab/компонент в Phaser (шаг 1)

В предыдущем посте мы в месте разобрали Boot.js и Preload.js. Перед тем как приступить к разбору следующей Game сцены, я хотел бы вас познакомить с понятием prefeb, цель которых упростить разработку игры. prefeb это часть интерфейса с набором функций. Лучшим аналогом в HTML-е будет элемент select. Он состоит из: текстового поля, кнопки открытия списка, списка и полоски прокрутки (полоска прокрутки тоже составная: две кнопки и лифт). С виду простой элемент интерфейса оказался сложной системой.

Такой вид разработки помогает разделять главный код от вспомогательного. Ведь логично, зачем верстальщику знать как реализован элемент select. Все что ему надо знать: как передать select-у опции и как получить ответ (вариант который выбрал пользователь). prefeb-ы являются таким аналогом в разработке игр. Давайте посмотрим GUI сцены меню:

интерфейс меню программы

Как видно у меня три навыка: тренировка слов, восприятия речи и правописание. Различаются навыки по цвету и иконке. Но есть и сходства: форма, визуальный прогресс уровня, кружок с уровнем и поле с числом от 1 до 16. Визуальный прогресс я хочу анимровать, что бы лишний раз акцентировать внимание игрока на пути, который он прошел.

Теоретически реализовать такой прогресс не сложно. Но если делать все в лоб, то мы будем дублировать код три раза. По этому, логично будет создать prefeb — Skill. При создании объекта будем передавать координаты и уникальную для данного Skill элемента графику. Также реализуем метод Skill.set_progress() для установки нужного нам уровня (от 1 до 16).

Всего у нас два способа создать prefeb: на базе sprite и на базе group. Сначала я попробовал сделать на базе sprite так как его можно будет использовать в tile картах. Но создав прототип, сразу понял, элемент то у нас состоит из слоев. Phaser конечно дает возможность создать вспомогательный BitMap методом game.add.bitmapData(), который можно использовать как временны буфер для генерации конечного изображения. Но это не решает проблему с анимацией

В Phaser анимацию делает метод this.game.add.tween(), но работает он только с спраитами или группами. Теоретически можно создать внутри моего спраита вспомогательный, анимировать его и в методе update пересобирать новое визуальное представления моего элемента. В целях повышения квалификации, надо будет попробовать это сделать на практике, но не сейчас!

Если не получается с помощью sprite то надо делать prefeb на базе group. Если вы работали в Photoshop, то вы знаете, что создав папку в окошке layers, вы автоматом группируете слои которые находятся в ней. group имеет туже функцию и является неотъемлемой частью шутеров, платформеров, тауерзов и т.д.

В прошлом посте я забыл рассказать про спраиты на сценах. Как и DOM элементы в HTML странице (если не задавать z-index) спраиты добавленные в начале документа, отображаются позади тех, которые добавлены позже. В следующем посте переедем от теории к практике и создадим наш первый prefeb =)

 

1 thought on “Часть 10: Создаем свой prefab/компонент в Phaser (шаг 1)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *