Работа с разными соотношениями сторон

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

Phaser предоставляет гибкие инструменты для управления этим процессом, главным образом через систему масштабирования (Scale Manager).

Настройка режима масштабирования

Phaser 3 использует объект scale в конфигурации игры для управления размерами канваса и поведения сцены при изменении размеров окна.

Пример конфигурации:

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

Ключевые параметры scale:

  • mode — определяет способ масштабирования сцены. Основные режимы:

    • Phaser.Scale.NONE — без масштабирования, сцена фиксированного размера.
    • Phaser.Scale.FIT — масштабирует сцену так, чтобы она полностью помещалась в окно, сохраняя пропорции.
    • Phaser.Scale.ENVELOP — сцена заполняет всё окно, возможна обрезка.
    • Phaser.Scale.RESIZE — размеры сцены изменяются вместе с размерами окна, без сохранения исходных пропорций.

  • autoCenter — автоматическое центрирование сцены:

    • Phaser.Scale.CENTER_BOTH — по горизонтали и вертикали.
    • Phaser.Scale.CENTER_HORIZONTALLY — только по горизонтали.
    • Phaser.Scale.CENTER_VERTICALLY — только по вертикали.
    • Phaser.Scale.NO_CENTER — центрирование отключено.

Использование Phaser.Scale.FIT позволяет корректно отображать сцену на устройствах с разными размерами экрана, не искажая графику.

Масштабирование игровых объектов

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

Пример использования процентных координат:

const sprite = this.add.sprite(
    this.scale.width * 0.5,
    this.scale.height * 0.5,
    'player'
);

sprite.setScale(Math.min(
    this.scale.width / 800,
    this.scale.height / 600
));

Объяснение:

  • this.scale.width * 0.5 и this.scale.height * 0.5 — центрирование спрайта относительно текущего размера сцены.
  • setScale с использованием минимального коэффициента ширины и высоты сохраняет исходное соотношение сторон спрайта.

Такой подход предотвращает растягивание или сжатие графики на экранах с нестандартными пропорциями.

Обработка изменения размеров окна

Phaser позволяет динамически реагировать на изменения размеров окна через события resize объекта Scale Manager:

this.scale.on('resize', (gameSize, baseSize, displaySize, resolution) => {
    const width = gameSize.width;
    const height = gameSize.height;

    sprite.setPosition(width * 0.5, height * 0.5);
});

Параметры события:

  • gameSize — текущие размеры сцены.
  • baseSize — базовый размер, заданный в конфигурации.
  • displaySize — размеры видимой области канваса.
  • resolution — коэффициент плотности пикселей (DPI).

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

Работа с фоновыми изображениями и адаптивной графикой

Фоновые изображения обычно требуют особого внимания, чтобы избежать растяжения. Для этого используется метод setDisplaySize:

const background = this.add.image(0, 0, 'background').setOrigin(0, 0);
background.setDisplaySize(this.scale.width, this.scale.height);

Особенности:

  • setOrigin(0, 0) — привязка к верхнему левому углу сцены.
  • setDisplaySize растягивает изображение на весь экран, что подходит для фоновых элементов. Для сохранения пропорций можно использовать setScale с расчетом минимального коэффициента.

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

Практическая стратегия адаптации

  1. Фиксированный базовый размер сцены — выбирается один стандарт (например, 800×600) для всех игровых расчетов.
  2. Режим FIT или RESIZE — позволяет сцене подстраиваться под экран.
  3. Процентные координаты для объектов — гарантируют сохранение расположения элементов.
  4. Динамическая корректировка спрайтов и UI при событии resize — обеспечивает гибкость.
  5. Сохранение пропорций графики через setScale с минимальным коэффициентом ширины и высоты.

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

Оглавление