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

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

Работа с двумерными массивами (матрицами) — частая задача в разработке игр: от карт уровней до систем инвентаря. Встроенный в Phaser метод `Phaser.Utils.Array.Matrix.RotateRight` позволяет одним вызовом повернуть матрицу на 90 градусов по часовой стрелке, экономя время и предотвращая ошибки в ручных вычислениях. Эта статья разбирает готовый пример, показывая, как интегрировать поворот матрицы в игровой цикл. Вы научитесь визуализировать изменения данных в реальном времени, что полезно для редакторов уровней или головоломок типа «Пятнашек».

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        this.add.text(10, 10, 'Click to rotate the array matrix', { 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.RotateRight(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. В начале метода create() мы выводим инструкцию для пользователя и создаём текстовый объект text для отображения матрицы. Ключевой элемент — объявление самой матрицы matrix.

Это двумерный массив 6x6, где числа могут символизировать типы тайлов (1 — трава, 2 — стена и т.д.). Для начального отображения используется утилита 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));

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

Логика поворота привязана к событию клика (pointerup). При каждом клике происходит три ключевых действия.

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

Во-вторых, обновлённая матрица снова преобразуется в строку и устанавливается как текст объекта text. Это обеспечивает мгновенную визуальную обратную связь.

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

Анализ результата и поведения

После нескольких кликов вы увидите, как исходная «рамка» из чисел поворачивается. Важно понимать поведение метода:

* **Создание нового массива:** Исходный массив не модифицируется. Это безопасно, если на старую матрицу есть другие ссылки. * **Изменение размеров:** Если исходная матрица имела размеры N x M, то после поворота размеры станут M x N. В нашем примере квадратная матрица 6x6 остаётся квадратной. * **Направление:** RotateRight — поворот по часовой стрелке. Для поворота против часовой стрелки можно вызвать метод три раза или реализовать свою функцию, используя ту же логику транспонирования и реверса строк.

Повторные клики будут продолжать вращать матрицу. После четырёх кликов она вернётся в исходное состояние.

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

Где это может пригодиться?

1. **Головоломки и тетрисо-подобные игры:** Поворот фигур (тетромино) перед установкой на поле. 2. **Редакторы карт:** Быстрое изменение ориентации заранее созданного шаблона местности или строения. 3. **Пошаговые тактики:** Поворот поля боя или расстановки юнитов для изменения угла обзора. 4. **Системы инвентаря:** Если слоты инвентаря представлены как матрица, а предмет занимает несколько ячеек (2x2), его можно повернуть для удобства размещения.

// Пример: поворот фигуры тетромино перед проверкой коллизий
let tetrominoShape = [
    [0, 1, 0],
    [1, 1, 1]
];
// Перед установкой фигуры на сетку:
tetrominoShape = Phaser.Utils.Array.Matrix.RotateRight(tetrominoShape);

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

Использование встроенного метода RotateRight — это эффективный и безошибочный способ манипуляции матрицами в Phaser. Он избавляет от необходимости писать и отлаживать собственные алгоритмы транспонирования. Для экспериментов попробуйте: 1. Связать поворот не с кликом, а с клавишей клавиатуры (например, UP). 2. Визуализировать матрицу не текстом, а спрайтами или цветными квадратами, создав простой редактор уровня. 3. Реализовать функцию RotateLeft, комбинируя RotateRight или работая с reverse() и циклами для строк и столбцов.