142 Глава 6. Двухмерный GUI для трехмерной игры
Первым делом перетащите все изображения на вкладку Project, чтобы импортировать их в редактор, а затем на панели Inspector убедитесь, что у каждого из них параметр Texture Type имеет значение Sprite (2D And UI).
ВНИМАНИЕ Параметр Texture Type в трехмерных проектах по умолчанию принимает значение Texture, а в двухмерных — Sprite. Если вам требуются спрайты для трехмерного проекта, этот параметр нужно отредактировать вручную.
Все изображения, показанные на рис. 6.3, есть в скачанном примере проекта.
close |
enemy |
gear |
popup |
Э а |
Э а |
Э а а |
Э а |
а а |
а а |
а |
а а а |
а а |
а |
а |
|
|
|
|
а а |
Рис. 6.3. Изображения, необходимые для текущего проекта
Убедитесь, что все импортированные ресурсы являются спрайтами; вам, скорее всего, потребуется отредактировать у них параметр Texture Type.
Спрайты включают в себя кнопки, индикатор счета и всплывающее окно, которое вам предстоит создать. Теперь, когда они импортированы в проект, расположим графику на экране.
6.2. Настройка GUI
В качестве графических ресурсов выступает уже знакомая нам по главе 5 разновидность двухмерных спрайтов, просто на этот раз мы будем использовать их немного по-другому. В Unity есть специальные инструменты, которые вместо демонстрации изображений в составе сцены превращают их в проекционный дисплей, отображаемый поверх трехмерной сцены. Кроме того, есть особые приемы размещения UIэлементов, обусловленные тем фактом, что на разных экранах фрагменты интерфейса зачастую отображаются по-разному.
6.2.1. Холст для интерфейса
Одним из наиболее фундаментальных и при этом неочевидных аспектов функционирования системы UI является необходимость связать все изображения с холстом.
СОВЕТ Холст (canvas) представляет собой специальный вид объектов, который Unity визуализирует как UI для игр.
Откройте меню GameObject, чтобы увидеть перечень доступных для создания объектов, и в категории UI выберите вариант Canvas. В сцене появится холст (для ясности
6.2. Настройка GUI 143
присвойте ему имя HUD Canvas). Этот объект растянут на весь экран и сильно связан с трехмерной сценой, так как масштабирует один пиксел экрана в одну единицу измерения сцены.
ВНИМАНИЕ Вместе с холстом автоматически создается объект EventSystem. Он требуется для UI-взаимодействий, в остальных же случаях его можно просто игнорировать.
Переключитесь в режим 2D, как показано на рис. 6.4, и дважды щелкните на имени холста на вкладке Hierarchy, чтобы уменьшить масштаб этого объекта и увидеть его целиком. Двухмерный режим включается автоматически для всех 2D-проектов, но в случае 3D-проекта переход между UI и основной сценой осуществляется при помощи переключателя. Для возвращения к просмотру трехмерной сцены отключите режим 2D и дважды щелкните на строке Building, чтобы отмасштабировать объект.
О-
а а Scene.
О
а а а , а а а а
• UI.
Г а • а
а а • , •
• а - € ‚ а
Д •€ „ :
• • а€ ‚ „
а • € -а†€,
UI-‚ а
Ц •
а • а а • а• ,
Rect
НЕ а . О • а
•€
- Unity; •
-а
- а
Рис. 6.4. Пустой холст на вкладке Scene
СОВЕТ Хочу напомнить вам совет из главы 4: в верхней части вкладки Scene располагаются кнопки, управляющие видимостью различных элементов, поэтому найдите кнопку Effects, чтобы отключить видимость скайбокса.
У холста есть ряд доступных для редактирования параметров. Прежде всего, это параметр Render Mode, которому следует оставить значение, предлагаемое по умолчанию. Для него возможны следующие значения:
Screen Space-Overlay — визуализация элементов UI как наложенной поверх вида с камеры двухмерной графики (предлагается по умолчанию).
Screen Space-Camera — элементы UI также визуализируются поверх вида с камеры, но могут поворачиваться, создавая эффекты перспективы.
World Space — холст помещается в сцену, что делает элементы UI частью трехмерной сцены.
144 Глава 6. Двухмерный GUI для трехмерной игры
Последние два режима применяются для создания специальных эффектов, но имеют несколько более сложную реализацию по сравнению с режимом, предлагаемым по умолчанию.
Еще одной важной настройкой является флажок Pixel Perfect. После его установки положение изображений в процессе визуализации слегка корректируется с целью придать им четкий и контрастный вид (в отличие от размывания). Установите этот флажок, и холст готов к размещению спрайтов.
6.2.2. Кнопки, изображения и текстовые подписи
Объект-холст задает область, которая будет отображаться как UI, но туда следует добавить спрайты, соответствующие отдельным элементам. В соответствии с макетом на рис. 6.2 у нас есть изображение блока/врага в верхнем левом углу и рядом с ним текст, отображающий набранные очки, а также кнопка в виде шестерни в верхнем правом углу. В разделе UI меню GameObject есть команды, позволяющие создать изображение (Image), текст (Text) или кнопку (Button). Создайте по одному элементу каждого вида.
Для корректного отображения UI-элементы должны быть потомками объекта-хол- ста. В Unity эта иерархическая связь возникает автоматически, но напомню, что подобные зависимости можно формировать и вручную, перетаскивая объекты на вкладке Hierarchy (рис. 6.5).
О-
О-а
( а-а
а а Hierarchy)
Рис. 6.5. Холст и связанное с ним изображение на вкладке Hierarchy
Между расположенными на холсте объектами также можно сформировать иерархические связи с целью их более удобного размещения. Например, можно перетащить текст на изображение, чтобы надпись перемещалась вместе с картинкой. Более того, у создаваемой по умолчанию кнопки есть дочерний по отношению к ней текстовый объект; в данном случае подпись на кнопке не требуется, поэтому просто удалите его.
Перетащите элементы UI на предназначенные им места. В следующем разделе мы зададим их точное положение, пока же это не имеет особого значения. Указателем мыши перетащите объект-изображение в верхний левый угол холста, а кнопку — в верхний правый.
СОВЕТ Как уже упоминалось в главе 5, в режиме 2D активируется инструмент Rect. Я описывал его как средство, включающее в себя все три преобразования: перемещение, поворот и масштабирование. В режиме 3D эти операции выполняются отдельными инструментами, но при переходе к работе с двухмерными объектами они объединяются, так как у нас пропадает одно измерение. В режиме 2D этот инструмент выбирается автоматически, кроме того, можно активировать его щелчком на кнопке в верхнем левом углу Unity.
6.2. Настройка GUI 145
Пока оба элемента пусты. Если выделить объект UI и посмотреть на панель Inspector, в верхней части свитка Image вы увидите поле Source Image. Как показано на рис. 6.6, перетащите на это поле спрайты (ни в коем случае не текстуры!) с вкладки Project. Назначьте спрайт с изображением врага объекту-изображению, а спрайт с изображением шестерни — объекту-кнопке. Для обеспечения корректного размера спрайтов щелкните на кнопке Set Native Size.
1. П а а а
Project Source Image…
2. … … ‚ аˆ • € € •а ‰ † • UI
3. Щ • •а • Set Native Size€ ‚ ƒ • € • „ а…† а
а а
Рис. 6.6. Назначение двухмерных спрайтов свойству Image UI-элементов
Это обеспечит нужный внешний вид картинки с изображением врага и кнопки настроек. У текстового объекта также существует множество параметров, отображаемых на панели Inspector. Первым делом введите какое-нибудь число в большое поле Text; позднее это значение будет переопределено, пока же введенная информация выглядит в редакторе как индикатор набранных очков. Увеличьте размер текста, присвоив параметру Font Size значение 24 и выбрав в раскрывающемся списке Font Style вариант Bold. При этом горизонтально эта текстовая подпись должна быть выровнена по левому краю, а вертикально — по центру, как показано на рис. 6.7. Остальным параметрам мы пока оставим значения, предлагаемые по умолчанию.
О UI а а
,
И • • • TrueType
‚
Э а
а а а а
а а
Рис. 6.7. Настройки текстового элемента UI
ПРИМЕЧАНИЕ Кроме содержимого поля Text и выравнивания чаще всего редактируется свойство Font (шрифт). В Unity можно импортировать шрифт TrueType и выбрать его на панели Inspector.