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

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

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

Версия 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('beball', 'assets/sprites/beball1.png');
        this.load.image('atari', 'assets/sprites/atari400.png');
        this.load.image('bikkuriman', 'assets/sprites/bikkuriman.png');

    }

    create ()
    {

        this.add.sprite(200, 300, 'beball');
        this.add.sprite(500, 300, 'atari');
        this.add.sprite(800, 300, 'bikkuriman');

    }
}

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

1. Настройка сцены и загрузка ресурсов

Каждая сцена в Phaser имеет жизненный цикл. Метод preload вызывается первым и предназначен для загрузки всех необходимых ресурсов (изображений, звуков, данных) до начала создания игровых объектов.

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

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');

    this.load.image('beball', 'assets/sprites/beball1.png');
    this.load.image('atari', 'assets/sprites/atari400.png');
    this.load.image('bikkuriman', 'assets/sprites/bikkuriman.png');
}

2. Создание и позиционирование спрайтов

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

Здесь мы создаём три спрайта, используя метод this.add.sprite. Этот метод принимает три обязательных аргумента: координаты X и Y на экране (в пикселях) и ключ загруженного изображения. Спрайт создаётся с центром в указанных координатах.

В нашем примере спрайты размещаются на одной горизонтальной линии (Y = 300), но с разным отступом по оси X (200, 500, 800), что позволяет визуально разделить их на экране.

create ()
{
    this.add.sprite(200, 300, 'beball');
    this.add.sprite(500, 300, 'atari');
    this.add.sprite(800, 300, 'bikkuriman');
}

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

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

Ключевые параметры в этом примере: * type: Задаёт рендерер. Phaser.WEBGL использует аппаратное ускорение, если оно доступно. * parent: ID HTML-элемента (контейнера), в который будет встроен Canvas игры. * scene: Класс, определяющий основную сцену игры. Можно передать массив классов для нескольких сцен.

После создания экземпляра Phaser.Game жизненный цикл сцены запускается автоматически.

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

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

Вы освоили базовый процесс создания статичных спрайтов в Phaser. Всё начинается с загрузки изображений по уникальным ключам в preload и их материализации в мире игры с помощью this.add.sprite в create. Для экспериментов попробуйте: 1. Изменить координаты спрайтов, чтобы расставить их по-другому. 2. Добавить больше спрайтов с новыми изображениями. 3. Использовать this.add.image вместо this.add.sprite (разница в наличии у спрайта анимации и физического тела по умолчанию). 4. Начать управлять одним из спрайтов, обращаясь к нему через переменную: const ball = this.add.sprite(200, 300, 'beball');.