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

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

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

Живой запуск

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

Исходный код


const config = {
    type: Phaser.WEBGL,
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: '#0055aa',
    parent: 'phaser-example',
    scene: Controller,
    physics: {
        default: 'arcade',
        arcade: {
            debug: false,
            gravity: { y: 0 }
        }
    }
};

const game = new Phaser.Game(config);

window.addEventListener('resize', function (event) {

    // game.resize(window.innerWidth, window.innerHeight);

}, false);

Создание конфигурации игры

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

const config = {
    type: Phaser.WEBGL,
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: '#0055aa',
    parent: 'phaser-example',
    scene: Controller,
    physics: {
        default: 'arcade',
        arcade: {
            debug: false,
            gravity: { y: 0 }
        }
    }
};

Параметр type задает контекст рендеринга. Phaser.WEBGL использует аппаратное ускорение, что обычно быстрее, чем Phaser.CANVAS. Свойства width и height динамически берут размеры окна браузера, делая игру сразу адаптивной. backgroundColor устанавливает фоновый цвет в HEX-формате. Важно указать parent — ID HTML-элемента, в который будет встроен canvas; если элемента с таким ID нет, он будет создан. Ключевой параметр scene указывает на класс, который будет управлять логикой основной сцены (в данном случае Controller).

Настройка физики Arcade

Phaser предлагает несколько физических движков. Arcade — самый простой и легковесный, идеальный для 2D-игр с прямоугольным или круговым обнаружением столкновений.

physics: {
    default: 'arcade',
    arcade: {
        debug: false,
        gravity: { y: 0 }
    }
}

В блоке arcade мы задаем опции. debug: false отключает отладочную отрисовку hitbox (границ столкновений) для всех физических тел — в продакшене это обязательно. gravity: { y: 0 } устанавливает гравитацию по вертикальной оси. Значение `0означает ее отсутствие, что типично для топ-даун или пошаговых игр. Для платформера здесь можно задать положительное значение, например,{ y: 300 }`.

Инициализация игры и обработка ресайза

После описания конфигурации необходимо создать экземпляр игры. Также хорошей практикой является обработка изменения размеров окна браузера.

const game = new Phaser.Game(config);

window.addEventListener('resize', function (event) {
    // game.resize(window.innerWidth, window.innerHeight);
}, false);

Конструктор new Phaser.Game(config) запускает весь процесс: создает canvas, инициализирует системы (включая физику) и запускает сцены. Слушатель события resize на объекте window позволяет реагировать на изменение размеров окна. В примере вызов game.resize закомментирован, так как он может требовать дополнительной логики масштабирования содержимого сцены. Если его раскомментировать, игра попытается подстроить внутреннее разрешение (width, height) под новые размеры окна.

Следующие шаги: от сцены к игровым объектам

Конфигурация готова, но игра пуста. Следующий этап — написание класса сцены (Controller в нашем примере).

class Controller extends Phaser.Scene {
    constructor() {
        super({ key: 'MainScene' });
    }

    preload() {}
    create() {}
    update() {}
}

В методе preload() вы загрузите изображения и звуки. В create() — создадите игровые объекты, такие как спрайты с физическими телами, используя API вроде this.physics.add.image. В update(), который вызывается каждый кадр, вы будете обрабатывать ввод пользователя и обновлять игровую логику. Именно в методе create() вы начнете населять настроенный физический мир объектами.

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

Вы разобрали базовый каркас для игры на Phaser 3 с физикой Arcade. Этот шаблон гибок: вы можете легко изменить гравитацию, включить отладочный режим для визуализации столкновений или переключиться на другой рендерер. Для экспериментов попробуйте

  1. установить гравитацию { y: 500 } и создать статичную платформу, чтобы наблюдать падение объекта
  2. раскомментировать game.resize и проверить, как игра ведет себя при изменении размеров окна
  3. включить debug: true после создания физических тел, чтобы увидеть их границы