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

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

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

Версия 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('card', 'assets/games/card-memory-game/cards/card-4.png');
    }

    create ()
    {
        const card = this.add.image(this.sys.scale.width / 2, this.sys.scale.height / 2, 'card');

        card.setScale(2);

        Phaser.Actions.AddEffectShine(card);
    }
}

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

const game = new Phaser.Game(config);

Что делает метод AddEffectShine?

Phaser.Actions.AddEffectShine — это статический метод утилитарного класса Phaser.Actions. Его задача — автоматически применить к переданному объекту (или массиву объектов) эффект "сияния" или "блика".

Под капотом метод создает на основе исходного изображения анимацию, где поверхность объекта периодически вспыхивает светлой полосой, создавая иллюзию отраженного света. Это отличный способ мгновенно визуально выделить карточку, бонус, важный элемент UI или персонажа. Эффект добавляется как дочерний компонент к объекту и управляется автоматически.

Базовый пример использования

Рассмотрим простейший пример. Мы загружаем изображение карты и центрируем его на экране. Ключевой момент — вызов Phaser.Actions.AddEffectShine(card). В качестве аргумента передается сам игровой объект.

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('card', 'assets/games/card-memory-game/cards/card-4.png');
    }

    create ()
    {
        const card = this.add.image(this.sys.scale.width / 2, this.sys.scale.height / 2, 'card');
        card.setScale(2);
        Phaser.Actions.AddEffectShine(card);
    }
}

После этого на карточке сразу же начнет циклически проигрываться эффект сияния. Никакой дополнительной настройки не требуется.

Как это работает внутри?

Метод AddEffectShine выполняет несколько действий: 1. Создает дочерний Sprite, который будет отображать эффект. 2. Генерирует для этого спрайта специальную текстуру (маску), имитирующую блик. 3. Настраивает анимацию движения и изменения прозрачности (alpha) этого блика по объекту. 4. Запускает анимацию в бесконечном цикле (YOYO).

Важно понимать, что эффект привязывается к конкретному экземпляру объекта. Если вам нужно убрать сияние, можно уничтожить дочерний спрайт эффекта, найдя его среди детей (children) исходного объекта. Эффект также масштабируется и вращается вместе с родительским объектом, так как является его дочерним элементом.

Практические советы и ограничения

Метод идеально подходит для быстрого прототипирования и добавления polish-эффектов. Однако стоит учесть:

* **Производительность:** Для каждого объекта создается дополнительный спрайт и текстура. Для десятков динамических объектов это может стать нагрузкой. * **Управление:** У эффекта стандартные параметры анимации. Если нужен уникальный timing, направление или цвет блика, возможно, придется писать кастомный эффект. * **Применимость:** Метод работает с объектами, являющимися экземплярами Phaser.GameObjects.Image или похожими, имеющими текстуру. Для графики, созданной через this.add.graphics(), он не сработает.

Вот как можно применить эффект к нескольким объектам сразу, передав массив:

const card1 = this.add.image(200, 300, 'card');
const card2 = this.add.image(400, 300, 'card');
const card3 = this.add.image(600, 300, 'card');

Phaser.Actions.AddEffectShine([card1, card2, card3]);

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

Phaser.Actions.AddEffectShine — это мощный инструмент "из коробки" для моментального улучшения визуала игры. Он избавляет от рутинной работы по созданию анимации бликов. Для экспериментов попробуйте применить эффект к интерактивным объектам (например, включать сияние при наведении курсора) или комбинировать его с другими действиями из класса Phaser.Actions, например, с Call для запуска логики по завершению цикла блика.