О чем этот пример
Создание уровней вручную через код — мощный инструмент для прототипирования или динамической генерации мира. В этом примере мы разберем, как работать с пустой тайловой картой Phaser: создавать базовый ландшафт и размещать объекты по клику мыши. Вы научитесь использовать методы `fill`, `randomize`, `putTileAt` и `putTilesAt` для полного контроля над каждым тайлом на карте. Это основа для построения редакторов уровней прямо в игре или алгоритмического наполнения локаций.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
helpText;
objectToPlace = 'platform';
map;
marker;
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('tiles', 'assets/tilemaps/tiles/platformer_tiles.png');
}
create ()
{
// Creating a blank tilemap with the specified dimensions
this.map = this.make.tilemap({ tileWidth: 16, tileHeight: 16, width: 25, height: 20});
const tiles = this.map.addTilesetImage('tiles');
const layer = this.map.createBlankLayer('layer1', tiles);
layer.setScale(2);
// Add a simple scene with some random element
layer.fill(58, 0, 13, 25, 1); // Surface of the water
layer.fill(77, 0, 14, 25, 5); // Body of the water
layer.randomize(0, 0, 25, 13, [ 44, 45, 46, 47, 48 ]); // Wall above the water
this.input.keyboard.on('keydown-ONE', (event) =>
{
this.objectToPlace = 'platform';
this.helpText.setText(this.getHelpMessage());
});
this.input.keyboard.on('keydown-TWO', (event) =>
{
this.objectToPlace = 'flower';
this.helpText.setText(this.getHelpMessage());
});
this.input.keyboard.on('keydown-THREE', (event) =>
{
this.objectToPlace = 'tiki';
this.helpText.setText(this.getHelpMessage());
});
this.marker = this.add.graphics();
this.marker.lineStyle(2, 0x000000, 1);
this.marker.strokeRect(0, 0, this.map.tileWidth * layer.scaleX, this.map.tileHeight * layer.scaleY);
this.helpText = this.add.text(16, 16, this.getHelpMessage(), {
fontSize: '18px',
padding: { x: 10, y: 5 },
fill: '#ffffff',
backgroundColor: '#000000'
});
this.helpText.setScrollFactor(0);
}
update (time, delta)
{
const worldPoint = this.input.activePointer.positionToCamera(this.cameras.main);
// Rounds down to nearest tile
const pointerTileX = this.map.worldToTileX(worldPoint.x);
const pointerTileY = this.map.worldToTileY(worldPoint.y);
// Snap to tile coordinates, but in world space
this.marker.x = this.map.tileToWorldX(pointerTileX);
this.marker.y = this.map.tileToWorldY(pointerTileY);
if (this.input.manager.activePointer.isDown)
{
switch (this.objectToPlace)
{
case 'flower':
// You can place an individal tile by index (or by passing in a Tile object)
this.map.putTileAt(15, pointerTileX, pointerTileY);
break;
case 'platform':
// You can place a row of tile indexes at a location
this.map.putTilesAt([ 104, 105, 106, 107 ], pointerTileX, pointerTileY);
break;
case 'tiki':
// You can also place a 2D array of tiles at a location
this.map.putTilesAt([
[ 49, 50 ],
[ 51, 52 ]
], pointerTileX, pointerTileY);
break;
default:
break;
}
}
}
getHelpMessage ()
{
return `Press 1/2/3 to change object to place.\nLeft click to place the tiles.\nSelected object: ${this.objectToPlace}`;
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#00000',
parent: 'phaser-example',
pixelArt: true,
scene: Example
};
const game = new Phaser.Game(config);
Создание пустой карты и базового слоя
В методе create() мы инициализируем пустую тайловую карту. Это основа, на которую мы будем наносить тайлы.
this.map = this.make.tilemap({ tileWidth: 16, tileHeight: 16, width: 25, height: 20});
const tiles = this.map.addTilesetImage('tiles');
const layer = this.map.createBlankLayer('layer1', tiles);
layer.setScale(2);Объект this.map — это сама карта с заданными размерами в тайлах (25x20). tiles — это набор тайлов (tileset), загруженный из изображения. layer — это слой, на котором происходит отрисовка. Увеличение масштаба (setScale(2)) делает тайлы в два раза больше, что удобно для пиксель-арт игр.
Заполнение области: вода и стены
Прежде чем дать игроку возможность рисовать, мы создаем статичный фон уровня. Для этого используются методы заполнения областей.
layer.fill(58, 0, 13, 25, 1);
layer.fill(77, 0, 14, 25, 5);
layer.randomize(0, 0, 25, 13, [ 44, 45, 46, 47, 48 ]);Метод layer.fill() заполняет прямоугольную область одним типом тайла. Например, первый вызов создает поверхность воды (тайл 58) в одной строке (y=13) по всей ширине карты (25 тайлов). Второй вызов создает «тело» воды (тайл 77), начиная со строки 14 и высотой в 5 строк.
Метод layer.randomize() заполняет область (здесь вся карта выше воды) случайными тайлами из предоставленного массива индексов [44, 45, 46, 47, 48]. Это создает разнообразный, неоднородный фон для стены.
Интерфейс: маркер и переключение объектов
Для удобства редактирования в игре есть маркер, который следует за курсором, и текстовый помощник.
this.marker = this.add.graphics();
this.marker.lineStyle(2, 0x000000, 1);
this.marker.strokeRect(0, 0, this.map.tileWidth * layer.scaleX, this.map.tileHeight * layer.scaleY);Маркер — это графический объект (Graphics), который рисует контур одного тайла с учетом его финального размера на экране (с масштабом). Его позиция обновляется в update().
Переключение между типами объектов для размещения (платформа, цветок, тики) происходит по нажатию клавиш 1, 2, 3. Обработчики событий меняют значение переменной this.objectToPlace и обновляют текст подсказки.
this.input.keyboard.on('keydown-ONE', (event) => {
this.objectToPlace = 'platform';
this.helpText.setText(this.getHelpMessage());
});Ядро логики: преобразование координат и размещение тайлов
Вся магия размещения происходит в методе update(). Сначала мы преобразуем координаты курсора в мировые, а затем в координаты тайлов на карте.
const worldPoint = this.input.activePointer.positionToCamera(this.cameras.main);
const pointerTileX = this.map.worldToTileX(worldPoint.x);
const pointerTileY = this.map.worldToTileY(worldPoint.y);Методы worldToTileX и worldToTileY корректно округляют мировые координаты до индекса тайла, на который указывает курсор. Эти индексы затем используются для позиционирования маркера и, что важнее, для размещения тайлов.
Когда кнопка мыши нажата, в зависимости от выбранного объекта, вызываются разные методы размещения:
// 1. Разместить один тайл (цветок)
this.map.putTileAt(15, pointerTileX, pointerTileY);
// 2. Разместить горизонтальный ряд тайлов (платформа)
this.map.putTilesAt([ 104, 105, 106, 107 ], pointerTileX, pointerTileY);
// 3. Разместить 2D-массив тайлов (статуя тики)
this.map.putTilesAt([
[ 49, 50 ],
[ 51, 52 ]
], pointerTileX, pointerTileY);putTileAt помещает один тайл по индексу. putTilesAt может принимать как одномерный массив (который размещается горизонтально), так и двумерный (матрицу), создавая более сложные объекты из нескольких тайлов за одно действие.
Что попробовать дальше
Этот пример демонстрирует фундаментальные принципы программной работы с тайловыми картами в Phaser. Вы можете не только предзаполнять уровни, но и давать игрокам инструменты для творчества. Для экспериментов попробуйте: добавить удаление тайлов по правому клику, сохранять и загружать созданную карту в локальное хранилище или генерировать более сложные ландшафты, комбинируя fill и randomize с шумом Перлина.