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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    controls;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.atlas('gems', 'assets/tests/columns/gems.png', 'assets/tests/columns/gems.json');
    }

    create ()
    {
        this.physics.world.setBounds(0, 0, 800 * 8, 600 * 8);

        const spriteBounds = Phaser.Geom.Rectangle.Inflate(Phaser.Geom.Rectangle.Clone(this.physics.world.bounds), -100, -100);

        this.anims.create({ key: 'diamond', frames: this.anims.generateFrameNames('gems', { prefix: 'diamond_', end: 15, zeroPad: 4 }), repeat: -1 });
        this.anims.create({ key: 'prism', frames: this.anims.generateFrameNames('gems', { prefix: 'prism_', end: 6, zeroPad: 4 }), repeat: -1 });
        this.anims.create({ key: 'ruby', frames: this.anims.generateFrameNames('gems', { prefix: 'ruby_', end: 6, zeroPad: 4 }), repeat: -1 });
        this.anims.create({ key: 'square', frames: this.anims.generateFrameNames('gems', { prefix: 'square_', end: 14, zeroPad: 4 }), repeat: -1 });

        //  Create loads of random sprites

        const anims = [ 'diamond', 'prism', 'ruby', 'square' ];

        const blocks = [];

        for (let i = 0; i < 500; i++)
        {
            const pos = Phaser.Geom.Rectangle.Random(spriteBounds);

            const block = this.physics.add.sprite(pos.x, pos.y, 'gems');

            block.setVelocity(Phaser.Math.Between(200, 400), Phaser.Math.Between(200, 400));
            block.setBounce(1).setCollideWorldBounds(true);

            if (Math.random() > 0.5)
            {
                block.body.velocity.x *= -1;
            }
            else
            {
                block.body.velocity.y *= -1;
            }

            block.play(Phaser.Math.RND.pick(anims));

            blocks.push(block);
        }

        this.physics.add.collider(blocks, blocks);

        const cursors = this.input.keyboard.createCursorKeys();

        const controlConfig = {
            camera: this.cameras.main,
            left: cursors.left,
            right: cursors.right,
            up: cursors.up,
            down: cursors.down,
            zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
            zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
            acceleration: 0.06,
            drag: 0.0005,
            maxSpeed: 1.0
        };

        this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);

        this.add.text(0, 0, 'Use Cursors to scroll camera.\nQ / E to zoom in and out', { font: '18px Courier', fill: '#00ff00' });
    }

    update (time, delta)
    {
        this.controls.update(delta);
    }
}

const config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    pixelArt: true,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 100 },
            debug: true
        }
    },
    scene: Example
};

const game = new Phaser.Game(config);

Подготовка мира и анимаций

Перед созданием объектов необходимо задать границы физического мира и подготовить анимации. В примере мир значительно превышает размер экрана, что позволяет камере перемещаться по обширной области.

this.physics.world.setBounds(0, 0, 800 * 8, 600 * 8);

Границы мира установлены в 8 раз больше размеров экрана (800x600). Это создаёт большую арену для движения объектов.

Затем создаётся уменьшенная прямоугольная область (spriteBounds) внутри этих границ, чтобы объекты не появлялись вплотную к краям.

const spriteBounds = Phaser.Geom.Rectangle.Inflate(Phaser.Geom.Rectangle.Clone(this.physics.world.bounds), -100, -100);

Метод Rectangle.Clone создаёт копию границ мира, а Rectangle.Inflate «сжимает» её на 100 пикселей с каждой стороны. Это стартовая зона для генерации спрайтов.

Далее создаются четыре циклические анимации из atlas-листа 'gems'. Каждая анимация использует кадры с определённым префиксом в имени.

this.anims.create({ key: 'diamond', frames: this.anims.generateFrameNames('gems', { prefix: 'diamond_', end: 15, zeroPad: 4 }), repeat: -1 });

Ключевые параметры: key — уникальное имя анимации, repeat: -1 — бесконечное повторение. generateFrameNames автоматически формирует массив кадров на основе шаблона имени.

Массовое создание физических тел

В цикле создаются 500 физических спрайтов со случайными начальными параметрами.

const pos = Phaser.Geom.Rectangle.Random(spriteBounds);
const block = this.physics.add.sprite(pos.x, pos.y, 'gems');

Phaser.Geom.Rectangle.Random() возвращает случайную точку внутри заданного прямоугольника (spriteBounds). this.physics.add.sprite() сразу создаёт спрайт с телом Arcade Physics.

Каждому телу задаётся начальная скорость и упругость.

block.setVelocity(Phaser.Math.Between(200, 400), Phaser.Math.Between(200, 400));
block.setBounce(1).setCollideWorldBounds(true);

setVelocity() устанавливает скорость по осям X и Y. setBounce(1) означает идеально упругие столкновения (скорость не теряется). setCollideWorldBounds(true) включает отскок от границ мировых координат, заданных ранее.

Затем для случайного разнообразия направление скорости по одной из осей инвертируется, и спрайту проигрывается случайная анимация из списка.

block.play(Phaser.Math.RND.pick(anims));

Все созданные объекты сохраняются в массив blocks.

Обработка столкновений и управление камерой

Самый важный для производительности момент — добавление единственного коллайдера для всего массива объектов.

this.physics.add.collider(blocks, blocks);

Метод this.physics.add.collider() настраивает взаимные столкновения между всеми объектами в группе (или, как здесь, между всеми элементами одного массива). Arcade Physics сам рассчитает столкновения каждого с каждым.

Для навигации по большому миру реализовано сглаженное управление камерой с помощью класса SmoothedKeyControl.

const controlConfig = {
    camera: this.cameras.main,
    left: cursors.left,
    right: cursors.right,
    up: cursors.up,
    down: cursors.down,
    zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
    zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
    acceleration: 0.06,
    drag: 0.0005,
    maxSpeed: 1.0
};
this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);

В конфигурации указывается камера, привязка клавиш, ускорение, «трение» (drag) и максимальная скорость движения. Такой подход даёт плавное, инерционное управление, а не мгновенные «телепорты» камеры.

В методе update состояние контролов обновляется с каждым кадром.

update (time, delta)
{
    this.controls.update(delta);
}

Передача delta (время, прошедшее с предыдущего кадра) обеспечивает независимость скорости движения камеры от частоты кадров.

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

Пример показывает, как Phaser Arcade Physics легко справляется с сотнями сталкивающихся тел, а система анимаций и камер позволяет создать живой, интерактивный мир. Для экспериментов попробуйте: изменить количество тел и проверить производительность; настроить гравитацию или bounce в конфиге физики; заменить коллайдер на overlap для обработки пересечений без отталкивания; или привязать камеру к одному из объектов, создав эффект «лидера» стаи.