146      Глава 6. Двухмерный GUI для трехмерной игры

Теперь, когда мы назначили спрайты элементам UI и указали параметры текста, щелкните на кнопке Play, чтобы посмотреть, как выглядит проекционный дисплей, располагающийся поверх игровой сцены. Как показано на рис. 6.8, холст в редакторе Unity обозначает границы экрана, а элементы UI появляются на этом экране в заданных точках.

Рис. 6.8. Вид GUI в редакторе (слева) и в процессе игры (справа)

Видите, как здорово: вы добились отображения двухмерного проекционного дисплея поверх трехмерной игровой сцены! Осталось только расположить UI-элементы относительно холста.

6.2.3. Управление положением элементов UI

У всех объектов UI существует точка привязки, отображаемая в редакторе в виде крестика (рис. 6.9). Это гибкий инструмент позиционирования элементов интерфейса.

ОПРЕДЕЛЕНИЕ  Привязкой (anchor) объекта называется точка его присоединения к холсту или экрану. Именно относительно этой точки указывается положение объекта.

З а

О-а

Рис. 6.9. Точка привязки изображения

Положение задается в таких категориях, как, к примеру, «50 пикселов по оси X». При этом возникает вопрос, от какой точки отсчитывать эти 50 пикселов? И тут нам на помощь приходит точка привязки. В то время как объект остается статичным относительно этой точки, сама она перемещается относительно холста. Точку привязки можно задать, например, как «центр экрана», и она будет оставаться в центре, когда

6.2. Настройка GUI      147

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

Понять, о чем я говорю, проще всего на примере. Выделите объект-изображение и посмотрите на панель Inspector. Настройки привязки вы найдете сразу под компонентом transform (рис. 6.10). По умолчанию в качестве точки привязки элементов UI выбран вариант Center, но нам для изображения требуется вариант Top Left; на рисунке демонстрируется процесс редактирования данного параметра в окне Anchor Presets.

…

• Anchor presets.

Заодно поменяйте привязку кнопки настроек. Установите для нее значение Top Right, щелкнув на верхнем правом квадрате в меню Anchor Preset. Теперь попробуйте поменять размер экрана, перетаскивая его боковые края влево и вправо. Благодаря привязкам при изменении размеров холста объекты UI останутся на своих местах. Как показано на рис. 6.11, элементы UI перемещаются вместе с краями экрана.

П а а

а Scene

а а а

П а а ,

а а•

• а •

Рис. 6.11. Точки привязки остаются на месте при изменении размеров экрана

СОВЕТ  Точки привязки позволяют подстраиваться не только под изменение положения, но и под изменение размера. В этой главе данная функциональность использоваться не будет, но каждый угол изображения можно связать с одним из углов экрана. На рис. 6.11 изображения сохраняют свой размер, но привязку можно отредактировать таким образом, что при увеличении размера экрана изображения будут растягиваться вместе с ним.