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

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

Версия 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('pic', 'assets/pics/a-new-link-to-the-past-by-ptimm.jpg');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
    }

    create ()
    {
        this.add.image(400, 300, 'pic');
        const logo = this.add.image(400, 200, 'logo')
            .setVisible(false);

        //  Let's show the logo when the camera shakes, and hide it when it completes
        this.cameras.main.on('camerashakestart', function () {
            logo.setVisible(true);
        });

        this.cameras.main.on('camerashakecomplete', function () {
            logo.setVisible(false);
        });

        //  Every time you click, shake the camera
        this.input.on('pointerdown', function () {
            this.cameras.main.shake(500);
        }, this);
    }
}

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

const game = new Phaser.Game(config);

Основы: метод shake()

Основной инструмент для создания эффекта тряски — это метод shake() у камеры. Он доступен через главную камеру сцены this.cameras.main.

Метод принимает несколько параметров, но самый важный — длительность тряски в миллисекундах. В нашем примере тряска длится 500 мс (полсекунды) при каждом клике мыши.

this.cameras.main.shake(500);

Вызов этого метода немедленно запускает эффект: камера начинает хаотично дрожать в пределах заданной интенсивности (по умолчанию 0.05). Это создает впечатление удара или толчка.

Слушаем события камеры

Метод shake() генерирует два полезных события, на которые можно подписаться: camerashakestart и camerashakecomplete. Это позволяет синхронизировать другие игровые процессы с тряской.

В примере мы используем эти события, чтобы показывать и скрывать логотип Phaser. Логика проста: когда тряска начинается — показываем спрайт, когда заканчивается — прячем его.

this.cameras.main.on('camerashakestart', function () {
    logo.setVisible(true);
});

this.cameras.main.on('camerashakecomplete', function () {
    logo.setVisible(false);
});

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

Запуск по действию игрока

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

Мы используем систему ввода Phaser (this.input) и слушаем событие pointerdown. Каждый раз, когда игрок кликает, вызывается функция, которая и запускает тряску камеры.

this.input.on('pointerdown', function () {
    this.cameras.main.shake(500);
}, this);

Обратите внимание на третий аргумент this. Он задает контекст выполнения для callback-функции, чтобы внутри нее this указывал на текущую сцену (класс Example), а не на объект события ввода. Это позволяет корректно обращаться к this.cameras.main.

Настройка интенсивности и эйфактора

Метод shake() имеет расширенные параметры для тонкой настройки. Помимо длительности, вы можете задать интенсивность тряски и использовать встроенные эйз-функции (easing) для ее плавного затухания.

- **Интенсивность (intensity)** определяет силу смещения камеры. Значение по умолчанию — 0.05. Увеличьте его для более сильной тряски. - **Эйз-функция (ease)** управляет тем, как эффект развивается во времени. Например, Phaser.Math.Easing.Quadratic.Out заставит тряску быстро затухнуть к концу.

// Тряска с увеличенной силой и плавным затуханием
this.cameras.main.shake(1000, 0.1, false, Phaser.Math.Easing.Quadratic.Out);

Третий параметр (false) указывает, что тряска не должна быть мгновенной (true заставит камеру «дрогнуть» один раз в начале). Экспериментируйте с этими значениями, чтобы добиться нужного ощущения от ударов, шагов гиганта или землетрясений.

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

Эффект тряски камеры в Phaser 3 реализуется просто и эффективно с помощью метода shake(). Подписка на его события позволяет создавать сложную синхронизированную визуальную обратную связь. Для экспериментов попробуйте: запускать тряску при столкновении снаряда, комбинировать ее с эффектом вспышки (camera.flash), изменять интенсивность в зависимости от силы удара или создать непрерывную тряску для сцены землетрясения, останавливаемую по таймеру.