Javascript + Phaser

Предыдущие посты ( по просьбе @Lionin ):

1. Введение

2. Выбор редактора

3. Hello world

4. Загрузка ресурсов

5. Создание мира

6. Как работают платформы

Всем привет!

В прошлом уроке мы добавили платформы на нашу сцену:

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

Подготовка к работе

для работы над проектом вам понадобится настроенный phaserjs и установленный nodejs. Все не обходимые файлы доступны по ссылке.

Создание персонажа

Для работы с персонажем нам понадобится переменная которая будет хранить объект с нашим персонажем, назовем ее player и добавим следующий код в функцию create:

Этим кодом мы добавляем в наш обработчик физики модель персонажа и анимацию которую мы сможем к нему применять.

Настройка параметров персонажа

Следующим кодом:

мы создаем новый спрайт под названием player, который доступен по координатам 100x450 на нашем холсте. Поскольку наш спрайт создан с помощью фабрики физических объектов ( this.physics.add ) он сразу обладает всеми свойствами динамического тела которые доступны в аркадной физике.

После того как мы создали спрайт, мы добавляем для него небольшой отскок 0.2. Таким образом когда персонаж подпрыгнет и приземлится обратно, он подпрыгнет несколько раз, как мячик. Затем мы добавляем механизм столкновения с границами игровой сцены ( что бы персонаж не мог выйти выйти за пределы нашей камеры ).

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

Анимация персонажа

Если мы вернемся немного назад и посмотрим на функцию preload то увидим что файл dude был загружен как спрайт а не как картинка. Нам нужна возможность работать с этим изображением как с спрайтом потому что оно содержит анимацию по кадрам:

как видим изображение содержит 9 кадров, 4 кадра для анимации движения влево, 1 кадр смотрит в камеру и 4 кадра для движения вправо.

Примечание: phaser поддерживает перелистывание спрайтов для экономии кадров анимации, но в этом уроке будет old school.

Давайте добавим обработку движения персонажа влево и вправо, для анимации движения влево в функцию create добавим:

Анимация влево использует кадры 0-4 с частотой 10 кадров в секунду, параметр repeat: -1 говорит phaserjs о том что анимацию нужно зациклить ( т.е гонять эти кадры по кругу ).

Движение в право и поворот будет обрабатываться так же как и анимация движения влево.

Дополнительная информация: в Phaser 3 Animation Manager является глобальной системой. Созданные в нем анимации доступны для всех игровых объектов. Они делятся основными данными анимации, управляя своими собственными временными рамками. Это позволяет вам определить одну анимацию один раз и применить ее к тем игровым объектам, которые вам требуются. Это отличается от Phaser 2, где анимации принадлежат именно тем игровым объектам, для которых они были созданы.

Всем привет!

В ходе предыдущего урока мы добавили платформы на нашей игровой сцене:

Для этого мы добавили много кода в нашу функцию create:

давайте разберемся за что отвечает этот код:

Эта инструкция создает новую группу которая отвечает за управление статическими объектами и сохраняет ее в переменную platforms. В Аркадной физике существует два типа физических тел ( объектов ):

- динамическое - это тело, которое может двигаться с помощью таких сил, как скорость или ускорение. Он может подпрыгивать и сталкиваться с другими объектами, и это столкновение зависит от массы тела и других элементов;

- статическое - это тело просто имеет позицию и размер, на него не воздействует гравитация, для него нельзя указать скорость и иные характеристики.

Статичные тела, являются статичными по природе. И идеально подходит для площадки и платформ, на которых мы собираемся позволить игроку бегать.

Что такое группы? И зачем они нам нужны?

Как следует из их названия, они позволяют группировать похожие объекты и управлять ими как единым целым. Вы также можете проверить наличие столкновений между группами и другими игровыми объектами.

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

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

Как мы видели ранее, этот код создает следующую сцену:

Во время предварительной загрузки мы импортировали platform.png изображение. Это простой зеленый прямоугольник размером 400 x 32 пикселей, который будет использоваться для наших основных нужд.

В первой строке кода выше. мы добавляем нашу основную платформу ( "землю" ) размером 400 x 568 (помните, изображения располагаются в зависимости от их центра) - поскольку длинны исходного изображения недостаточно для того что бы разместить ее по всей ширине игровой сцены ( это нужно для того что бы игровой персонаж не выпал с экрана :) ), мы её масштабируем х2 с помощью функции setScale(2). Теперь он размером 800 x 64, что идеально подходит для наших нужд.

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

После того как мы разместили на игровой сцене "основную" платформу, мы добавляем вспомогательные платформы на которые сможет запрыгивать наш игровой персонаж:

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

Заключение

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

Результаты предыдущего урока доступны здесь.

В прошлом уроке мы загружали изображения для нашей игры. Для загрузки изображений мы использовали метод this.image.add который под капотом создает объект для нашего изображения и добавляет его в список отображаемых объектов ( display list ) текущей сцены. В этом списке содержатся все игровые объекты. Вы можете позиционировать изображения как вам угодно Phaser будет не против.

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

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

Подготовка к работе

Для начала нам нужно создать отдельную ветку для этой игры в нашем стартовом шаблоне ( если у вас его нет его можно скачать здесь ). Находясь в корне нашего проекта создадим новую ветку:

Добавление платформ

На данный момент наша сцена выглядит следующим образом:

давайте внесем в нее некоторое разнообразие, добавим землю и платформы. Для этого нам понадобится внести следующие изменения в функцию create:

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

для включения физики, внесите следующие изменения:

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

Итог

и так на нашем фоне появились платформы, но каким образом они работают? мы рассмотрим это в следующем уроке.

В этом уроке мы сделаем загрузку необходимых ресурсов для нашей игры.

Подготовка к работе

Для начала нам нужно создать отдельную ветку для этой игры в нашем стартовом шаблоне ( если у вас его нет его можно скачать здесь ). Находясь в корне нашего проекта создадим новую ветку:

Загрузка ресурсов

Для загрузки всех необходимых для нашей игры мы будем использовать метод жизненного цикла сцены preload, для этого переходим по пути src/index.ts находим функцию preload:

и заменяем ее содержимое на:

данный код осуществляет загрузку ресурсов необходимых нам для работы: 4 изображения и один спрайт с нашим персонажем. Хотя это может показаться очевидным, я бы хотел обратить ваше внимание на первый аргумент метода this.load.image является ключом ( aliase ) с помощью которого мы можем впоследствии получить доступ к загруженному ресурсу. В качестве ключа можно использовать любую допустимую в JavaScript стоку.

Вывод изображения на холст

Чтобы отобразить одно из загруженных нами изображений, поместите следующий код внутри функции create:

напоминаю что текущий код разрабатывается в ветке platformer-step-1.

Значения 400 и 300 это координаты изображения по оси X и Y. Почему 400 и 300? Так происходит потому что по умолчанию Phaser все объекты размещает по по центру холста. Так как размер нашего изображения 800x600, то если мы разместим его по центру ( координаты 0 x 0 ), мы не увидим нижнего-правого угла. Если в качестве оси X и Y мы укажем 400 и 300 мы сможем увидеть все изображение полностью.

Подсказка: для того чтобы изменить это поведение вы можете воспользоватся setOrigin. Например:

Этот код сделает так что по умолчанию изображение будет выводится в левом-верхнем углу.

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

если звезда будет объявлена до фона то она будет отображаться под ним.