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

Современные игры запускаются на множестве устройств: от десктопов с огромными мониторами до мобильных телефонов. Режим масштабирования `Phaser.Scale.FIT` в Phaser 3 — это простой и мощный инструмент, который автоматически адаптирует вашу игровую сцену под размеры окна браузера, сохраняя заданные пропорции и не обрезая контент. Эта статья покажет, как его правильно настроить и проверить, что ваш игровой холст всегда идеально вписывается в доступное пространство, обеспечивая комфортный геймплей на любом устройстве.

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

Живой запуск

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

Исходный код


new Phaser.Game({
    scale: {
      mode: Phaser.Scale.FIT,
      width: 800,
      height: 600
    },
    callbacks: {
      postBoot: function (game) {
        console.assert(
          game.scale.scaleMode === Phaser.Scale.FIT,
          "Expected scaleMode %s but got %s",
          Phaser.Scale.FIT,
          game.scale.scaleMode
        );
      }
    }
  });

Что такое Phaser.Scale.FIT?

Phaser.Scale.FIT — это один из режимов масштабирования, предоставляемых системой Phaser.Scale.ScaleManager. Его основная задача — вписать игровое поле в родительский контейнер (обычно окно браузера) без искажений и обрезки.

Принцип его работы прост: он равномерно масштабирует вашу игру (как увеличивая, так и уменьшая), чтобы она целиком поместилась в доступную область. При этом по бокам или сверху/снизу могут появляться пустые полосы ("letterboxing"), если пропорции окна и игры не совпадают. Это гарантирует, что весь ваш игровой мир будет виден пользователю.

Настройка масштабирования в конфигурации игры

Режим масштабирования задается в момент создания экземпляра Phaser.Game, в объекте конфигурации. Ключевой объект — scale. В нем мы определяем режим (mode) и базовое разрешение игры (width, height), под которое делалась графика и рассчитывались позиции объектов.

new Phaser.Game({
    scale: {
      mode: Phaser.Scale.FIT,
      width: 800,
      height: 600
    },
    // ... другие настройки игры
});

В этом примере мы говорим Phaser: "Создай игровой мир с внутренним разрешением 800x600 пикселей и автоматически подгоняй его (FIT) под размер окна браузера, сохраняя пропорции 4:3".

Проверка активации режима через колбэк `postBoot`

После полной инициализации игры Phaser вызывает ряд колбэков. Один из них — postBoot, который срабатывает, когда система масштабирования уже полностью настроена. Это идеальное место, чтобы проверить, что нужный режим масштабирования был корректно применен.

В примере используется console.assert для валидации. Это полезная практика для отладки во время разработки.

callbacks: {
  postBoot: function (game) {
    console.assert(
      game.scale.scaleMode === Phaser.Scale.FIT,
      "Expected scaleMode %s but got %s",
      Phaser.Scale.FIT,
      game.scale.scaleMode
    );
  }
}

Колбэк postBoot получает объект game в качестве аргумента. Через game.scale.scaleMode мы можем получить текущий установленный режим и сравнить его с ожидаемым Phaser.Scale.FIT. Если они не совпадут, в консоль браузера будет выведено сообщение об ошибке с указанием ожидаемого и фактического значения.

Как использовать game.scale после запуска

Объект game.scale доступен не только в колбэках, но и в любой момент работы игры, например, в сценах. Через него можно динамически управлять масштабированием, реагировать на изменение размеров окна или получать полезные данные.

// Внутри метода create() сцены
create() {
    // Получаем текущий режим масштабирования
    const currentMode = this.scale.scaleMode;
    
    // Получаем фактор масштаба, примененный к игре
    const zoom = this.scale.zoom;
    
    // Получаем размеры области отрисовки игры на экране
    const displayWidth = this.scale.displaySize.width;
}

Эти свойства помогают создавать адаптивные интерфейсы или корректировать геймплей в зависимости от реального размера игрового холста на экране пользователя.

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

Использование Phaser.Scale.FIT — это самый безопасный и предсказуемый способ сделать вашу игру адаптивной. Он избавляет от необходимости вручную рассчитывать масштаб и гарантирует, что весь контент будет виден. Для экспериментов попробуйте изменить базовое разрешение width и height или переключиться на другие режимы, например Phaser.Scale.ENVELOP (который заполняет окно, но может обрезать игру) или Phaser.Scale.RESIZE (который меняет внутреннее разрешение игры под размер окна). Также можно добавить прослушиватель события resize на this.scale, чтобы динамически перераспределять элементы UI при изменении размеров окна.