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

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

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

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

Живой запуск

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

Исходный код

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

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.spritesheet('diamonds', 'assets/sprites/diamonds32x24x5.png', { frameWidth: 32, frameHeight: 24 });
    }

    create ()
    {
        const group = this.add.group({ key: 'diamonds', frame: 0, frameQuantity: 50, setXY: { x: 32, y: 32, stepX: 14 }});
        Phaser.Actions.SetAlpha(group.getChildren(), 0, 1 / 50);
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и загрузка ассетов

В методе preload мы загружаем необходимые ресурсы. Здесь используется спрайтшит с алмазами. Важно правильно задать базовый URL и параметры спрайтшита.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.spritesheet('diamonds', 'assets/sprites/diamonds32x24x5.png', { frameWidth: 32, frameHeight: 24 });
}

Создание группы спрайтов

В методе create мы создаём группу спрайтов. Группа (Group) в Phaser — это удобный контейнер для управления множеством однотипных объектов. Мы указываем ключ текстуры, начальный кадр, количество спрайтов и их начальное расположение с шагом.

const group = this.add.group({
    key: 'diamonds',
    frame: 0,
    frameQuantity: 50,
    setXY: { x: 32, y: 32, stepX: 14 }
});

Параметр setXY автоматически расставляет 50 спрайтов в ряд, начиная с координат (32, 32) и смещая каждый следующий на 14 пикселей по оси X (stepX: 14).

Применение действия SetAlpha

Самый важный шаг — применение действия Phaser.Actions.SetAlpha. Этот метод принимает массив игровых объектов (в нашем случае — детей группы, полученных через group.getChildren()) и задаёт им значение прозрачности.

Phaser.Actions.SetAlpha(group.getChildren(), 0, 1 / 50);

Второй аргумент (`0) — это начальное значение альфа-канала для первого объекта в массиве. Третий аргумент (1 / 50`) — это шаг увеличения (инкремент) альфа-канала для каждого последующего объекта. Таким образом, первый спрайт будет полностью прозрачным (альфа = 0), а последний — почти полностью непрозрачным (альфа ≈ 1), создавая плавный градиентный эффект.

Настройка конфигурации игры

Конфигурационный объект config определяет основные параметры нашего Phaser-приложения: тип рендерера, размеры холста, цвет фона и корневую сцену.

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

После этого создаётся экземпляр игры new Phaser.Game(config), который запускает весь процесс.

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

Метод Phaser.Actions.SetAlpha — это мощный и лаконичный способ управления прозрачностью множества объектов. Вы можете экспериментировать с другими действиями из семейства Phaser.Actions, например, SetTint или Rotate, для создания сложных композиционных анимаций. Попробуйте изменить инкремент на отрицательное значение, чтобы получить обратный градиент, или примените действие в цикле scene.update для создания пульсирующего эффекта прозрачности.