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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const text = this.make.text({
            add: false,
            x: 0,
            y: 0,
            text: 'Phaser',
            style: {
                fontSize: '64px',
                fontFamily: 'Arial',
                color: '#ffffff',
                align: 'center',
                backgroundColor: '#ff00ff'
            }
        });

        this.textures.addCanvas('text', text.canvas);

        this.add.particles(400, 300, 'text', {
            alpha: { start: 1, end: 0 },
            speed: { min: 60, max: 260 },
            lifespan: { min: 2000, max: 3000 }
        });
    }
}

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

const game = new Phaser.Game(config);

Создание текста как Canvas-объекта

Первый шаг — создание текстового объекта, который не будет сразу добавлен на сцену. Для этого используется фабрика this.make.text(). Конфигурационный объект позволяет гибко настроить внешний вид.

const text = this.make.text({
    add: false,
    x: 0,
    y: 0,
    text: 'Phaser',
    style: {
        fontSize: '64px',
        fontFamily: 'Arial',
        color: '#ffffff',
        align: 'center',
        backgroundColor: '#ff00ff'
    }
});

Ключевые параметры: - add: false — объект создаётся в памяти, но не рендерится на сцену как обычный текст. Это позволяет работать с ним как с ресурсом. - style — определяет стиль текста. Здесь заданы размер шрифта, семейство, цвет, выравнивание и даже фоновый цвет (backgroundColor), который создаст прямоугольную подложку вокруг текста. - Важно: объект text после создания содержит свойство canvas — это HTML Canvas элемент, на котором отрисован наш стилизованный текст.

Регистрация Canvas как текстуры

Созданный Canvas-элемент нужно сделать доступным для движка как текстура. Менеджер текстур Phaser (this.textures) имеет для этого специальный метод.

this.textures.addCanvas('text', text.canvas);

Метод addCanvas принимает два аргумента: 1. 'text' — уникальный строковый ключ, по которому эта текстура будет доступна в дальнейшем. Вы можете использовать любое название. 2. text.canvas — ссылка на HTML Canvas элемент, который мы получили на предыдущем шаге.

После выполнения этой строки в кэше текстур игры появляется новая текстура с ключом 'text'. Её можно использовать точно так же, как и любую заранее загруженную картинку: для спрайтов, тайлсетов или, как в нашем случае, для частиц.

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

Финальный шаг — создать эмиттер частиц, который будет использовать нашу сгенерированную текстуру. Для этого обращаемся к фабрике частиц this.add.particles.

this.add.particles(400, 300, 'text', {
    alpha: { start: 1, end: 0 },
    speed: { min: 60, max: 260 },
    lifespan: { min: 2000, max: 3000 }
});

Параметры вызова: - 400, 300 — координаты X и Y точки испускания (эмиттера) частиц на сцене. - 'text' — ключ текстуры, которую мы зарегистрировали ранее. Каждая частица будет представлять собой небольшое изображение с этим текстом. - Конфигурационный объект определяет поведение частиц: - alpha — управление прозрачностью. Частицы рождаются видимыми (start: 1) и постепенно исчезают (end: 0). - speed — разброс начальной скорости. Частицы получают случайную скорость от 60 до 260 пикселей в секунду. - lifespan — время жизни частицы в миллисекундах. Каждая частица будет существовать от 2 до 3 секунд перед удалением.

В результате вы увидите, как из центра экрана во все стороны разлетаются маленькие разноцветные слова 'Phaser', плавно исчезая.

Почему это работает именно так

Сила этого подхода в его универсальности и производительности.

1. **Динамическая генерация:** Текстура создаётся во время выполнения игры. Это позволяет генерировать текст на основе данных игрока (его имени, количества очков) или случайных слов, что невозможно при использовании статических изображений. 2. **Единый конвейер:** Phaser обрабатывает Canvas-текстуру так же, как и bitmap-изображение. Все функции системы частиц (масштабирование, вращение, tint) остаются доступными. 3. **Контроль памяти:** Canvas, переданный в addCanvas, "захватывается" движком. Исходный объект text можно удалить, текстура останется в памяти менеджера до тех пор, пока вы её явно не удалите.

Важное замечание по API: метод this.make.text() возвращает объект типа Phaser.GameObjects.Text, а this.textures.addCanvas() ожидает именно свойство .canvas этого объекта. Не пытайтесь передать сам текстовый объект.

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

Превращение текста в текстуру для частиц открывает огромный простор для творчества в Phaser. Вы научились создавать динамические графические ресурсы прямо во время работы игры. Идеи для экспериментов: 1. Измените текст на лету в зависимости от действий игрока (например, частицы из слова 'CRITICAL!' при критическом ударе). 2. Скомбинируйте несколько разных текстовых текстур в одном эмиттере, используя массив ключей. 3. Поэкспериментируйте со стилями: используйте градиенты, тени (shadow в стиле) или даже нарисуйте в Canvas более сложные формы поверх текста, прежде чем регистрировать его как текстуру.