Phaser.js: всё об играх и разработке

О чем этот пример

Любая игра в Phaser начинается с отображения графики на экране. Этот фундаментальный шаг — добавление изображения в сцену — является основой, на которой строятся все последующие игровые механики: анимация, физика, взаимодействие. Разберём базовый пример, который показывает, как загрузить ресурс и отобразить его, чтобы вы могли быстро перейти к созданию игрового мира.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('face', 'assets/pics/bw-face.png');
    }

    create ()
    {
        this.add.image(400, 300, 'face');
    }
}

const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 600
};

const game = new Phaser.Game(config);
// Scene add
game.scene.add('Boot', Example, true);

Структура сцены: класс `Example`

В Phaser основная логика игры организована в сценах (Scenes). Каждая сцена — это отдельный класс, расширяющий Phaser.Scene. В этом классе мы определяем ключевые этапы жизненного цикла сцены, такие как предзагрузка ресурсов (preload) и создание игровых объектов (create).

Этот подход позволяет чётко разделить загрузку и инициализацию, делая код более организованным и управляемым.

Этап предзагрузки: метод `preload`

Перед тем как использовать изображение, звук или другие ресурсы, их необходимо загрузить в память браузера. Для этого используется метод preload. Внутри него мы обращаемся к менеджеру загрузки this.load.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('face', 'assets/pics/bw-face.png');
}

Первая строка, setBaseURL, задаёт базовый URL-адрес для всех последующих загрузок. Это удобно, если все ваши ресурсы лежат в одной папке на сервере.

Вторая строка, load.image, регистрирует загрузку изображения. Первый аргумент ('face') — это уникальный строковый ключ (идентификатор), по которому мы будем обращаться к этому изображению в коде. Второй аргумент — путь к файлу относительно базового URL.

Создание объектов: метод `create`

После успешной загрузки всех ресурсов, объявленных в preload, Phaser автоматически вызывает метод create. Здесь происходит первичная настройка и добавление объектов на сцену.

create ()
{
    this.add.image(400, 300, 'face');
}

Метод this.add.image создаёт новый игровой объект — изображение (Image) — и сразу добавляет его в список отображения сцены. - Первые два аргумента (400, 300) — это координаты X и Y для центра изображения в пикселях. - Третий аргумент ('face') — это ключ загруженного ранее изображения.

Этот объект становится частью сцены и будет отрисован на холсте.

Конфигурация и запуск игры

Для запуска игры необходимо создать экземпляр основного класса Phaser.Game, передав ему объект конфигурации.

const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 600
};

Объект config определяет основные параметры: - type: Рендерер (например, Phaser.CANVAS или Phaser.WEBGL). - parent: ID HTML-элемента, в который будет встроен игровой холст. - width и height: Размеры игрового холста в пикселях.

const game = new Phaser.Game(config);
// Scene add
game.scene.add('Boot', Example, true);

После создания экземпляра игры мы регистрируем нашу сцену в менеджере сцен. Метод game.scene.add принимает три аргумента: 1. Ключ сцены ('Boot') — строковый идентификатор. 2. Класс сцены (Example). 3. Флаг автозапуска (true). Если он установлен в true, эта сцена будет запущена немедленно после регистрации.

Что попробовать дальше

Вы освоили базовый паттерн Phaser: загрузка ресурса и его отображение на сцене. С этого начинается любая игра. Для экспериментов попробуйте изменить координаты в add.image, чтобы переместить картинку в угол экрана, загрузить другое изображение или зарегистрировать несколько сцен и переключаться между ними с помощью game.scene.start('SceneKey').