Формат Tiled и экспорт в JSON

Phaser — мощная библиотека для создания 2D-игр на JavaScript, и интеграция с картами, созданными в редакторе Tiled Map Editor, позволяет легко управлять уровнями и игровыми сценами. Tiled поддерживает экспорт карт в формате JSON, что идеально подходит для Phaser, так как библиотека предоставляет встроенные методы для загрузки и обработки этих данных.

Структура карты Tiled

Файл карты Tiled в формате JSON содержит несколько ключевых компонентов:

  1. tilesets — набор тайлов, используемых на карте. Каждое tileset содержит:

    • firstgid — идентификатор первого тайла в наборе.
    • source — путь к файлу tileset или встроенные данные.
    • tilewidth и tileheight — размеры каждого тайла в пикселях.
    • tilecount — общее количество тайлов.

  2. layers — слои карты, каждый из которых может быть:

    • tilelayer — слой, заполненный тайлами.
    • objectgroup — слой с объектами (например, позиции врагов, предметов). Слой содержит массив data, представляющий тайлы в виде числовых идентификаторов, или массив objects с объектами.

  3. properties — пользовательские свойства карты или отдельных слоев. Позволяют задавать дополнительную информацию, например, скорость движения платформ или зоны спауна.

Пример структуры слоя tilelayer:

{
  "type": "tilelayer",
  "name": "Ground",
  "width": 10,
  "height": 10,
  "data": [1, 1, 2, 3, ...]
}

Пример objectgroup:

{
  "type": "objectgroup",
  "name": "Enemies",
  "objects": [
    {"id": 1, "name": "Slime", "x": 64, "y": 128, "width": 32, "height": 32}
  ]
}

Импорт JSON-карт в Phaser

Phaser предоставляет систему загрузки ресурсов через preload(). JSON-файл карты можно загрузить с помощью метода this.load.tilemapTiledJSON().

Пример загрузки:

function preload() {
  this.load.tilemapTiledJSON('level1', 'assets/maps/level1.json');
  this.load.image('tiles', 'assets/tilesets/tiles.png');
}

После загрузки создаётся объект карты:

function create() {
  const map = this.make.tilemap({ key: 'level1' });
  const tileset = map.addTilesetImage('tilesetName', 'tiles');

  const groundLayer = map.createLayer('Ground', tileset, 0, 0);
  const decorationLayer = map.createLayer('Decoration', tileset, 0, 0);
}

Работа с объектными слоями

Object layers позволяют размещать игровые объекты, такие как враги, NPC, точки спауна, ловушки и интерактивные предметы. Для их обработки используется метод map.getObjectLayer('LayerName').

Пример создания спрайтов на основе объектов:

const enemies = map.getObjectLayer('Enemies')['objects'];
enemies.forEach(enemy => {
  this.physics.add.sprite(enemy.x, enemy.y, 'slime');
});

Можно использовать свойства объектов Tiled для задания дополнительных параметров, например, скорости движения или типа врага:

enemies.forEach(enemy => {
  const sprite = this.physics.add.sprite(enemy.x, enemy.y, 'slime');
  sprite.speed = enemy.properties.find(p => p.name === 'speed').value;
});

Коллизии и слои тайлов

Phaser поддерживает коллизии тайлов через setCollisionByProperty или setCollisionBetween. Для слоев, где тайлы должны блокировать движение персонажа, задаются специальные свойства в Tiled, например, collides=true.

Пример установки коллизий:

groundLayer.setCollisionByProperty({ collides: true });
this.physics.add.collider(player, groundLayer);

Можно также использовать setCollisionBetween(first, last) для указания диапазона ID тайлов, с которыми будет работать коллизия.

Анимация и динамическое изменение карты

Карты Tiled поддерживают тайлы с анимацией. В JSON-файле они представлены через массив animation внутри тайла, содержащий последовательность фреймов и время показа. Phaser позволяет считывать эти данные и автоматически проигрывать анимацию тайлов.

Пример анимации тайлов:

tileset.tiles.forEach(tile => {
  if (tile.animation) {
    tile.animation.forEach(frame => {
      // Phaser сам обрабатывает анимацию при создании слоя
    });
  }
});

Кроме того, тайлы можно менять динамически в игре с помощью putTileAt() и removeTileAt(), что позволяет создавать разрушимые платформы или активные зоны.

Преимущества использования Tiled с JSON

  • Гибкость редактирования — уровни можно менять без перекомпиляции кода.
  • Разделение данных и логики — JSON-файл хранит исключительно визуальные и позиционные данные, код отвечает только за логику.
  • Совместимость с различными тайлсетами — легко подключать новые наборы тайлов.
  • Поддержка сложных слоев — можно совмещать тайл- и объектные слои, а также задавать пользовательские свойства.

Использование формата Tiled и экспорта в JSON обеспечивает удобную интеграцию с Phaser, делая процесс создания уровней модульным, управляемым и расширяемым. Это позволяет реализовать как простые платформеры, так и сложные 2D-игры с множеством объектов, интерактивными элементами и динамическими уровнями.

Оглавление