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

Создание сложных и динамичных визуальных эффектов — ключевая часть разработки игр. Эмиттеры частиц в Phaser позволяют легко генерировать такие эффекты, но иногда требуется тонкая настройка поведения каждой частицы. В этой статье мы разберем, как использовать объектную конфигурацию свойства `lifespan` для создания эффекта постепенного изменения времени жизни частиц, что открывает новые возможности для визуализации процессов, зависящих от времени или состояния.

Версия 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: 'red',
            x: 400, y: 300,
            lifespan: { start: 100, end: 2000, steps: 1000 },
            speed: 200,
            quantity: 1,
            scale: 0.4,
            blendMode: 'ADD'
        });
    }
}

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

const game = new Phaser.Game(config);

Что такое `lifespan` и как его задать

Свойство lifespan определяет время жизни частицы в миллисекундах. По истечении этого времени частица автоматически уничтожается. Чаще всего его задают как одно число.

lifespan: 2000

Однако Phaser позволяет использовать более сложную объектную форму записи, где можно указать начальное (start), конечное (end) значение и количество шагов (steps) между ними. Это дает возможность создавать эмиттеры, где каждая новая частица имеет немного другое время жизни.

Разбираем конфигурацию: от и до

В примере конфигурация lifespan задана как объект с тремя свойствами. Давайте посмотрим, как они работают.

lifespan: { start: 100, end: 2000, steps: 1000 }

* start: 100 — минимальное время жизни первой частицы в последовательности (100 мс). * end: 2000 — максимальное время жизни последней частицы в последовательности (2000 мс или 2 секунды). * steps: 1000 — количество уникальных значений между start и end. Другими словами, эмиттер будет циклически перебирать 1000 различных значений времени жизни, равномерно распределенных между 100 и 2000 мс.

Таким образом, первая испущенная частица проживет ~100 мс, вторая — ~102 мс, и так далее, пока не будет достигнуто значение ~2000 мс, после чего счетчик сбросится к start.

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

В методе create() сцены мы сначала создаем менеджер частиц, загружая в него текстуру 'flares'. Затем создаем и настраиваем эмиттер с помощью createEmitter().

create ()
{
    // Создаем систему частиц, использующую атлас 'flares'
    const particles = this.add.particles('flares');

    particles.createEmitter({
        frame: 'red',           // Используем красный фрейм из атласа
        x: 400, y: 300,         // Позиция эмиттера в центре экрана
        lifespan: { start: 100, end: 2000, steps: 1000 }, // Ступенчатое время жизни
        speed: 200,             // Начальная скорость частицы (пикселей в секунду)
        quantity: 1,            // Количество частиц, испускаемых за один выброс
        scale: 0.4,             // Масштаб частицы
        blendMode: 'ADD'        // Режим наложения для эффекта свечения
    });
}

Ключевой параметр здесь — quantity: 1. Благодаря ему эмиттер испускает частицы по одной, и мы можем наглядно наблюдать, как с каждой новой частицей ее время жизни (lifespan) постепенно увеличивается, создавая эффект "лестницы" или последовательности.

Практическое применение и аналогии

Такой подход полезен не только для абстрактных визуальных эффектов. Его можно применить для моделирования различных игровых процессов:

* **Прогресс-бары или таймеры:** Представьте, что частицы — это сегменты индикатора зарядки оружия или заполнения шкалы способности. Разное время жизни сегментов может визуализировать этапы процесса. * **Эффекты рассеивания:** Например, дым от костра, где первые клубы (частицы с малым lifespan) быстро исчезают, а последующие (с большим lifespan) задерживаются дольше, создавая более реалистичную картину. * **Пошаговые анимации:** Последовательное появление и исчезновение элементов интерфейса или подсказок.

По сути, steps разбивает линейную интерполяцию между start и end на дискретные шаги, давая вам контроль над последовательностью значений, а не просто случайным разбросом.

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

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