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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const t = this.textures.addDynamicTexture('area1', 128, 128).fill(0x00ff00);

        console.log(t);

        this.add.image(100, 100, 'area1').setOrigin(0);
    }
}

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

const game = new Phaser.Game(config);

Что такое динамическая текстура?

Динамическая текстура в Phaser — это объект Phaser.Textures.DynamicTexture, который представляет собой холст в оперативной памяти. Вы можете рисовать на нём с помощью методов API, аналогично работе с контекстом <canvas>. Главное отличие от статической текстуры, загруженной из файла, — полный программный контроль над содержимым в реальном времени.

В нашем примере мы создадим текстуру размером 128x128 пикселей и сразу зальём её сплошным цветом, чтобы использовать как спрайт.

Создание и настройка сцены

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

class Example extends Phaser.Scene
{
    create ()
    {
        // Код создания текстуры и изображения будет здесь
    }
}

Конфигурация игры указывает тип рендерера (Phaser.CANVAS), размеры окна и используемую сцену.

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

const game = new Phaser.Game(config);

Генерация текстуры и работа с ней

Ключевой шаг — создание динамической текстуры через менеджер текстур сцены this.textures. Метод addDynamicTexture() принимает уникальный ключ для текстуры и её размеры.

const t = this.textures.addDynamicTexture('area1', 128, 128).fill(0x00ff00);

Эта строка делает три вещи: 1. Создаёт и регистрирует в кэше текстур новую динамическую текстуру с ключом 'area1'. 2. Возвращает объект DynamicTexture, к которому сразу применяется метод .fill(). 3. Метод .fill(0x00ff00) заливает всю область текстуры зелёным цветом (HEX-код 0x00ff00).

После этого текстура доступна в кэше по ключу 'area1', как если бы она была загружена из файла. Для отладки полезно вывести объект текстуры в консоль и изучить его свойства.

console.log(t);

Отображение текстуры на сцене

Созданную текстуру можно использовать для отображения спрайтов или изображений. Мы добавляем на сцену объект изображения, который ссылается на нашу динамическую текстуру по её ключу.

this.add.image(100, 100, 'area1').setOrigin(0);

Здесь this.add.image() создаёт игровой объект Image. Аргументы (100, 100) задают его позицию на сцене, а 'area1' — ключ используемой текстуры. Вызов .setOrigin(0) устанавливает точку привязки (origin) объекта в его левый верхний угол. Это значит, что координаты (100, 100) будут указывать именно на верхний левый угол зелёного квадрата, а не на его центр (значение по умолчанию).

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

Динамические текстуры — это фундаментальный инструмент для гибкого управления графикой в Phaser. С их помощью можно не только заливать области цветом, как в примере, но и рисовать фигуры, текст, комбинировать несколько текстур или реализовывать простую систему частиц. Для экспериментов попробуйте: изменить цвет заливки в зависимости от действий игрока, нарисовать на текстуре круг или прямоугольник с помощью методов graphics самого объекта DynamicTexture, или создать анимацию, периодически очищая и перерисовывая содержимое текстуры в игровом цикле.