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

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

В игровой разработке часто возникают задачи по работе с двумерными данными: уровни, карты, инвентари. Умение манипулировать этими структурами — ключ к созданию динамичного геймплея. В этой статье разберем, как использовать встроенные утилиты Phaser для эффективного вращения матриц, что пригодится для реализации поворота фигур в тетрисе, изменения вида уровня или преобразования данных игрового поля. Мы рассмотрим конкретный пример, используя методы `Phaser.Utils.Array.Matrix.RotateRight` и `MatrixToString`, и объясним, как интегрировать эту логику в отзывчивую игровую сцену.

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

Живой запуск

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

Исходный код

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

Подготовка сцены и данных

В методе create() инициализируется сцена. Сперва создаются два текстовых объекта: один для инструкции, другой — для визуализации самой матрицы.

Затем объявляется исходная матрица 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));

Обработка пользовательского ввода

Чтобы сделать пример интерактивным, мы навешиваем обработчик события клика (или касания) с помощью this.input.on('pointerup', ...). Каждый клик будет запускать операцию вращения матрицы.

Это стандартный для Phaser способ реагирования на действия игрока. Логика вращения инкапсулирована в колбеке этой функции.

this.input.on('pointerup', () => {
    // Логика вращения будет здесь
});

Ядро операции: RotateRight

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

Алгоритм работает корректно для матриц любого размера N x M. После получения нового массива мы обновляем текстовый объект, чтобы изменения сразу отобразились на экране.

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

Конфигурация и запуск игры

Как и в любом проекте на Phaser, нам нужна базовая конфигурация. В объекте config указывается тип рендерера, родительский контейнер в HTML и стартовая сцена.

Затем создается экземпляр игры new Phaser.Game(config), который инициализирует все системы и запускает сцену Example.

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

const game = new Phaser.Game(config);

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

Вращение матрицы — мощный и часто необходимый инструмент в арсенале игрового разработчика. Используя встроенные утилиты Phaser, вы избегаете написания сложного и подверженного ошибкам кода. Для экспериментов попробуйте привязать вращение не к клику, а к клавише клавиатуры, реализовать анимацию поворота или использовать эту технику для поворота спрайтов, данные которых хранятся в матричной форме (например, пиксель-арт объекты или блоки тетриса).