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

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

При разработке игр часто возникает необходимость сохранить состояние физического мира или передать его по сети. Phaser с плагином Matter.js предоставляет для этого элегантное решение — метод `toJSON()`. Эта статья покажет, как легко сериализовать любое тело Matter в стандартный JSON-формат. Вы научитесь извлекать все ключевые параметры тела (позицию, скорость, угол и свойства материала) для их дальнейшего использования в сохранениях игры, реплеях или для отладки сложных физических взаимодействий.

Версия 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('block', 'assets/sprites/block.png');
        this.load.image('platform', 'assets/sprites/platform.png');
    }

    create ()
    {
        // this.matter.add.image(400, 550, 'platform', null, { isStatic: true });

        const block = this.matter.add.sprite(400, 300, 'block');

        const data = block.toJSON();

        console.log(data);
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#1b1464',
    parent: 'phaser-example',
    physics: {
        default: 'matter',
        matter: {
            gravity: {
                x: 0,
                y: 0
            }
        }
    },
    scene: Example
};

const game = new Phaser.Game(config);

Зачем нужна сериализация тела?

Метод toJSON() объекта тела Matter.js преобразует все его физические свойства в простой JavaScript-объект. Это полезно в нескольких сценариях:

* **Сохранение игры:** Вы можете записать состояние всех тел в уровне, чтобы позже восстановить его. * **Сетевая синхронизация:** В мультиплеерных играх JSON-представление тела можно отправить другим игрокам. * **Отладка:** Вместо того чтобы вручную выводить множество свойств, вы одним вызовом получаете полную картину состояния объекта в консоли.

В предоставленном примере показана базовая работа этого метода. Давайте разберем его по шагам.

Подготовка сцены и физики

В первую очередь мы настраиваем сцену и физический движок Matter.js. Ключевой момент — правильная конфигурация в объекте config.

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#1b1464',
    parent: 'phaser-example',
    physics: {
        default: 'matter', // Активируем Matter.js как физический движок
        matter: {
            gravity: {
                x: 0,
                y: 0 // Для наглядности отключаем гравитацию
            }
        }
    },
    scene: Example
};

В методе preload() загружаются спрайты, которые будут использоваться в качестве физических тел. this.load.setBaseURL задает базовый путь для удобства.

Создание тела и вызов toJSON()

В методе create() создается физическое тело — спрайт-блок. Обратите внимание, что используется this.matter.add.sprite, который автоматически создает для спрайта твердое тело.

create ()
{
    const block = this.matter.add.sprite(400, 300, 'block');
    const data = block.toJSON();
    console.log(data);
}

Метод toJSON() вызывается непосредственно на созданном объекте block. Он возвращает объект с данными, который затем выводится в консоль. Важно понимать, что метод сериализует именно физическое тело (body), привязанное к спрайту, а не сам спрайт.

Что внутри полученных данных?

Вывод в консоль после запуска примера покажет структурированный объект. Вот пример того, какие данные он содержит (значения могут отличаться):

on
{
  "type": "body",
  "label": "Блок",
  "position": { "x": 400, "y": 300 },
  "velocity": { "x": 0, "y": 0 },
  "angle": 0,
  "vertices": [ ... ],
  "render": { ... },
  "friction": 0.1,
  "frictionStatic": 0.5,
  "frictionAir": 0.01,
  "restitution": 0
}

* type и label идентифицируют объект. * position, angle и velocity описывают состояние движения. * vertices — это массив точек, определяющих форму (хитбокс) тела. * render содержит свойства, связанные с отображением. * Остальные свойства (friction, restitution и т.д.) определяют физическое поведение тела при столкновениях.

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

Метод toJSON() — это мощный и простой инструмент для работы с данными физических тел в Matter.js. Он открывает путь к созданию систем сохранения, инструментов для отладки сложных симуляций и сетевого геймплея. **Идеи для экспериментов:** 1. Модифицируйте тело (примените силу, измените угол), а затем снова вызовите toJSON() — вы увидите, как обновились данные о скорости и позиции. 2. Попробуйте создать простой "сейв": сохраните массив JSON-данных для всех тел в сцене в localStorage. 3. Исследуйте, как сериализовать не одно тело, а весь мир, используя this.matter.world.toJSON().