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

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

Создание визуальных эффектов для камеры — это мощный инструмент для усиления игрового опыта. С помощью встроенных методов Phaser вы можете легко добавить затемнение (fade), вспышку (flash) и тряску (shake) без написания сложного кода. Эта статья покажет, как использовать несколько камер с разными эффектами одновременно, что идеально подходит для кат-сцен, получения урона или драматических событий.

Версия 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('CherilPerils', 'assets/tests/camera/CherilPerils.png');
    }

    create ()
    {
        this.add.image(0, 0, 'CherilPerils');

        this.cameras.main.setViewport(5, 5, 390, 290);

        this.fadeCamera = this.cameras.add(405, 5, 390, 290);
        this.flashCamera = this.cameras.add(5, 305, 390, 290);
        this.shakeCamera = this.cameras.add(405, 305, 390, 290);

        this.fadeCamera.fade(2000);

        this.flashCamera.flash(1000);
    }

    update ()
    {
        // flashCamera.flash(750);
        this.shakeCamera.shake(1000, 0.025);

        if (this.fadeCamera.fadeEffect.alpha >= 1)
        {
            this.fadeCamera.fadeEffect.alpha = 0;
            this.fadeCamera.fade(2000);
        }
    }
}

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

const game = new Phaser.Game(config);

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

В Phaser вы можете работать с основной камерой (this.cameras.main) и создавать дополнительные. Каждая камера имеет свой собственный viewport — прямоугольную область на экране, где отображается её содержимое. В примере мы создаём четыре области.

this.cameras.main.setViewport(5, 5, 390, 290);

this.fadeCamera = this.cameras.add(405, 5, 390, 290);
this.flashCamera = this.cameras.add(5, 305, 390, 290);
this.shakeCamera = this.cameras.add(405, 305, 390, 290);

Метод setViewport задаёт область для основной камеры, а this.cameras.add создаёт новую камеру с указанными координатами (x, y) и размерами (width, height). Таким образом, мы размещаем четыре мини-вида одного и того же изображения на экране.

Эффект затемнения (Fade)

Эффект fade плавно затемняет камеру до чёрного цвета (или другого, если задан), а затем может быть сброшен. Это часто используется для переходов между сценами.

this.fadeCamera.fade(2000);

Здесь fade(2000) запускает эффект затемнения на 2000 миллисекунд (2 секунды). После завершения затемнения, свойство alpha эффекта достигает 1 (полная непрозрачность). В коде update мы отслеживаем это состояние, чтобы циклически перезапускать эффект.

if (this.fadeCamera.fadeEffect.alpha >= 1)
{
    this.fadeCamera.fadeEffect.alpha = 0;
    this.fadeCamera.fade(2000);
}

Мы вручную сбрасываем alpha в 0 и снова вызываем fade, создавая бесконечный цикл плавных переходов.

Эффект вспышки (Flash)

Эффект flash создаёт резкую белую вспышку на камере, которая быстро исчезает. Идеально подходит для имитации взрыва, удара молнии или получения урона.

this.flashCamera.flash(1000);

Метод flash(1000) запускает вспышку длительностью в 1 секунду. В отличие от fade, этот эффект в данном примере вызывается один раз в create, поэтому вспышка происходит только при старте сцены. Чтобы повторять её, вы можете вызывать flash по какому-либо событию (например, столкновению) или в update по условию.

Эффект тряски (Shake)

Эффект shake заставляет камеру дрожать в заданных пределах. Он отлично передаёт воздействия: землетрясения, мощные удары или тяжёлые шаги.

this.shakeCamera.shake(1000, 0.025);

В методе shake первый параметр — длительность в миллисекундах (1000 мс = 1 секунда). Второй параметр — интенсивность тряски (0.025). В исходном примере этот вызов находится внутри update, что означает, что тряска перезапускается каждый кадр, создавая непрерывный эффект. На практике это может быть излишним — обычно shake вызывается однократно в ответ на событие.

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

Эффекты камеры — это не просто украшение. Их правильное использование направляет внимание игрока и усиливает нарратив. - **Fade:** Используйте для плавного начала/окончания уровня, смерти персонажа или перехода во времени. - **Flash:** Применяйте при взрывах, использовании вспышки, резкой смене освещения. - **Shake:** Добавляйте при падении тяжёлых объектов, выстрелах мощного оружия, столкновениях.

Важно управлять интенсивностью и длительностью эффектов, чтобы они не раздражали игрока. Не забывайте, что вы можете создавать множество камер для split-screen или сложных интерфейсов, применяя эффекты выборочно.

// Пример: трясти камеру только при получении урона
this.player.on('hit', () => {
    this.cameras.main.shake(300, 0.01);
});

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

Эффекты fade, flash и shake в Phaser — это простой, но эффективный способ добавить динамики и драматизма в вашу игру. Поэкспериментируйте, комбинируя их: попробуйте сделать вспышку с последующей тряской для имитации взрыва, или затемнение с дрожью для драматичной смерти. Исследуйте другие методы камеры, такие как zoom, pan или setBackgroundColor, чтобы ещё больше расширить свои возможности.