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

Визуальные эффекты с частицами оживляют любую игру. Часто их нужно не просто рассеивать, а направлять в конкретную точку — например, для создания потоков маны, собираемых монет или следов заклинаний. В этом примере показан лаконичный способ заставить частицы двигаться к заданной координате с помощью конфигурационного объекта `particles`. Мы разберем, как работают ключевые параметры `moveToX`, `moveToY` и `advance`, и почему их комбинация создает плавный и контролируемый эффект.

Версия 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('bg', 'assets/skies/gradient26.png');
        this.load.image('ball', 'assets/demoscene/green_ball.png');
    }

    create ()
    {
        this.add.image(400, 300, 'bg');

        this.add.particles(0, 0, 'ball', {
            x: { min: 300, max: 500 },
            y: -32,
            advance: 2000,
            moveToX: 400,
            moveToY: 570,
            lifespan: 2000,
            sortProperty: 'lifeT',
            sortOrderAsc: true
        });
    }
}

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

const game = new Phaser.Game(config);

Настройка сцены и загрузка ассетов

Класс Example расширяет Phaser.Scene. В методе preload мы загружаем два изображения: фоновое небо (bg) и спрайт частицы в виде зеленого шара (ball). Важно отметить, что метод load.setBaseURL задает базовый URL для всех загружаемых ресурсов, что упрощает указание относительных путей.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('bg', 'assets/skies/gradient26.png');
    this.load.image('ball', 'assets/demoscene/green_ball.png');
}

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

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

this.add.particles(0, 0, 'ball', {
    // Конфигурация эмиттера будет здесь
});

Конфигурация эмиттера: точка рождения и цель

В объекте конфигурации задаются свойства частиц. Параметры `xиyопределяют область, где будут появляться (рождаться) новые частицы. Здесьxзадан как диапазон от 300 до 500 пикселей, аy` фиксирован на -32 (чуть выше верхней границы экрана). Это создает эффект, будто частицы падают сверху.

x: { min: 300, max: 500 },
y: -32,

Движение к цели и управление временем

Сердце эффекта — параметры moveToX и moveToY. Они указывают целевую точку, к которой будет двигаться каждая частица. Здесь это координаты (400, 570) — центр по горизонтали и низ экрана. Параметр advance (в миллисекундах) определяет, за какое время частица должна достичь цели. Установка в 2000 мс означает плавное двухсекундное движение.

advance: 2000,
moveToX: 400,
moveToY: 570,

Длительность жизни и порядок отрисовки

lifespan задает общее время жизни частицы в миллисекундах (2000 мс). Частица исчезнет через 2 секунды после появления, даже если она уже достигла цели. Параметры sortProperty и sortOrderAsc управляют порядком отрисовки. Сортировка по 'lifeT' (оставшемуся времени жизни) по возрастанию гарантирует, что более старые (умирающие) частицы будут отрисовываться поверх новых, что может улучшить визуальную глубину эффекта.

lifespan: 2000,
sortProperty: 'lifeT',
sortOrderAsc: true

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

Объект config определяет основные настройки игры: тип рендерера, размеры холста, цвет фона и родительский HTML-элемент. Затем создается экземпляр игры new Phaser.Game(config), который запускает сцену Example.

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

const game = new Phaser.Game(config);

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

Используя всего несколько параметров в конфигурации particles, вы можете создавать сложные направленные эффекты. Экспериментируйте: измените advance для более резкого или замедленного движения, задайте случайное значение moveToX с помощью объекта { min, max } или комбинируйте несколько эмиттеров с разными целями для имитации взрыва, который собирается в одну точку.