Мастер-класс по работе с тайлами: захват и трансформация в Phaser

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

Работа с тайловыми картами — основа для создания уровней в 2D-играх. Но что делать, если в карте несколько слоёв с разными размерами тайлов? Как корректно определять, по какому тайлу кликнул игрок? В этой статье мы разберём пример из тестов Phaser, который демонстрирует продвинутую работу с координатами, переключением слоёв и интерактивным изменением тайлов. Вы научитесь точно преобразовывать координаты мыши в позицию на карте и применять эффекты к отдельным тайлам, что необходимо для создания редакторов уровней или интерактивных игровых миров.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


class Example extends Phaser.Scene
{
    smallTileLayer;
    tileLayer2;
    offsetTileLayer;
    tileLayer;
    marker;
    map;
    controls;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.tilemapTiledJSON('map', 'assets/tilemaps/maps/features-test.json');

        this.load.spritesheet('coin', 'assets/sprites/coin.png', { frameWidth: 32, frameHeight: 32 });

        this.load.image('ground_1x1', 'assets/tilemaps/tiles/ground_1x1.png');
        this.load.image('walls_1x2', 'assets/tilemaps/tiles/walls_1x2.png');
        this.load.image('tiles2', 'assets/tilemaps/tiles/tiles2.png');
        this.load.image('dangerous-kiss', 'assets/tilemaps/tiles/dangerous-kiss.png');
    }

    create ()
    {
        this.map = this.add.tilemap('map');

        const groundTiles = this.map.addTilesetImage('ground_1x1');
        const tiles2 = this.map.addTilesetImage('tiles2');
        const kissTiles = this.map.addTilesetImage('dangerous-kiss');

        this.tileLayer = this.map.createLayer('Tile Layer 1', groundTiles);
        this.offsetTileLayer = this.map.createLayer('Offset Tile Layer', tiles2);
        this.tileLayer2 = this.map.createLayer('Tile Layer 2', groundTiles);
        this.smallTileLayer = this.map.createLayer('Small Tile Layer', kissTiles);

        this.selectLayer(this.tileLayer);

        this.input.keyboard.on('keydown_ONE', event =>
        {
            this.selectLayer(this.tileLayer);
        });

        this.input.keyboard.on('keydown_TWO', event =>
        {
            this.selectLayer(this.offsetTileLayer);
        });

        this.input.keyboard.on('keydown_THREE', event =>
        {
            this.selectLayer(this.tileLayer2);
        });

        this.input.keyboard.on('keydown_FOUR', event =>
        {
            this.selectLayer(this.smallTileLayer);
        });

        this.marker = this.add.graphics();
        this.marker.lineStyle(2, 0x000000, 1);
        this.marker.strokeRect(0, 0, this.map.tileWidth, this.map.tileHeight);

        this.cameras.main.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels);

        const cursors = this.input.keyboard.createCursorKeys();
        const controlConfig = {
            camera: this.cameras.main,
            left: cursors.left,
            right: cursors.right,
            up: cursors.up,
            down: cursors.down,
            speed: 0.5
        };
        this.controls = new Phaser.Cameras.Controls.FixedKeyControl(controlConfig);

        const help = this.add.text(16, 16, '', {
            font: '20px Arial',
            backgroundColor: '#000000',
            fill: '#ffffff'
        });
        help.setScrollFactor(0);
    }

    update (time, delta)
    {
        this.controls.update(delta);

        const worldPoint = this.input.activePointer.positionToCamera(this.cameras.main);

        // Force snapping to base tile size
        const pointerTileX = this.map.worldToTileX(worldPoint.x, true, this.cameras.main, this.tileLayer);
        const pointerTileY = this.map.worldToTileY(worldPoint.y, true, this.cameras.main, this.tileLayer);
        this.marker.x = this.map.tileToWorldX(pointerTileX, this.cameras.main, this.tileLayer);
        this.marker.y = this.map.tileToWorldY(pointerTileY, this.cameras.main, this.tileLayer);

        if (this.input.manager.activePointer.isDown)
        {
            const tile = this.map.getTileAtWorldXY(worldPoint.x, worldPoint.y);
            console.log(tile);
            if (tile)
            {
                tile.flipX = !tile.flipX;
                tile.alpha = tile.alpha ? 0.5 : 1;
            }
        }
    }

    selectLayer (layer)
    {
        this.map.setLayer(layer);
        this.tileLayer.alpha = 0.5;
        this.offsetTileLayer.alpha = 0.5;
        this.tileLayer2.alpha = 0.5;
        this.smallTileLayer.alpha = 0.5;
        layer.alpha = 1;
    }
}

// Visual test to make sure selecting tiles works with a tileset that has multiple tile sizes.
// Expected behavior for tiles bigger than base size: you can only select them if you click on the
// bottom left of the graphic (the origin of where it is placed in the tilemap).

