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

Оптимизация производительности — ключевой аспект разработки игр с физикой. Когда объекты перестают двигаться, их постоянный расчет становится пустой тратой ресурсов. Phaser в связке с Matter.js предлагает элегантное решение: систему "сна" физических тел. Эта статья покажет, как задействовать эту систему и реагировать на события перехода объектов в спящий режим и пробуждения, что позволит вам создавать более сложные и эффективные симуляции.

Версия 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('ball', 'assets/sprites/pangball.png');
    }

    create ()
    {
        this.matter.world.setBounds(0, 0, 800, 600, 32, true, true, false, true);

        this.time.addEvent({
            delay: 500,
            callback: function ()
            {
                const ball = this.matter.add.image(Phaser.Math.Between(100, 700), Phaser.Math.Between(-600, 0), 'ball');
                ball.setCircle();
                ball.setFriction(0.005).setBounce(1);
                ball.setSleepEvents(true, true);
            },
            callbackScope: this,
            repeat: 64
        });

        this.matter.world.on('sleepstart', (event, body) =>
        {
            event.source.gameObject.setTint(0xff0000);
        });

        this.matter.world.on('sleepend', event =>
        {
            event.source.gameObject.setTint(0xffffff);
        });
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#1d1d1d',
    parent: 'phaser-example',
    physics: {
        default: 'matter',
        matter: {
            enableSleeping: true
        }
    },
    scene: Example
};

const game = new Phaser.Game(config);

Включение системы сна в Matter.js

Чтобы начать использовать события сна, необходимо активировать саму систему sleeping в конфигурации движка Matter. Без этого шага события генерироваться не будут.

physics: {
    default: 'matter',
    matter: {
        enableSleeping: true // Ключевой параметр
    }
}

Эта настройка передается в конструктор Phaser.Game. Она сообщает физическому движку, что он должен отслеживать неподвижные тела и переводить их в энергосберегающий "спящий" режим, временно останавливая расчеты для них.

Создание объектов со слушателями сна

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

ball.setSleepEvents(true, true);

Первый параметр включает события начала сна (sleepstart), второй — события окончания сна (sleepend). Без вызова этого метода для конкретного тела, даже при включенном enableSleeping, события для него не поступят. Следующие строки кода настраивают форму тела (сферу) и его физические свойства.

ball.setCircle(); // Делает коллайдер тела круглым
ball.setFriction(0.005).setBounce(1); // Минимальное трение и идеальный отскок

Обработка событий `sleepstart` и `sleepend`

Основная логика реакции на сон и пробуждение объектов реализуется через стандартные слушатели событий Phaser. События генерируются на this.matter.world.

this.matter.world.on('sleepstart', (event, body) => {
    event.source.gameObject.setTint(0xff0000); // Окрашиваем объект в красный при засыпании
});

Обратите внимание: event.source.gameObject — это ссылка на экземпляр Phaser.GameObjects.Image, который связан с физическим телом (body). Это позволяет легко управлять визуальным представлением объекта.

Аналогично обрабатывается событие пробуждения:

this.matter.world.on('sleepend', event => {
    event.source.gameObject.setTint(0xffffff); // Возвращаем исходный цвет при пробуждении
});

Практический сценарий: оптимизация и визуальная обратная связь

В демонстрации мячики, скатившись вниз и успокоившись, засыпают и окрашиваются в красный. Если другой мячик столкнется со спящим и приведет его в движение, тот проснется и снова станет белым. Это наглядная демонстрация двух преимуществ:

1. **Оптимизация:** Спящие тела не участвуют в непрерывных расчетах физики, что снижает нагрузку на CPU. 2. **Геймдизайн:** Визуальная индикация состояния объекта может стать основой для игровой механики. Например, спящих врагов можно безопасно обойти, а проснувшихся — они заметят героя.

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

События сна в Matter.js — мощный инструмент для создания эффективных и интерактивных физических миров. Они позволяют экономить ресурсы и добавлять глубину игровому процессу через реакцию на состояние объектов. Для экспериментов попробуйте изменить условия пробуждения (например, разбудить объект при клике мышью), реализовать разные визуальные эффекты для спящих состояний или использовать сон для управления группами объектов, которые активируются только при приближении игрока.