FIT, ENVELOP, WIDTH_CONTROLS_HEIGHT, HEIGHT_CONTROLS_WIDTH, NONE

В Phaser управление размерами и масштабированием визуальных объектов играет ключевую роль при создании адаптивных сцен. Библиотека предоставляет мощный инструмент для настройки размеров через режимы масштабирования, позволяя точно контролировать, как объект вписывается в область отображения. Рассмотрим пять основных режимов: FIT, ENVELOP, WIDTH_CONTROLS_HEIGHT, HEIGHT_CONTROLS_WIDTH и NONE.

FIT

Режим FIT обеспечивает пропорциональное масштабирование объекта таким образом, чтобы он полностью помещался в заданный контейнер или область. При этом сохраняется исходное соотношение сторон. Если размеры контейнера не совпадают с пропорциями объекта, появляются свободные области по вертикали или горизонтали.

Пример применения:

const image = this.add.image(0, 0, 'sprite');
this.scale.fit(image, { width: 800, height: 600 });

Ключевые моменты FIT:

  • Сохраняет пропорции исходного объекта.
  • Гарантирует, что весь объект видим внутри контейнера.
  • Свободные области могут появляться, если пропорции не совпадают.

Этот режим идеально подходит для адаптивного размещения изображений на экранах с различным разрешением без искажения.

ENVELOP

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

Пример применения:

const sprite = this.add.sprite(0, 0, 'background');
this.scale.envelop(sprite, { width: 1024, height: 768 });

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

  • Полное заполнение контейнера без пустых зон.
  • Сохраняются пропорции исходного объекта.
  • Возможна обрезка частей объекта, выходящих за границы контейнера.

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

WIDTH_CONTROLS_HEIGHT

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

Пример применения:

const button = this.add.image(0, 0, 'button');
this.scale.widthControlsHeight(button, 300);

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

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

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

HEIGHT_CONTROLS_WIDTH

Режим HEIGHT_CONTROLS_WIDTH обратен предыдущему. Задаётся фиксированная высота, а ширина вычисляется автоматически, сохраняя пропорции объекта.

Пример применения:

const panel = this.add.image(0, 0, 'panel');
this.scale.heightControlsWidth(panel, 200);

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

  • Высота фиксируется, ширина адаптируется.
  • Сохраняется исходное соотношение сторон.
  • Полезен для вертикально ориентированных элементов, например, панелей или колонок интерфейса.

Этот режим позволяет управлять вертикальной компоновкой сцены без деформации объектов.

NONE

Режим NONE отключает автоматическое масштабирование. Размер объекта остаётся таким, какой был задан в ресурсах. Все изменения размеров должны выполняться вручную через свойства scaleX и scaleY или методы setDisplaySize.

Пример применения:

const logo = this.add.image(0, 0, 'logo');
logo.setDisplaySize(150, 100); // ручная настройка

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

  • Полный контроль над размерами вручную.
  • Нет автоматической подгонки к контейнеру.
  • Используется, когда требуется специфическое масштабирование или эффект анимации.

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

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

  • Для фоновых изображений и адаптивного интерфейса чаще всего применяются FIT и ENVELOP.
  • Для элементов UI с фиксированными размерами удобны WIDTH_CONTROLS_HEIGHT и HEIGHT_CONTROLS_WIDTH.
  • NONE подходит для кастомных анимаций и точного контроля размера.
  • Комбинация этих режимов с методами Phaser setOrigin, setDisplaySize и setScale позволяет создавать гибкие и масштабируемые сцены, адаптированные под разные разрешения экранов.

Эффективное использование этих режимов обеспечивает правильное отображение объектов на всех устройствах и минимизирует искажения при изменении размеров сцены.

Оглавление