Phaser.js: всё об играх и разработке

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

Создавая мир игры, разработчики часто сталкиваются с проблемой однообразия тайловых карт. Phaser предлагает простое, но мощное решение — метод `randomize`. Эта статья покажет, как оживить ландшафт, генерируя случайные тайлы в области при клике мыши. Вы научитесь динамически менять текстуру земли, воды или стен, что особенно полезно для создания эффектов разрушения, случайной растительности или процедурной генерации участков карты.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    map;
    marker;
    controls;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('tiles', 'assets/tilemaps/tiles/tmw_desert_spacing.png');
        this.load.tilemapTiledJSON('map', 'assets/tilemaps/maps/desert.json');
    }

    create ()
    {
        this.map = this.make.tilemap({ key: 'map' });
        const tiles = this.map.addTilesetImage('Desert', 'tiles');
        const layer = this.map.createLayer('Ground', tiles, 0, 0);

        this.marker = this.add.graphics();
        this.marker.lineStyle(2, 0x000000, 1);
        this.marker.strokeRect(0, 0, 6 * this.map.tileWidth, 6 * 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, 'Left-click to randomize tiles.', {
            fontSize: '18px',
            padding: { x: 10, y: 5 },
            backgroundColor: '#000000',
            fill: '#ffffff'
        });
        help.setScrollFactor(0);
    }

    update (time, delta)
    {
        this.controls.update(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)
        {
            // Randomize the tiles within an area using the indexes that are there already
            this.map.randomize(pointerTileX, pointerTileY, 6, 6);

            // You can also randomize and specify the array of indexes to sample from:
            // map.randomize(pointerTileX, pointerTileY, 6, 6, [ 30, 38, 46 ]);
        }

    }
}

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

const game = new Phaser.Game(config);

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

Вся работа начинается в методе preload. Здесь загружаются два ключевых ресурса: изображение с набором тайлов (tiles) и файл карты в формате JSON, созданный в Tiled (map).

this.load.image('tiles', 'assets/tilemaps/tiles/tmw_desert_spacing.png');
this.load.tilemapTiledJSON('map', 'assets/tilemaps/maps/desert.json');

В методе create мы создаем саму тайловую карту. Объект this.map становится основным манипулятором для работы с тайлами. Затем мы связываем загруженное изображение с тайлсетом карты и создаем слой для отрисовки.

this.map = this.make.tilemap({ key: 'map' });
const tiles = this.map.addTilesetImage('Desert', 'tiles');
const layer = this.map.createLayer('Ground', tiles, 0, 0);

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

Чтобы игрок видел область, которая будет изменяться, мы создаем графический объект this.marker. Это прямоугольник, обводка которого показывает границы 6x6 тайлов. Его размеры вычисляются на основе свойств карты tileWidth и tileHeight.

this.marker.lineStyle(2, 0x000000, 1);
this.marker.strokeRect(0, 0, 6 * this.map.tileWidth, 6 * this.map.tileHeight);

Для навигации по большой карте реализовано управление камерой с клавиатуры. Объект this.controls создается на основе конфигурации, где привязываются клавиши-стрелки и задается скорость перемещения speed.

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. Сначала обновляется положение камеры с помощью this.controls.update(delta). Затем нам нужно перевести координаты курсора мыши из экранных в мировые, а потом — в координаты тайловой карты.

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 округляют координаты вниз, чтобы получить индекс конкретного тайла. После этого мы позиционируем графический маркер, переводя тайловые координаты обратно в мировые с помощью tileToWorldX и tileToWorldY. Это заставляет маркер "прилипать" к сетке тайлов.

this.marker.x = this.map.tileToWorldX(pointerTileX);
this.marker.y = this.map.tileToWorldY(pointerTileY);

Ключевой метод: случайное заполнение тайлов

Сердце примера — метод this.map.randomize. Он вызывается при каждом нажатии кнопки мыши (this.input.manager.activePointer.isDown). Метод принимает начальную позицию в тайлах (pointerTileX, pointerTileY) и размер области для обработки (ширина 6, высота 6).

this.map.randomize(pointerTileX, pointerTileY, 6, 6);

По умолчанию метод берет все индексы тайлов, которые уже присутствуют в указанной области 6x6, и случайным образом перераспределяет их по этой же области. Это создает эффект "перемешивания" существующего набора текстур.

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

// map.randomize(pointerTileX, pointerTileY, 6, 6, [ 30, 38, 46 ]);

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

Метод randomize — это отличный инструмент для добавления вариативности и интерактивности в тайловые миры Phaser. Он работает быстро и не требует предварительной подготовки данных. Для экспериментов попробуйте: изменить размер области при клике; использовать массив индексов для создания тематических зон (только вода и песок); вызывать randomize по таймеру для анимированных текстур (например, мерцающего магического поля); или комбинировать его с физикой, чтобы разрушаемые блоки после удара рассыпались в случайном порядке.