Разработка игры на phaserjs - 5: создание мира⁠⁠

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

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

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

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

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

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

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

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

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

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

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

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

Итог

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