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

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

Встроенные функции плавности (easing) в Phaser позволяют создавать естественные и привлекательные анимации. Однако их поведение часто можно тонко настроить под свои нужды. В этой статье мы разберем, как использовать параметр `easeParams` для изменения стандартного поведения эффекта `Back.ease`, что позволяет добиться более выраженного или, наоборот, более сдержанного "отскока" анимации. Это ключевой навык для создания уникальной игровой динамики.

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

    create() {
        var marker = this.add.image(100, 300, 'block').setAlpha(0.3);
        var image = this.add.image(100, 300, 'block');

        //  The 'Back' ease takes one argument: overshoot.
        //  The default value is 1.70158
        //  But you can set whatever you like in the easeParams array

        this.tweens.add({
            targets: image,
            x: 600,
            duration: 3000,
            ease: 'Back',
            easeParams: [3.5],
            delay: 1000,
            yoyo: true,
            loop: -1
        });
    }

}

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

const game = new Phaser.Game(config);

Разбираем пример: настройка Back.ease

Представленный код создает базовую сцену с одним спрайтом, который перемещается по горизонтали с эффектом "отскока" (overshoot) в начале и конце анимации. По умолчанию эффект Back.ease имеет параметр overshoot со значением 1.70158. В примере это значение увеличено до 3.5, что делает "отскок" более экстремальным.

Сначала в методе preload() загружается спрайт.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('block', 'assets/sprites/block.png');

Затем в create() создаются два спрайта: один служит статичным маркером начальной позиции, а второй — анимируемым объектом.

var marker = this.add.image(100, 300, 'block').setAlpha(0.3);
var image = this.add.image(100, 300, 'block');

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

Анимация создается с помощью this.tweens.add(). Ключевые параметры: - targets: объект для анимации. - `x`: целевая координата. - duration: длительность в миллисекундах. - ease: функция плавности. - yoyo и loop: заставляют анимацию повторяться.

Обратите внимание на параметр easeParams. Это массив, в который передаются дополнительные аргументы для выбранной функции плавности. Для Back.ease это один аргумент — сила overshoot.

this.tweens.add({
    targets: image,
    x: 600,
    duration: 3000,
    ease: 'Back',
    easeParams: [3.5], // Увеличиваем силу "отскока"
    delay: 1000,
    yoyo: true,
    loop: -1
});

Как работает параметр overshoot?

Параметр overshoot (перерегулирование) в Back.ease определяет, насколько сильно анимация "пролетит" за целевую точку перед тем, как вернуться к ней. Это создает эффект упругости или инерции.

- Значение **по умолчанию (1.70158)** дает умеренный, приятный глазу отскок. - **Большее значение (например, 3.5)** делает анимацию более "пружинистой" и драматичной. Объект сильнее залетает за конечную позицию. - **Меньшее значение (например, 0.5)** смягчает эффект, делая отскок почти незаметным. - **Значение 0** отключает эффект отскока, превращая Back.ease в линейную или другую базовую интерполяцию (в зависимости от реализации).

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

Конфигурация игры и сцены

Код завершается стандартной конфигурацией игры Phaser, которая задает размеры холста, цвет фона и указывает используемый класс сцены.

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

const game = new Phaser.Game(config);

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

Использование easeParams открывает тонкий контроль над встроенными функциями плавности Phaser. Вы можете не только усилить эффект Back.ease, но и настраивать другие easing-функции, которые принимают параметры (например, Elastic.ease). Для экспериментов попробуйте: 1. Изменить значение в easeParams на отрицательное. 2. Применить easeParams к другим функциям, указанным в документации Phaser. 3. Связать силу overshoot с игровой логикой (например, чем сильнее удар, тем больше отскок).