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

Простые спрайты с равномерным alpha — это скучно. Хотите создать эффект постепенного проявления, волны света или сложного перехода? В Phaser есть мощный инструмент — независимая анимация прозрачности каждого угла изображения. Эта статья покажет, как оживить статичную картинку, управляя каналами alphaTopLeft, alphaBottomRight и другими, превращая стандартный tween в визуально захватывающее зрелище. Вы научитесь создавать нестандартные переходы и растворения, которые добавят профессионализма вашей игре.

Версия 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.image('turkey', 'assets/pics/turkey-1985086.jpg');
        this.load.image('face', 'assets/pics/bw-face.png');
    }

    create ()
    {
        const face = this.add.image(400, 300, 'face');

        const sea = this.add.image(400, 300, 'turkey').setAlpha(0);

        this.tweens.add({
            targets: sea,
            alphaTopLeft: { value: 1, duration: 5000, ease: 'Power1' },
            alphaBottomRight: { value: 1, duration: 10000, ease: 'Power1' },
            alphaBottomLeft: { value: 1, duration: 5000, ease: 'Power1', delay: 5000 },
            yoyo: true,
            loop: -1

        });
    }

}

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

const game = new Phaser.Game(config);

Загрузка ресурсов и базовая сцена

В методе preload мы загружаем два изображения с удалённого сервера. Одно будет фоном (face), а второе (turkey) — нашим анимируемым объектом. Обратите внимание, что для turkey сразу выставляется начальная прозрачность 0, делая его полностью невидимым в начале сцены.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('turkey', 'assets/pics/turkey-1985086.jpg');
    this.load.image('face', 'assets/pics/bw-face.png');
}

В create мы размещаем оба изображения в центре экрана с координатами (400, 300). Изображение face остаётся статичным фоном.

create ()
{
    const face = this.add.image(400, 300, 'face');
    const sea = this.add.image(400, 300, 'turkey').setAlpha(0);
}

Сердце анимации: настройка твина

Основная магия происходит в объекте конфигурации, передаваемом в this.tweens.add(). Ключевое отличие от обычной анимации alpha — использование свойств для каждого угла изображения: alphaTopLeft, alphaTopRight, alphaBottomLeft, alphaBottomRight. Это позволяет контролировать прозрачность каждого угла независимо.

this.tweens.add({
    targets: sea,
    alphaTopLeft: { value: 1, duration: 5000, ease: 'Power1' },
    alphaBottomRight: { value: 1, duration: 10000, ease: 'Power1' },
    alphaBottomLeft: { value: 1, duration: 5000, ease: 'Power1', delay: 5000 },
    yoyo: true,
    loop: -1
});

Декомпозиция параметров твина

Давайте разберём каждое свойство объекта конфигурации:

*   `targets: sea` — указывает, к какому игровому объекту применять анимацию.
*   `alphaTopLeft: { value: 1, duration: 5000, ease: 'Power1' }` — левый верхний угол будет плавно становиться полностью непрозрачным (от 0 до 1) за 5 секунд.
*   `alphaBottomRight: { value: 1, duration: 10000, ease: 'Power1' }` — правый нижний угол будет делать то же самое, но в два раза медленнее (10 секунд), создавая диагональный градиент появления.
*   `alphaBottomLeft: { value: 1, duration: 5000, ease: 'Power1', delay: 5000 }` — левый нижний угол начнёт появляться только после задержки в 5 секунд (`delay: 5000`), а затем тоже за 5 секунд достигнет полной непрозрачности.
*   `yoyo: true` — после завершения анимации до конечных значений, она проиграется в обратном порядке (от 1 к 0).
*   `loop: -1` — анимация будет повторяться бесконечно.

Обратите внимание, что для alphaTopRight в этом примере не задано значение, поэтому этот угол останется полностью прозрачным (alpha = 0) на протяжении всей анимации, что создаёт дополнительную асимметрию.

Практическое применение и вариации

Такой подход открывает множество возможностей для визуальных эффектов, выходящих за рамки стандартного fade-in/fade-out.

* **Эффект сканирования или волны:** Анимируйте alphaTopLeft и alphaBottomRight с небольшой задержкой, чтобы создать движущуюся диагональную линию проявления. * **Сложные переходы между сценами:** Вместо простого затемнения, можно сделать переход, при котором новая сцена "проявляется" из одного угла экрана. * **Подсветка объектов:** Используйте это для эффекта постепенного выделения предмета в инвентаре или на карте.

Экспериментируйте с ease-функциями (например, 'Bounce', 'Back', 'Elastic') для каждого угла отдельно, чтобы создать ещё более динамичные и "живые" эффекты.

// Пример: "пружинящее" появление сверху и снизу
alphaTopLeft: { value: 1, duration: 2000, ease: 'Bounce.easeOut' },
alphaBottomRight: { value: 1, duration: 2000, ease: 'Elastic.easeOut' }

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

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

  1. заставить изображение "сворачиваться" в угол
  2. создать эффект круговой диафрагмы, управляя всеми четырьмя углами с разным временем и задержками
  3. привязать значения alpha к положению курсора мыши для интерактивного эффекта