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

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

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

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

Живой запуск

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

Исходный код

class Demo extends Phaser.Scene
{
    constructor()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.spritesheet('swatch', 'assets/swatches/deluxe-paint-swatch.png', { frameWidth: 512, frameHeight: 16 });
    }

    create ()
    {
        const ct = this.textures.createCanvas('ct1', 3, 1);

        const sprite = this.add.sprite(400, 300, 'ct1');

        let width = 16;
        let height = 16;

        ct.setSize(width, height);

        ct.drawFrame('swatch', 1);

        this.input.on('pointerdown', () => {

            width += 16;
            // height += 16;

            ct.setSize(width, height);
            sprite.setSize(width, height);

            ct.update();
            ct.refresh();

            console.log(ct.width, ct.height);

            ct.drawFrame('swatch', 1);

            console.log(sprite.width, sprite.height);

        });
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    scene: Demo
};

const game = new Phaser.Game(config);

Что такое CanvasTexture и зачем она нужна

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

В примере мы создаём текстуру 'ct1' размером 3x1 пикселя, хотя это лишь начальное значение — позже мы изменим её. Спрайт использует эту текстуру для отображения.

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

В методе create() происходит инициализация CanvasTexture. Сначала текстура создаётся с минимальным размером, а затем сразу увеличивается до 16x16 пикселей. Ключевой метод здесь — drawFrame, который копирует кадр из спрайтшита 'swatch' на холст текстуры.

const ct = this.textures.createCanvas('ct1', 3, 1);
const sprite = this.add.sprite(400, 300, 'ct1');
let width = 16;
let height = 16;
ct.setSize(width, height);
ct.drawFrame('swatch', 1);

setSize изменяет размер холста текстуры, а drawFrame рисует в него первый кадр спрайтшита (индекс 1).

Динамическое изменение размера по клику

При клике мыши размер текстуры увеличивается на 16 пикселей по ширине. Важно не только изменить размер текстуры, но и обновить связанный спрайт, чтобы изменения отразились на экране.

this.input.on('pointerdown', () => {
    width += 16;
    ct.setSize(width, height);
    sprite.setSize(width, height);
    ct.update();
    ct.refresh();
    ct.drawFrame('swatch', 1);
});

setSize для текстуры меняет размер её холста, а setSize для спрайта обновляет его визуальное представление. Методы update и refresh гарантируют, что текстура перерисуется. После этого drawFrame снова заполняет текстуру данными из спрайтшита, растягивая изображение под новый размер.

Важные нюансы работы с CanvasTexture

При изменении размера CanvasTexture нужно помнить: - update перерисовывает текстуру, учитывая текущие изменения на холсте. - refresh обновляет внутренний кэш текстуры, чтобы движок Phaser использовал актуальные данные. - Если не вызвать setSize для спрайта, его размер останется прежним, даже если текстура изменилась.

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

console.log(ct.width, ct.height);
console.log(sprite.width, sprite.height);

Это полезно для отладки, чтобы убедиться, что изменения применяются корректно.

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

Динамическое управление CanvasTexture открывает возможности для создания адаптивной графики в играх. Поэкспериментируйте: добавьте изменение высоты, используйте разные спрайтшиты или анимируйте размер текстуры со временем. Можно создать интерактивный индикатор загрузки или генератор случайных текстур для процедурного контента.