Экраны

Компонент экрана определяет область, в которой создается пользовательский интерфейс. Его основная задача - определить, как содержимое экрана (дочерние объекты Entity с компонентами элементов) будет отображаться.

Экранное пространство или мировое пространство

Основной выбор режима отображения для экрана - это отображение в экранном пространстве или мировом пространстве.

Компонент экранного пространства не следует обычной иерархии трансформации. Вместо этого он отображается как наложение на камеру. Это полезно для создания 2D-интерфейсов, HUD или других игровых интерфейсов. В меню есть опция создания экрана в экранном пространстве, добавив 2D Screen.

Если опция экранного пространства отключена, экран отображается с использованием обычной иерархии трансформации. Элементы все еще позиционируются относительно системы координат экрана, но экран появляется в 3D-мире. В меню есть опция создания экрана в мировом пространстве, добавив 3D Screen.

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

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

Простейший способ отображения элементов - без масштабирования.

В этом случае пользовательский интерфейс хорошо работает на разрешении iPad. Однако что произойдет, если мы посмотрим на эту же сцену на iPhone.

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

Компонент экрана имеет свойство Scaling Mode, доступное для компонентов экранного пространства. Если оно установлено в Blend, то экран масштабирует интерфейс так, чтобы он соответствовал разрешению экрана, на котором он отображается. Вот тот же интерфейс с использованием смешанного масштабирования на iPad:

и на iPhone

Как видите, теперь пользовательский интерфейс работает на обоих разрешениях.

Как рассчитывается коэффициент масштабирования?

Мы используем свойство Reference Resolution компонента экрана в качестве "идеального" разрешения. Если ваше приложение отображается на большем разрешении, чем ссылка, то оно масштабируется вверх. Если оно отображается на меньшем разрешении, чем ссылка, оно масштабируется вниз. Поскольку приложения могут по-разному реагировать на горизонтальные или вертикальные изменения, мы также предоставляем свойство Scale Blend, которое определяет, какую ось использовать. Scale Blend равное 0 использует только горизонтальное разрешение, Scale Blend равное 1 использует только вертикальное разрешение, Scale Blend равное 0,5 использует оба в равных количествах.

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

Со значением 0 увеличение горизонтального разрешения делает кнопку слишком большой

Со значением 1 уменьшение вертикального разрешения делает кнопку слишком маленькой

Со значением 0.5 оба изменения сбалансированы, и размер кнопки остается прежним