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

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

Плавная анимация — ключ к приятной игровой механике. В Phaser система Tween предоставляет мощные инструменты для создания сложных движений. В этой статье мы разберем, как использовать параметр `easeParams` для настройки упругого эффекта (`Elastic`), который имитирует движение пружины. Вы научитесь контролировать амплитуду и период колебаний, добавляя объектам в вашей игре ощущение веса и инерции.

Версия 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');

        this.tweens.add({
            targets: image,
            x: 600,
            duration: 3000,
            ease: 'Elastic',
            easeParams: [1.5, 0.5],
            delay: 1000
        });
    }
}

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

const game = new Phaser.Game(config);

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

Вся логика примера находится в классе сцены Example. В методе preload() мы загружаем спрайт, который будет анимироваться. Обратите внимание на использование setBaseURL — это удобно для указания базового пути к ресурсам.

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

Создание визуальных маркеров и цели анимации

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

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

Настройка Tween с упругим эффектом

Сердце примера — создание твина. Мы передаем объект с конфигурацией в this.tweens.add(). Ключевые параметры: * targets: объект для анимации. * `x`: конечная координата по оси X. * duration: длительность анимации в миллисекундах. * ease: функция плавности. 'Elastic' создает колебания. * easeParams: массив параметров для уточнения функции ease. * delay: задержка перед началом анимации.

this.tweens.add({
    targets: image,
    x: 600,
    duration: 3000,
    ease: 'Elastic',
    easeParams: [1.5, 0.5],
    delay: 1000
});

Параметр easeParams специфичен для функции Elastic. Первое значение (1.5) определяет амплитуду колебаний — чем больше, тем сильнее "выброс" за конечную точку. Второе значение (0.5) задает период — чем меньше, тем чаще колебания.

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

Стандартная конфигурация игры Phaser. Она определяет тип рендерера, размеры холста, цвет фона и корневую сцену.

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

const game = new Phaser.Game(config);

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

Использование ease: 'Elastic' с параметрами easeParams — это простой способ добавить в игру динамичные, "живые" анимации. Экспериментируйте с этими параметрами, чтобы добиться разного ощущения: от едва заметной дрожи до сильного пружинящего отскока. Попробуйте применить этот твин не только к позиции (`x,y), но и к масштабу (scale) или углу поворота (angle`) объектов.