const config = {
    type: Phaser.CANVAS,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d88',
    parent: 'phaser-example',
    pixelArt: true,
    scene: Example
};

const game = new Phaser.Game(config);

Загрузка ресурсов и подготовка карты

Код начинается с загрузки всех необходимых ресурсов: JSON-файла тайловой карты, созданного в Tiled, и нескольких тайлсетов (спрайтшитов с изображениями).

В методе create() происходит инициализация карты. Сначала создаётся объект Tilemap. Затем каждый тайлсет (набор изображений для плиток) привязывается к карте с помощью метода addTilesetImage(). Это позволяет использовать в карте изображения, загруженные отдельно.

После привязки тайлсетов создаются слои. В данном примере их четыре. Каждый слой создаётся из данных, указанных в JSON-файле карты, и использует определённый тайлсет. Важно, что слои могут иметь разный размер тайлов, что усложняет обработку кликов.

this.map = this.add.tilemap('map');
const groundTiles = this.map.addTilesetImage('ground_1x1');
const tiles2 = this.map.addTilesetImage('tiles2');
const kissTiles = this.map.addTilesetImage('dangerous-kiss');

this.tileLayer = this.map.createLayer('Tile Layer 1', groundTiles);
this.offsetTileLayer = this.map.createLayer('Offset Tile Layer', tiles2);
this.tileLayer2 = this.map.createLayer('Tile Layer 2', groundTiles);
this.smallTileLayer = this.map.createLayer('Small Tile Layer', kissTiles);

Управление слоями и визуальный маркер

Для удобства работы код позволяет переключать активный слой с клавиатуры (клавиши 1-4). При переключении вызывается метод selectLayer(), который делает неактивные слои полупрозрачными, а активный — полностью непрозрачным. Также он устанавливает этот слой как текущий для операций с картой через this.map.setLayer(layer).

На экран добавляется графический маркер — прямоугольник, который будет следовать за курсором и показывать границы базового тайла. Его размеры берутся из свойства карты this.map.tileWidth и this.map.tileHeight.

Камера настраивается на границы всей карты, а управление ею реализуется через Phaser.Cameras.Controls.FixedKeyControl, который реагирует на стрелки клавиатуры.

this.selectLayer(this.tileLayer);
this.input.keyboard.on('keydown_ONE', event => { this.selectLayer(this.tileLayer); });

this.marker = this.add.graphics();
this.marker.lineStyle(2, 0x000000, 1);
this.marker.strokeRect(0, 0, this.map.tileWidth, this.map.tileHeight);

const controlConfig = {
    camera: this.cameras.main,
    left: cursors.left,
    right: cursors.right,
    up: cursors.up,
    down: cursors.down,
    speed: 0.5
};
this.controls = new Phaser.Cameras.Controls.FixedKeyControl(controlConfig);

Преобразование координат и захват тайла

Сердце примера — логика в методе update(). Здесь происходит преобразование координат указателя мыши в координаты тайла на карте с учётом активного слоя и камеры.

Сначала координаты курсора преобразуются в мировые координаты с помощью positionToCamera(). Затем, используя методы worldToTileX() и worldToTileY() с флагом true (snap to floor) и указанием камеры и слоя, мы получаем индексы тайла в сетке карты. Эти индексы потом преобразуются обратно в мировые координаты для позиционирования маркера.

Этот подход гарантирует точность даже при наличии слоёв с тайлами разного размера. Маркер всегда привязан к сетке базового размера тайла, определённого в карте.

const worldPoint = this.input.activePointer.positionToCamera(this.cameras.main);
const pointerTileX = this.map.worldToTileX(worldPoint.x, true, this.cameras.main, this.tileLayer);
const pointerTileY = this.map.worldToTileY(worldPoint.y, true, this.cameras.main, this.tileLayer);
this.marker.x = this.map.tileToWorldX(pointerTileX, this.cameras.main, this.tileLayer);
this.marker.y = this.map.tileToWorldY(pointerTileY, this.cameras.main, this.tileLayer);

Интерактивное изменение тайлов

Когда пользователь кликает мышью, код определяет, по какому конкретному тайлу был совершён клик, и изменяет его свойства. Для получения тайла используется метод getTileAtWorldXY(), которому передаются мировые координаты точки клика.

Получив объект тайла, код инвертирует его свойство flipX (горизонтальное отражение) и переключает значение alpha между 1 и 0.5. Это наглядно демонстрирует, как можно динамически менять состояние тайлов на карте.

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

if (this.input.manager.activePointer.isDown)
{
    const tile = this.map.getTileAtWorldXY(worldPoint.x, worldPoint.y);
    if (tile)
    {
        tile.flipX = !tile.flipX;
        tile.alpha = tile.alpha ? 0.5 : 1;
    }
}

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

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

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