Изометрические и гексагональные карты

Phaser — мощная библиотека для разработки 2D-игр на JavaScript, предоставляющая инструменты для работы с различными типами тайловых карт. Среди них особое место занимают изометрические и гексагональные карты, которые позволяют создавать сложные визуальные миры с нестандартной перспективой и сеткой. Эти карты отличаются от обычной прямоугольной сетки формой тайлов, системой координат и особенностями рендеринга.

Изометрические карты

Изометрическая карта имитирует трёхмерное пространство на плоском экране. Каждый тайл выглядит как ромб, а объекты на карте располагаются так, чтобы создать иллюзию глубины.

Ключевые характеристики:

  • Тайлы имеют форму ромба, обычно с пропорцией ширины к высоте 2:1.
  • Координаты тайлов не совпадают с экранными координатами, требуется преобразование.
  • Позволяет реализовать вид сверху под углом, создавая эффект 3D.

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

  1. Загрузка тайлсета и карты
const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload,
        create
    }
};

const game = new Phaser.Game(config);

function preload() {
    this.load.image('tiles', 'assets/tiles.png');
    this.load.tilemapTiledJSON('isoMap', 'assets/isoMap.json');
}
  1. Инициализация карты и слоя
function create() {
    const map = this.make.tilemap({ key: 'isoMap', tileWidth: 64, tileHeight: 32 });
    const tileset = map.addTilesetImage('tiles', 'tiles');
    const layer = map.createLayer('Ground', tileset);
    layer.setDepth(layer.y);  // важный шаг для правильного наложения объектов
}
  1. Преобразование координат

Изометрическая карта использует систему координат тайлов (tileX, tileY), которая преобразуется в экранные координаты:

[ screenX = (tileX - tileY) * tileWidth / 2] [ screenY = (tileX + tileY) * tileHeight / 2]

Phaser автоматически поддерживает это через свой isometric plugin или встроенные методы при правильной настройке tileWidth и tileHeight.

Гексагональные карты

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

Типы гексагонов:

  • Pointy-topped (остроконечные сверху) — вершины направлены вверх и вниз.
  • Flat-topped (плоские сверху) — верхние и нижние стороны параллельны горизонтали.

Координатные системы

Гексагональные карты могут использовать несколько систем координат:

  1. Offset (смещение) — традиционная сетка с чередующимися рядами.
  2. Cube (кубические координаты) — трёхмерные координаты (x, y, z) с ограничением x + y + z = 0.
  3. Axial (осевые) — упрощённый вариант кубических координат (q, r).

Phaser поддерживает гексагональные карты через tilemap.createLayer и настройку типа тайла в редакторе Tiled (hexagonal).

Пример создания гексагональной карты

function preload() {
    this.load.image('hexTiles', 'assets/hexTiles.png');
    this.load.tilemapTiledJSON('hexMap', 'assets/hexMap.json');
}

function create() {
    const map = this.make.tilemap({ key: 'hexMap', tileWidth: 64, tileHeight: 56 });
    const tileset = map.addTilesetImage('hexTiles', 'hexTiles');
    const layer = map.createLayer('HexLayer', tileset);
    
    // Установка правильной глубины для корректного наложения
    layer.forEachTile(tile => {
        tile.pixelY = tile.y * map.tileHeight * 0.75;
    });
}

Особенности рендеринга гексагонов:

  • Для pointy-topped каждая строка смещается на половину тайла.
  • Для flat-topped смещается каждый столбец.
  • Глубина объектов определяется их координатой y или q+r, чтобы избежать пересечений.

Работа с объектами и событиями на нестандартных сетках

В изометрических и гексагональных картах важно учитывать координаты тайлов при взаимодействии:

  • Определение тайла по экранной координате:
const tile = map.getTileAtWorldXY(pointer.x, pointer.y, true, this.cameras.main, layer);
  • Перемещение персонажа по карте:

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

Советы по оптимизации

  • Использовать cull и renderLayer для отрисовки только видимой части карты.
  • Для больших карт применять dynamic layer с обновлением видимой области.
  • Сохранять объекты в отдельном слое над тайловой картой, чтобы управлять глубиной отдельно.

Дополнительные возможности Phaser для нестандартных карт

  • Слои и группы: разделение тайлов, объектов и эффектов.
  • Анимация тайлов: создание движущихся элементов на карте.
  • Pathfinding: интеграция с алгоритмами поиска пути для изометрических и гексагональных сеток.

Изометрические и гексагональные карты позволяют создавать более динамичные и визуально сложные миры, расширяя возможности игр на Phaser за пределы прямоугольной сетки. Точная работа с координатами, глубиной и рендерингом обеспечивает реалистичное ощущение пространства и корректное взаимодействие объектов.

Оглавление