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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.atlas('flares', 'assets/particles/flares.png', 'assets/particles/flares.json');
    }

    create ()
    {
        const particles = this.add.particles('flares');

        particles.createEmitter({
            frame: 'green',
            x: 100,
            y: 300,
            lifespan: 2000,
            speedX: { start: 100, end: 400, steps: 12 },
            speedY: { min: -20, max: 20 },
            scale: { start: 0.7, end: 0.2 },
            blendMode: 'ADD'
        });
    }
}

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

const game = new Phaser.Game(config);

Разбираем пример: Конфигурация эмиттера

В исходном коде создается эмиттер частиц с использованием атласа flares. Ключевой интерес представляет параметр speedX, заданный не простым числом, а объектом с настройками.

speedX: { start: 100, end: 400, steps: 12 },
speedY: { min: -20, max: 20 },

Здесь по горизонтальной оси (speedX) скорость частицы будет меняться от 100 до 400 пикселей в секунду. Но не плавно, а через 12 дискретных шагов. Это значит, что частица 12 раз резко сменит свою горизонтальную скорость в течение жизни, создавая ступенчатый эффект движения. По вертикали (speedY) скорость выбирается случайно из диапазона для каждой частицы, добавляя хаотичности.

Как работает параметр `steps`?

Параметр steps применяется к свойствам, которые могут иметь начальное (start) и конечное (end) значение, например, скорость, масштаб (scale) или альфа-канал (alpha).

Без steps Phaser интерполирует значение линейно от start к end за время жизни частицы. С steps этот интервал разбивается на указанное количество равных отрезков. Значение свойства "перескакивает" на новую величину в конце каждого отрезка времени, а не меняется непрерывно.

// Плавное изменение скорости (без steps)
speed: { start: 100, end: 400 }

// Ступенчатое изменение скорости (со steps)
speed: { start: 100, end: 400, steps: 4 }
// Скость будет принимать значения: 100, 175, 250, 325, 400.

В нашем примере за время жизни в 2000 мс скорость по X сменится 12 раз, т.е. примерно каждые 166 мс.

Практическое применение и комбинации

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

Рассмотрим эмиттер для имитации искр от точильного станка:

particles.createEmitter({
    frame: ['red', 'yellow', 'white'], // Используем несколько цветов
    x: 400,
    y: 300,
    lifespan: 1500,
    quantity: 2,
    speedX: { start: 50, end: 250, steps: 8 },
    speedY: { start: -300, end: -50, steps: 5 },
    scale: { start: 0.5, end: 0.1, steps: 3 },
    blendMode: 'ADD',
    radial: false
});

Здесь speedY также задан ступенчато, создавая эффект "подпрыгивающих" искр, которые теряют вертикальную скорость рывками. Масштаб (scale) уменьшается в 3 резких шага, что может выглядеть как быстрое затухание.

Отличие от `ease` и случайных значений

Важно не путать steps с другими способами управления свойствами.

* **steps vs Функции плавности (ease):** ease управляет *кривой* непрерывного изменения (например, ускорение в начале, замедление в конце). steps же полностью заменяет плавность на дискретные скачки. * **steps vs Случайный диапазон (min/max):** min и max задают случайное значение для каждой *новой* частицы в момент ее создания. Параметр steps управляет изменением свойства *во время жизни* одной конкретной частицы.

// Случайная начальная скорость для каждой новой частицы
speed: { min: 100, max: 400 }

// Ступенчатое изменение скорости в течение жизни одной частицы
speed: { start: 100, end: 400, steps: 12 }

// Можно совместить: случайная начальная скорость + ступенчатое изменение
speedX: { start: { min: 50, max: 150 }, end: 400, steps: 6 }

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

Параметр steps — это отличный способ добавить вашим визуальным эффектам ритм, механистичность или более контролируемую динамику. Он особенно полезен для стилизованных эффектов, технологичных интерфейсов (сканирующие лучи, цифровые частицы) или имитации прерывистых физических процессов. **Идеи для экспериментов:** 1. Примените steps к свойству alpha, чтобы частицы мигали с определенной частотой. 2. Создайте эмиттер с steps для scale и speed, чтобы смоделировать движение капель дождя по стеклу. 3. Скомбинируйте эмиттер с обычным плавным эмиттером: один создает плавный шлейф, а второй — ритмичные всплески на его фоне.