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

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

Создание плавных и визуально привлекательных эффектов — ключ к захватывающему геймплею. В этой статье мы разберем, как система частиц Phaser позволяет легко анимировать их положение и вращение по заданным траекториям с помощью функций плавности (easing). Вы научитесь управлять параметрами `start`, `end` и `ease` эмиттера частиц, чтобы создавать сложные анимации, такие как заезд машин по трассе, без написания кадр за кадром.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('track', 'assets/particles/racetrack-bend.png');
        this.load.image('car', 'assets/sprites/car-red.png');
    }

    create ()
    {
        this.add.image(450, 300, 'track').setScale(0.8);

        this.add.particles(0, 0, 'car', {
            x: { start: 200, end: 850, ease: 'sine.in' },
            y: { start: 600, end: 100, ease: 'sine.out' },
            rotate: { start: 0, end: 90, ease: 'quad.in' },
            lifespan: 2200,
            frequency: 550
        });
    }
}

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

const game = new Phaser.Game(config);

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

Первым делом в методе preload() мы загружаем два изображения, которые будут использоваться в примере. Одно для фона (трассы), другое — для спрайта, который станет нашей частицей (машины). Обратите внимание, что базовый URL задается для удобства, чтобы указывать относительные пути.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('track', 'assets/particles/racetrack-bend.png');
    this.load.image('car', 'assets/sprites/car-red.png');
}

Создание фона и эмиттера частиц

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

Затем создается сам эмиттер частиц с помощью метода this.add.particles(). Первые два аргумента (0, 0) — это глобальные координаты эмиттера. Однако ключевая магия происходит в конфигурационном объекте, где мы определяем поведение каждой испускаемой частицы, используя спрайт 'car'.

create ()
{
    this.add.image(450, 300, 'track').setScale(0.8);

    this.add.particles(0, 0, 'car', {
        // Конфигурация анимации частиц
    });
}

Анимация свойств: от точки А к точке Б с плавностью

Сердце примера — конфигурация эмиттера. Вместо статичных значений мы передаем объекты для свойств `x,yиrotate. Каждый такой объект содержит три ключа:start(начальное значение),end(конечное значение) иease` (функция плавности перехода).

Частица (машина) будет рождаться со значениями start для каждого свойства и за время своей жизни (lifespan) плавно изменять их до значений end, следуя кривой, заданной ease.

{
    x: { start: 200, end: 850, ease: 'sine.in' },
    y: { start: 600, end: 100, ease: 'sine.out' },
    rotate: { start: 0, end: 90, ease: 'quad.in' },
    lifespan: 2200,
    frequency: 550
}

- **x, y**: Определяют траекторию движения. Машина начинает в точке (200, 600) и заканчивает в (850, 100), двигаясь по диагонали вверх и вправо. - **rotate**: Задает вращение. Машина поворачивается от 0 до 90 градусов за время жизни. - **lifespan**: Время жизни частицы в миллисекундах (2200 мс = 2.2 сек). - **frequency**: Интервал между испусканием частиц в миллисекундах (новая машина каждые 550 мс).

Выбор функций плавности (Easing)

Параметр ease — это мощный инструмент, контролирующий скорость изменения анимации. Phaser использует имена из библиотеки Tween. В нашем примере: - 'sine.in' для оси X: движение начинается медленно и ускоряется к концу. - 'sine.out' для оси Y: движение начинается быстро и замедляется к финишу. - 'quad.in' для вращения: поворот начинается очень медленно, затем резко ускоряется.

Использование разных функций для разных свойств создает более естественное и "оживленное" движение, имитирующее разгон, торможение и вхождение в поворот.

Конфигурация игры и запуск

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

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

const game = new Phaser.Game(config);

После создания экземпляра Phaser.Game сцена автоматически запускает свои методы preload, create, и начинается визуальный эффект.

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

Система частиц Phaser с поддержкой анимации через start, end и ease — это простой, но невероятно выразительный инструмент. Вы можете анимировать не только положение и вращение, но и масштаб, прозрачность (alpha) и даже оттенок (tint). Поэкспериментируйте: попробуйте разные функции плавности ('back', 'bounce', 'elastic'), создайте эмиттер, где частицы разлетаются из центра по спирали, или сымитируйте падающие листья с хаотичным вращением и замедлением внизу экрана.