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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    bitmaptext;
    rt;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.atlas('banner', 'assets/atlas/banners.png', 'assets/atlas/banners.json');
    }

    create ()
    {
        const GetRandom = Phaser.Utils.Array.GetRandom;

        //  Create our Dynamic Texture which is 512x512 in size
        const banner = this.textures.addDynamicTexture('playerBanner', 512, 512);

        //  Draw a flag to our texture
        banner.stamp('banner', 'flag_02_green', 256, 256);

        //  Now add the finished banner texture to a Sprite
        this.add.sprite(400, 300, 'playerBanner');

        banner.clear(100, 100, 100, 100);
    }
}

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

const game = new Phaser.Game(config);

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

В Phaser динамическая текстура (DynamicTexture) — это текстура в оперативной памяти, на которой можно рисовать с помощью Canvas API или специальных методов. Она создаётся с помощью метода this.textures.addDynamicTexture.

const banner = this.textures.addDynamicTexture('playerBanner', 512, 512);

Здесь мы создаём текстуру с именем 'playerBanner' размером 512x512 пикселей. Эта текстура сразу добавляется в менеджер текстур сцены и становится доступна для использования спрайтами.

Рисование на текстуре методом stamp

Метод stamp позволяет «штамповать» существующее изображение из атласа или обычной текстуры на динамическую текстуру. Это эффективный способ компоновки.

banner.stamp('banner', 'flag_02_green', 256, 256);

Параметры метода: 1. 'banner' — ключ загруженного атласа. 2. 'flag_02_green' — имя конкретного фрейма внутри этого атласа. 3. 256, 256 — координаты X и Y центра штампа на динамической текстуре.

После этого шага наша динамическая текстура 'playerBanner' содержит изображение зелёного флага по центру.

Использование текстуры в спрайте

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

this.add.sprite(400, 300, 'playerBanner');

Этот спрайт отобразит всё текущее содержимое динамической текстуры 'playerBanner' на экране сцены. Любые последующие изменения текстуры (например, рисование или очистка) будут немедленно видны в этом спрайте.

Точечная очистка прямоугольной области

Ключевой метод в этом примере — clear. Он позволяет очистить прямоугольную область динамической текстуры, делая её полностью прозрачной.

banner.clear(100, 100, 100, 100);

Параметры метода clear(x, y, width, height): - `x,y` — координаты левого верхнего угла очищаемого прямоугольника **относительно самой динамической текстуры**. - width, height — размеры очищаемого прямоугольника.

В данном примере будет очищена квадратная область 100x100 пикселей, начинающаяся с точки (100, 100) на текстуре. Если на этой области находилась часть нарисованного флага, она исчезнет, и спрайт на сцене мгновенно обновится, отобразив «дырку».

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

Метод clear для DynamicTexture — это простой, но мощный инструмент для манипуляции содержимым текстур в реальном времени. Поэкспериментируйте: создайте «стираемую» картину, очищая области по клику мыши, или реализуйте систему кастомизации, где игрок может удалять элементы с шаблона. Можно комбинировать clear с другими методами рисования, такими как fill или draw, для создания сложных интерактивных эффектов.