Перейти к основному содержанию

tilemaps


tilemaps

Автоматически переведённая страница

К сожалению, на полный ручной перевод у нас не хватает ресурсов.
Если вы увидели ошибку — отправьте пул-риквест с исправлениями (ссылка для редактирования в конце страницы).

Объект tilemaps позволяет создавать слои с тайлами в игре. Он также может кэшировать слои, что значительно ускоряет игру, но как только слой кэшируется, его нельзя редактировать.

Методы tilemaps

tilemaps.create(глубина)

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

Возвращает новое экземпляр класса Tilemap.

tilemaps.addTile(tilemap, textureName, x, y, frame)

Добавляет плитку в указанный tilemap.

АргументТипОписание
tilemapTilemapКартинка, в которую нужно добавить плитку.
textureNamestringИмя текстуры ct.js для рисования.
xnumberПозиция, по горизонтали, где должна быть размещена плитка.
ynumberПозиция, по вертикали, где должна быть размещена плитка.
framenumber(опционально) Указывает рамку для рисования. По умолчанию равно 0.

Возвращает созданную плитку, которая является экземпляром PIXI.Spriteopen in new window.

tilemaps.cache(tilemap, chunkSize)

Кэширует плиточную карту, группируя плиты в крупные куски и преобразуя их в несколько битмапов. После кэширования его нельзя изменять.

АргументТипОписание
tilemapTilemapПлиточная карта, которая должна быть кэширована.
chunkSizenumber(необязательно) Минимальный размер куска. По умолчанию равен 1024.

tilemaps.cacheDiamond(tilemap, chunkSize)

Включает кэширование этого тайлсета, замораживает его и превращает в серию текстур бимп-формата. Это обеспечивает значительный прирост скорости, но не позволяет дальнейшие úpravy.

Эта версия упаковывает тайлы в формы ромбовидных шматочков и сортирует их сверху вниз. Такое расположение устраняет проблемы с зазорами для изометрических игр.

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

Это то же самое, что и вызов функции tilemap.cacheDiamond();

АргументТипОписание
tilemapTilemapТайлмап, который нужно кэшировать.
chunkSizenumber(необязательно) Минимальный размер шматочка. По умолчанию равен 1024.

Методы Tilemap

Tilemap является подклассом PIXI.Containeropen in new window, и может быть окрашен, преобразован и перемещен. Методы ниже в основном повторяют методы tilemaps, но в объектно-ориентированном стиле.

tilemap.addTile(textureName, x, y, frame)

Добавляет плитку в текущую плиточную карту.
Аргументы:

  • textureName: строка — имя текстуры ct.js для рисования;
  • x: число — положение, по горизонтали, где должна быть размещена плитка;
  • y: число — положение, по вертикали, где должна быть размещена плитка;
  • frame (необязательно): число — указывает, какая рамка должна быть использована. По умолчанию значение 0.

tilemap.cache(chunkSize)

Кэширует тилепет, группируя тилы в большие куски и преобразуя их в несколько битмапов. После кэширования его нельзя изменять.

АргументТипОписание
chunkSizenumberопционально Минимальный размер куска. По умолчанию 1024.

tilemap.cacheDiamond(chunkSize)

Кэширует tilemap, группируя кахли в большие блоки и преобразуя их в несколько битмапов. После кэширования его уже нельзя изменить.

Этот вариант упаковывает кахли в ромбовидные блоки и сортирует их сверху вниз. Это устраняет проблемы с линиями для изометрических игр.

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

АргументТипОписание
chunkSizenumber(необязательно) Минимальный размер блока. По умолчанию равен 1024.

Пример: Создайте ряд плит с разными текстурными рамками

JavaScript
this.tilemap = tilemaps.create(-100);
for (let i = 0; i < 10; i++) {
    tilemaps.addTile(this.tilemap, 'Tiles', i * 64, 0, i);
}
this.tilemap.cache();

Пример: создать карту из тайлов и перлин-шума, и включить столкновения

Вам понадобится модуль noise в вашем проекте, функция place, и текстура с названием RockTile.

JavaScript
const tilemap = tilemaps.create(-100);
noise.setSeed(); // Случайно перемешать семя на каждом запуске

// Предполагается, что у вас есть текстура "RockTile" размером 64x64 пикселей.
for (var x = 0; x < camera.width / 64; x++) {
    for (var y = 0; y < camera.height / 64; y++) {
        var value = noise.simplex2d(x / 7, y / 7); // Возвращает значение от -1 до 1.
        if (value > 0) {
            const tile = tilemap.addTile('RockTile', x*64, y*64);
            // Тайлы являются PIXI.Sprites; мы можем подкрутить их цвет и непрозрачность перед кэшированием
            tile.alpha = value * 0.5 + 0.5;
        }
    }
}

tilemap.cache();
place.enableTilemapCollisions(tilemap, 'Solid');