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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        this.add.text(10, 10, 'Click to reverse the array matrix rows', { 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.ReverseRows(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);

Что такое матрица и зачем её переворачивать?

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

Переворот строк (Reverse Rows) — это операция, при которой порядок строк в матрице меняется на противоположный. Первая строка становится последней, вторая — предпоследней и так далее. Содержимое самих строк при этом остаётся неизменным.

Такая операция может быть полезна для: * Быстрого создания вертикально-симметричных уровней. * Реализации механики "перевёрнутого мира". * Отладки и визуализации данных уровня.

Инициализация сцены и данных

В методе create() сцены мы сначала выводим инструкцию для пользователя, а затем создаём текстовый объект text, который будет отображать нашу матрицу.

Далее определяется исходная матрица matrix. Это двумерный массив 6x6, заполненный числами. Для её наглядного отображения в виде строк используется утилита Phaser.Utils.Array.Matrix.MatrixToString, которая форматирует матрицу в многострочную текстовую строку.

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));

Обработка клика и вызов ReverseRows

Логика переворота матрицы привязана к событию клика (pointerup). При каждом клике выполняется всего одна строка кода, которая модифицирует нашу матрицу.

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

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

Поведение метода ReverseRows

Давайте проследим на примере, как работает метод. Возьмём упрощённую матрицу 3x2.

Исходная матрица:

[ [A, B],
  [C, D],
  [E, F] ]

После вызова ReverseRows получим:

[ [E, F],
  [C, D],
  [A, B] ]

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

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

Утилита Phaser.Utils.Array.Matrix.ReverseRows — это небольшой, но мощный инструмент для работы с игровыми данными, представленными в виде матриц. Она избавляет от необходимости писать собственные циклы для разворота массивов. **Идеи для экспериментов:** 1. Свяжите переворот матрицы с графическим представлением уровня из тайлов и посмотрите, как мгновенно "перевернётся" весь экран. 2. Используйте эту функцию в комбинации с Phaser.Utils.Array.Matrix.ReverseColumns для реализации полного поворота данных на 180 градусов. 3. Попробуйте применить операцию не ко всей матрице, а только к её части (например, к прямоугольной области уровня), предварительно выделив подматрицу.