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

Изменение окна игры в Phaser.js

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

Базовый размер окна

Размер задается при создании игры через параметры width и height.

new Phaser.Game({
  type: Phaser.AUTO,
  width: 1024,
  height: 768,
  scene: {
    preload,
    create,
    update
  }
})

Такой подход подходит для фиксированного размера, например для desktop-версии или прототипа.

Адаптация под экран через Scale Manager

Для адаптивного интерфейса лучше использовать встроенный менеджер масштабирования.

const config = {
  type: Phaser.AUTO,
  width: 1280,
  height: 720,
  parent: 'game-container',
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH
  },
  scene: { preload, create, update }
}

new Phaser.Game(config)

FIT сохраняет пропорции игры, а autoCenter центрирует canvas в контейнере.

Реакция на изменение размера окна

Если интерфейс зависит от размеров экрана, обработайте событие resize.

function create() {
  this.scale.on('resize', (gameSize) => {
    const { width, height } = gameSize

    // здесь можно пересчитать позиции UI-элементов
    this.cameras.main.setViewport(0, 0, width, height)
  })
}

Фиксированный мир + адаптивное отображение

Практичный вариант: логика игры работает в фиксированном мире (например 1280x720), а Phaser масштабирует отображение под устройство. Так проще поддерживать физику, коллизии и UI.

Частые ошибки

• Менять только CSS-размер canvas без настройки scale в Phaser.
• Не учитывать соотношение сторон устройства и получать обрезание контента.
• Позиционировать интерфейс в пикселях без перерасчета при resize.

Итог

Для большинства проектов оптимально использовать Phaser.Scale.FIT, фиксированное базовое разрешение и обработчик resize для интерфейса. Это дает предсказуемое поведение на desktop и mobile.