ScaleManager: режимы масштабирования

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

Основные режимы масштабирования

ScaleManager в Phaser 3 поддерживает несколько режимов масштабирования, определяемых свойством mode. Эти режимы определяют поведение игрового канваса относительно размера окна или контейнера:

  1. NONE Игровой канвас не масштабируется.

    • Размер канваса фиксирован в пикселях.
    • Полезен для тестирования или при строгом контроле размеров элементов.
    • Пример настройки:
    this.scale.mode = Phaser.Scale.NONE;

  2. FIT Канвас масштабируется так, чтобы полностью вписываться в доступное пространство, сохраняя исходное соотношение сторон.

    • Идеально для адаптивных игр с фиксированным контентом.
    • Возможны пустые области по краям (letterboxing).
    • Пример:
    this.scale.mode = Phaser.Scale.FIT;
this.scale.updateBounds();

  3. ENVELOP (иногда используется как ZOOM) Канвас масштабируется до полного заполнения контейнера, может обрезать часть контента для сохранения соотношения сторон.

    • Применяется, когда важно заполнить весь экран.
    • Требует тщательного позиционирования важных элементов внутри safe area.
    • Пример:
    this.scale.mode = Phaser.Scale.ENVELOP;

  4. RESIZE Игровой канвас изменяет размеры в соответствии с изменением контейнера или окна.

    • Контент динамически адаптируется, что удобно для интерфейсов, требующих полной растяжки.
    • Не сохраняет исходное соотношение сторон, поэтому может искажать графику.
    • Пример:
    this.scale.mode = Phaser.Scale.RESIZE;

Настройка ориентации и автоскейлинга

ScaleManager позволяет управлять ориентацией игры и автоматическим масштабированием:

  • Ограничение ориентации

    this.scale.orientation = Phaser.Scale.LANDSCAPE; // Или PORTRAIT
this.scale.lockOrientation();

    При этом при неверной ориентации можно показывать пользователю подсказку сменить положение устройства.

  • Автоматическое центрирование канваса

    this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;

    Позволяет автоматически центрировать игру на странице или внутри контейнера.

События ScaleManager

ScaleManager генерирует события, которые помогают реагировать на изменение размеров или ориентации:

  • resize — срабатывает при изменении размера канваса.
  • orientationchange — при смене ориентации устройства.

Пример использования события resize для адаптации элементов интерфейса:

this.scale.on('resize', (gameSize, baseSize, displaySize, resolution) => {
    console.log('Новый размер игры:', gameSize.width, gameSize.height);
    this.cameras.resize(gameSize.width, gameSize.height);
});

Свойства и методы ScaleManager

  • width и height — текущие размеры игрового канваса.
  • parent — контейнер DOM, в котором размещается игра.
  • fullScreenTarget — элемент, который разворачивается в полноэкранный режим.
  • updateBounds() — пересчитывает размеры канваса после изменения контейнера или режима.
  • startFullscreen() и stopFullscreen() — управление полноэкранным режимом через браузерные API.

Практические рекомендации

  • Для адаптивной игры с сохранением пропорций лучше использовать FIT, чтобы избежать искажений.
  • Если важен каждый пиксель интерфейса, используется RESIZE, но следует учитывать возможное растяжение спрайтов.
  • При разработке под мобильные устройства рекомендуется комбинировать FIT с автоскейлингом и обработкой событий resize, чтобы интерфейс оставался корректным при смене ориентации.
  • Для полноэкранного режима рекомендуется использовать fullScreenTarget и проверять поддержку API браузером.

Эффективное использование ScaleManager позволяет создавать игры, которые одинаково корректно отображаются на широком спектре устройств, обеспечивая удобный контроль над размером канваса, пропорциями и позиционированием контента.

Оглавление