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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    controls;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('tiles', 'assets/tilemaps/tiles/tiles2.png');
    }

    create ()
    {
        // Creating a blank tilemap with the specified dimensions
        const map = this.make.tilemap({ tileWidth: 70, tileHeight: 70, width: 50, height: 50});

        const tiles = map.addTilesetImage('tiles');

        // Each layer needs to get a unique name
        const layer1 = map.createBlankLayer('layer1', tiles);

        // Fill the layer with random tile indexes (where -1 is an empty tile)
        layer1.randomize(0, 0, map.width, map.height, [ -1, 0, 12 ]);

        // Push layer1 back into the "background"
        layer1.setScale(0.75);
        layer1.setScrollFactor(0.5);
        layer1.setAlpha(0.5);

        const layer2 = map.createBlankLayer('layer2', tiles);
        layer2.randomize(0, 0, map.width, map.height, [ -1, 1 ]);

        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, 'Arrows to scroll.', {
            fontSize: '18px',
            padding: { x: 10, y: 5 },
            backgroundColor: '#000000',
            fill: '#ffffff'
        });
        help.setScrollFactor(0);
    }

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

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 загружается единственное изображение с тайлами, которое будет использоваться для всех слоёв. Ключевое действие происходит в create. Сначала создаётся пустая тайловая карта заданного размера с помощью this.make.tilemap. Параметры задают размер одного тайла в пикселях и общие размеры карты в тайлах.

const map = this.make.tilemap({ tileWidth: 70, tileHeight: 70, width: 50, height: 50});

Затем изображение тайлов связывается с картой через метод addTilesetImage. Теперь можно создавать слои, используя этот набор.

Генерация и визуальная настройка первого слоя

Первый слой создаётся методом map.createBlankLayer. Ему нужно присвоить уникальное имя и передать набор тайлов. Метод layer1.randomize заполняет указанную область карты случайными тайлами из предоставленного массива индексов. Индекс -1 обозначает пустую клетку.

const layer1 = map.createBlankLayer('layer1', tiles);
layer1.randomize(0, 0, map.width, map.height, [ -1, 0, 12 ]);

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

layer1.setScale(0.75);
layer1.setScrollFactor(0.5);
layer1.setAlpha(0.5);

Создание второго, активного слоя

Второй слой создаётся и заполняется по аналогичной схеме, но с другими параметрами. Он использует другие индексы тайлов (`1и-1`), что визуально отличает его от первого. При этом для него не задаются масштаб, прозрачность или параллакс, поэтому он остаётся на переднем плане и движется вместе с камерой без искажений.

const layer2 = map.createBlankLayer('layer2', tiles);
layer2.randomize(0, 0, map.width, map.height, [ -1, 1 ]);

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

Управление камерой и интерфейс

Чтобы продемонстрировать эффект параллакса и масштабирования, в сцене реализовано управление камерой. Создаётся экземпляр Phaser.Cameras.Controls.FixedKeyControl, который привязывает стрелки клавиатуры к перемещению основной камеры.

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 состояние управления обновляется каждый кадр. Также на сцену добавляется текстовая подсказка с setScrollFactor(0), чтобы она оставалась на одном месте экрана независимо от движения камеры.

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

Динамическое создание слоёв тайлов — мощный инструмент для построения сложных игровых пространств. Вы можете экспериментировать: генерировать слои на основе шума Перлина для природных ландшафтов, использовать разные наборы тайлов для каждого слоя или анимировать смену их свойств (например, плавно менять alpha) для создания эффектов тумана или затемнения. Попробуйте добавить третий слой с setScrollFactor(1.5) для «переднего» параллакса.