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

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

В игровой разработке часто возникает задача трансформации данных, например, при повороте уровня, изменении вида игрового поля или генерации контента. Встроенная утилита Phaser `Phaser.Utils.Array.Matrix.RotateLeft` позволяет легко и эффективно повернуть двумерный массив (матрицу) на 90 градусов против часовой стрелки. Это полезно для создания вращающихся головоломок, процедурной генерации карт, изменения ориентации тайловых уровней или визуализации алгоритмов прямо в Canvas без сложных ручных вычислений.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        this.add.text(10, 10, 'Click to rotate the array matrix left', { font: '16px Courier', fill: '#ffffff' });

        const text = this.add.text(200, 200, '', { font: '32px Courier', fill: '#00ff00' });

        let matrix = [
            [ 1, 1, 1, 1, 1, 1 ],
            [ 2, 0, 0, 0, 0, 4 ],
            [ 2, 0, 1, 2, 0, 4 ],
            [ 2, 0, 3, 4, 0, 4 ],
            [ 2, 0, 0, 0, 0, 4 ],
            [ 3, 3, 3, 3, 3, 3 ]
        ];

        text.setText(Phaser.Utils.Array.Matrix.MatrixToString(matrix));

        this.input.on('pointerup', () =>
        {

            matrix = Phaser.Utils.Array.Matrix.RotateLeft(matrix);

            text.setText(Phaser.Utils.Array.Matrix.MatrixToString(matrix));

        });
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Что делает RotateLeft?

Метод Phaser.Utils.Array.Matrix.RotateLeft принимает на вход двумерный массив (матрицу) и возвращает её новую копию, повёрнутую на 90 градусов против часовой стрелки. Это стандартная операция линейной алгебры, которая меняет строки на столбцы в обратном порядке.

Наглядно: если представить исходную матрицу как игровое поле, где каждая ячейка — это тайл, то после поворота левый край станет верхним, а верхний — правым. Это особенно удобно для работы с тайловыми данными уровня.

Разбор примера: Инициализация

В примере создаётся сцена, в которой при клике происходит поворот матрицы и её отрисовка. Сначала мы видим инициализацию матрицы и её отображение.

let matrix = [
    [ 1, 1, 1, 1, 1, 1 ],
    [ 2, 0, 0, 0, 0, 4 ],
    [ 2, 0, 1, 2, 0, 4 ],
    [ 2, 0, 3, 4, 0, 4 ],
    [ 2, 0, 0, 0, 0, 4 ],
    [ 3, 3, 3, 3, 3, 3 ]
];

Это матрица 6x6, представляющая собой, например, простой лабиринт или шаблон уровня, где разные числа — это типы тайлов (стены, полы, враги).

Для её отображения используется утилита Phaser.Utils.Array.Matrix.MatrixToString, которая форматирует матрицу в читаемую строку с переносами.

text.setText(Phaser.Utils.Array.Matrix.MatrixToString(matrix));

Объект text — это обычный Phaser.GameObjects.Text, который и показывает матрицу на экране.

Обработка ввода и поворот

Поворот привязан к событию клика мыши или касания. Вся логика находится внутри обработчика события pointerup.

this.input.on('pointerup', () => {
    matrix = Phaser.Utils.Array.Matrix.RotateLeft(matrix);
    text.setText(Phaser.Utils.Array.Matrix.MatrixToString(matrix));
});

Ключевая строка — это вызов Phaser.Utils.Array.Matrix.RotateLeft(matrix). Функция не изменяет исходный массив, а возвращает новый, повёрнутый. Поэтому результат присваивается обратно переменной matrix. После этого обновляется текст на экране, чтобы отобразить новое состояние матрицы.

Практическое применение в играх

Поворот матрицы — это не просто академическое упражнение. Вот несколько реальных сценариев:

* **Вращающиеся головоломки (как в играх типа «Bloxorz»):** Уровень можно хранить как матрицу препятствий и целей, а поворот — как действие игрока. * **Процедурная генерация:** Создание одного шаблона комнаты и его повороты для увеличения разнообразия уровней. * **Обработка тайловых карт:** Если ваша карта уровня — это массив ID тайлов, RotateLeft позволит мгновенно изменить её ориентацию. * **Визуализация алгоритмов (поиск пути, симуляции):** Для отладки и демонстрации работы логики игры.

Важно помнить, что метод работает с прямоугольными (включая квадратные) массивами. Для неквадратных матриц результат будет иметь иную размерность (например, 6x4 превратится в 4x6).

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

Утилита Phaser.Utils.Array.Matrix.RotateLeft — это мощный, но простой инструмент для манипуляции данными уровня. Она избавляет от необходимости писать вложенные циклы для поворота данных вручную. Для экспериментов попробуйте: интегрировать поворот в игровую механику, привязав его к клавише; использовать поворот вместе с RotateRight для двустороннего вращения; или применить его к матрице, представляющей спрайты или группы объектов на сцене, чтобы динамически менять их расположение.