За что отвечает вкладка hierarchy в unity

За что отвечает вкладка hierarchy в unity

Главная » Введение в Unity: приступая к работе — часть 1

Введение в Unity: приступая к работе — часть 1

В этом уроке для начинающих вы узнаете об интерфейсе Unity и о том, как создать свою первую игру в этой среде разработки.

Версия: C# 7.2, Unity 2018.3, Unity

Когда я впервые начал изучать разработку игр для iOS, Xcode (SpriteKit), то это казалось очень сложным. Движок Unity, с другой стороны, имел визуальный редактор, а также имел возможность публиковать игры для мобильных устройств.

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

Сегодня Unity может похвастаться большей разработкой игр, чем другие игровые технологии. И благодаря поддержке почти 30 платформ, включая мобильные, виртуальную реальность, десктопов и консолей, Unity — не просто хорошее место для начала, а идеальное место для этого!

В редакторе Unity применяется прекрасная модульная система для построения сцен и персонажей в игре. Даже если вы только начинаете знакомство с движком, то вы все равно сможете сделать довольно крутой космический корабль с базовым набором лего-кирпичей Unity.

Или, если вы чувствуете, что готовы к «высокоизощренной взаимосвязанной кирпичной системе» для взрослых, то Unity дает вам возможность настроить практически любой компонент, например, написать свои собственные шейдеры или переписать сетевые стеки в соответствии с потребностями вашей игры!

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

В данном уроке вы изучите:

• Как установить Unity и ознакомитесь с различиями между тремя версиями движка
• Окна редактора, которые представляют интерфейс Unity
• Навигация внутри окна сцены
• Добавление и манипулирования игровыми объектами и их компонентами

Первая часть урока рассказывает все о пользовательском интерфейсе Unity.

Во второй части данного урока, вы примените эти знания для создания своей первой игры, простой игры с летающим космическим кораблем и астероидами. Вы сделаете этого с помощью феи, которая предоставит все скрипты и модели, чтобы вы смогли больше сосредоточиться на интерфейсе Unity.

Этот урок ориентирован на тех, у кого мало или нет опыта в Unity. В идеале, у вас должен быть некоторый опыт в программировании, но если нет, то не переживайте — мы проведем вас через все сложности!

Приступая к работе

Первый шаг данного урока — скачать Unity. Но подождите — имеется четыре разные версии. Какую следует выбрать?

Все версии Unity предоставляют одинаковые особенности движка.

• Personal: бесплатная (как пиво)
• Plus: Стоит $35 в месяц
• Pro: Стоит $125 в месяц

Также есть версия Enterprise, где ваши персональные требования определяют стоимость подписки.

Наиболее примечательное различие между этими версиями в том, что игры, созданные при помощи версии Personal должны запускаться с заставкой Unity, в то время как платные версии позволяют вам убрать эту заставку и создать свою собственную.

Кроме того, существуют различные уровни сервисов Unity, такие как Cloud Build и Analitics, которые разблокируются на каждой ценовой категории.

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

Для выполнения последующих уроков будет достаточно версии Personal Edition, поэтому нажмите на кнопку «Try Personal». На странице загрузки нажмите на большую кнопку «Download Installer».

Запустите установщик программы и следуйте инструкциям на экране, которые означают — нажмите кнопку «Continue» и примите лицензионное соглашение. Дождитесь, когда программа установится, а затем запустите Unity. Вам будет предложено войти в учетную запись, прежде чем идти дальше.

Вам нужно будет создать бесплатную учетную запись Unity для того, чтобы использовать программу, если еще не пользовались. Чтобы создать аккаунт нажмите на ссылку «create one» и заполните форму регистрации.

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

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

Нажмите на кнопку «New project». Вы увидите переключение диалога на следующие элементы:

1. Назовите проект Space Debris и выберите расположение на жестком диске для сохранения файлов.
2. Вы заметите, что есть несколько вариантов выбора. Каждый шаблон заранее конфигурирует Unity, чтобы сэкономить время в зависимости от задачи. Теперь выберите 3D.
3. Кнопка Asset packeges позволяет импортировать пользовательские пакеты в проект. Например, если вы делаете игру жанра fps, то вам нужно будет импортировать пакет Unity для управления персонажем от первого лица.

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

1. Unity Analitics можно оставить отключенной, так как она не рассматривается в этом уроке.
2. И наконец, нажмите на Create project, и откройте свой первый проект на Unity.

Меняем интерфейс Unity

При первом открытии Unity, вы увидите окно, которое выглядит следующим образом:

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

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

В правом верхнем углу вы увидите пять кнопок. Выберите последнюю справа. Это раскрывающийся список «Layout». Из списка опций выберите опцию «2 by 3».

Редактор Unity теперь должен выглядеть как на изображении ниже:

Вот расположение различных разделов:

1. Scene View

Окно просмотра сцены — это область, в которой происходит построение игры. Здесь вы добавляете все модели, камеры и другие объекты, которые создают вашу игру. Это 3D-окно, где можно визуально размещать все используемые игровые ресурсы.

Когда вы тестируете игру в Unity, сцена обновляется с текущим состоянием игры. Вы даже можете добавлять новые элементы в любое время на сцену.

Когда вы останавливаете игру, то сцена возвращается в свое первоначальное состояние. Любые изменения, которые были внесены в окно сцены во время воспроизведения игры, будут потеряны после остановки.

2. Game View

Окно «Game View» отображает перспективу игры. В нем можно воспроизводить игру и смотреть, как различные механизмы взаимодействуют друг с другом.

В окне отображения игры есть настройка соотношения сторон, которая позволяет изменять размеры области воспроизведения в соответствии с определенным соотношением экрана (например, 4:3, 16:9, 16:10 …), или размером экрана устройства, таких как iPhone или iPad.

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

3. Окно «Hierarchy»

В окне иерархии содержится список всех текущих игровых объектов, которые используются в игре. Но что такое GameObject (игровой объект)? Очень просто: игровой объект — это объект в игре.

ОК, это вообще-то немного больше, чем просто объект!

По сути, экземпляры класс GameObject — это пустые контейнеры, которые можно настраивать, добавляя к ним компоненты. Компоненты позволяют игровым объектам проецировать геометрию (от простого куба до более сложных 3D-моделей башен или монстров), излучают свет, действуют как камера или даже создают сложное поведение через скрипты.

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

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

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

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

4. Окно Project

Окно проекта содержит все игровые ресурсы, используемые в игре. Вы можете распределить эти ресурсы по папкам. Если нужно их использовать, то просто перетащите их из окна проекта на окно иерархии объектов.

Кроме того, игровые ресурсы можно перетаскивать из окна проекта на сцену. Если вы перетащите файлы со своего компьютера на окно проекта, то Unity автоматически импортирует их в качестве игровых ресурсов.

Unity организует ресурсы в окне Project так же, как файловая система ОС. Может возникнуть соблазн внести изменения в файловую систему, а не в окне проекта, но это большая ошибка, которая испортит игровые ресурсы — и возможно игру!

Unity поддерживает метаданные для каждого игрового ресурса, поэтому их перемещение между папками в файловой системе поломает эти данные. Если нужно сделать какие-либо организационные изменения для игровых ресурсов (в особенности префабы), то всегда вносите эти изменения в окне проекта.

5. Окно Inspector

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

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

6. Панель инструментов

Верхнее меню панели инструментов используется для управления различными игровыми объектами на сцене. Вы будете использовать следующие инструменты при разработке игры, поэтому ознакомьтесь с ними, попробовав их в пустом проекте!

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

1. Откройте выдающий список GameObject из меню Unity.
2. Выберите 3D Object.
3. Выберите Cube из списка доступных объектов.

Это даст визуальный ориентир, пока вы исследуете главное меню панели инструментов.

Примечание. Если вы потеряли отслеживание куба во время экспериментирования с параметрами, то просто нажмите два раза кнопкой мыши на Cube GameObject в окне иерархии. Это действие установит куб в центр сцены.

Инструмент Hand — это удобный инструмент (не волнуйтесь, ребята, шутки становятся еще глупее!) с множеством встроенных полезных функций.

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

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

Далее, зажмите кнопки Ctrl (или Cmd) и Alt (или Option). Нажмите правую кнопку мыши и подвигайте ей вверху, чтобы масштабировать сцену.

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

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

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

Клавиша быстрого доступа для инструмента «hand» по умолчанию Q. Чтобы быстро перейти на этот инструмент, нажмите среднюю кнопку мыши. Как только вы ее отпустите, то вернетесь к ранее используемому инструменту.

Инструмент «Translate» позволяет выбирать и размещать игровые объекты на сцене.

Когда вы выберете игровой объект при активном инструменте «Translate», то заметите, что из центра объекта направлены три цветных стрелки. Эти стрелки указывают трехмерные оси объекта: ось X — красная стрелка, ось Y — зеленая стрелка, ось Z — синяя стрелка.

Система координат в Unity левосторонняя. Для более подробного объяснения, что такое левосторонняя и правосторонняя системы координат, ознакомьтесь с этой интересной статьей по данной теме.

Примечание. Эта группа из трех цветных стрелок в Unity называется gizmo. Это 3D-объект или текстура, которые предоставляют информацию об игровом объекте.

В этом случае, gizmo указывает направление каждой оси. По мере изучения Unity, вы сможете добавлять свои gizmo, чтобы указывать такие вещи как точки появления, размещения камер или даже направление ветра. Самое замечательное в gizmo это то, что они отображаются только на сцене, и вы можете их отключить, если они больше не нужны.

Есть много способов перемещать игровой объект при помощи инструмента «Translate». Вы можете выбрать одну из стрелок (которая станет желтой при выборе), и затем перемещать мышь. Игровой объект будет двигаться только по этой оси.

Например, если вы выбрали ось Y и переместили объект, во время обычной ориентации, то игровой объект будет перемещаться только вверх и вниз.

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

Три цветные плоскости в центре игрового объекта позволяют двигать его по двум осям. Цвет квадрата указывает, по какой плоскости он будет двигаться. Например, зеленый квадрат означает, что его можно двигать по плоскости Y (это означает, что он может двигаться по осям X и Z).

Клавиша быстрого доступа для инструмента Translate — W. Инструмент «Rotate», как ни странно, позволяет вращать объекты.

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

Выберите одну из цветных линий, чтобы вращать объект вокруг этой оси.

Клавиша быстрого доступа для этого инструмента — E.

Инструмент «Scale» позволяет масштабировать игровой объект либо по направлению какой-либо оси, либо пропорционально по всем осям.

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

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

Клавиша быстрого доступа для этого инструмента масштабирования по умолчанию — R.

Примечание. Некоторые из вас могут быть немного смущены клавишами быстрого доступа. Вы предполагаете, что для инструмента «Scale» должна быть клавиша S вместо R. Верите вы или нет, но у такого безумия есть система. Вы обратили внимание на знакомое расположение клавиш… возможно одна из них сейчас под рукой?

Да, это верхний ряд клавиатуры!

Unity подразумевает, что вы используете мышь правой рукой, а клавиатуру левой. Ваши пальцы не задействованы на домашнем ряду, будут на клавишах ASDF. Вы заметите, что каждая клавиша быстрого доступа на панели инструментов редактора соответствует клавише выше домашней позиции. Клавиши быстрого доступа для панели инструментов соответствуют клавишам QWERT, слева направо.

К сожалению, иногда вы можете попытаться нажать клавишу W, но нажмете клавишу 2 по ошибке. Это переведет редактор в 2D-режим и будет выглядеть примерно так:

В 2D-режиме объекты теряют свою глубину.

Когда это происходит, просто нажмите клавишу 2 снова и редактор вернется в 3D-режим.

Инструмент «Rect» первоначально используется с двумерными игровыми объектами и игровыми объектами пользовательского интерфейса (UI), хотя вы можете использовать его также и для трехмерных игровых объектов.

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

Можете ли вы угадать клавишу быстрого доступа для этого инструмента? Правильно, это клавиша T.

Инструмент «Transform» сочетает в себе такие действия, как преобразование, масштабирование и вращение, так что все это можно делать без переключения инструментов.

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

Вторые режимы переключения происходят между пространствами Global и Local.

• Режим Global: Вы управляете объектом от точки обзора окружающего мира. Ось X идет слева направо, ось Y идет сверху вниз, а ось Z идет вперед и назад, как обычно.
• Режим Local: Работает с системой координат самого объекта и изменяет ось в соответствии с осью фактического игрового объекта.

7. Кнопки воспроизведения

Кнопки воспроизведения позволяют запускать и останавливать игру. Первая кнопка «Play»:

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

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

Верхнее изображение — это редактор во время создания игры, а нижнее изображение — игра, которая воспроизводится.

Не забывайте о том, что любые изменения, которые вы делаете «на лету» будут утеряны, когда вы остановите игру. Это распространенная ошибка для новичков Unity и даже для завсегдатаев — запускать игру и вносить кучу изменений, которые исчезают, когда игра останавливается!

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

К счастью, вы можете изменить цвет затемнения.

1. Выберите Edit > Preferences, чтобы открыть окно настроек Unity.
2. Выберите вкладку Colors слевой стороны, и вы увидите список цветов в разделе Colors, который можно настроить в интерфейсе.
   
   Поле параметра «Playmode tint» управляет цветом затемнения интерфейса.
   
3. Вы можете выбрать любой цвет, нажав кнопкой мыши в указанной области.
4. Чтобы восстановить исходный цвет, нажмите на кнопку «Use Defaults».

Далее следует кнопка «Pause»:

Эта кнопка ставит игру на паузу и позволяет вносить изменения в игру.

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

И наконец, кнопка «Step»:

Эта кнопка позволяет проходить игру по одному кадру за раз. Это удобно, когда вы хотите посмотреть анимацию по кадрам, или когда хотите проверить состояние определенного игрового объекта во время воспроизведения игры.

8. Разные настройки редактора

Последние элементы управления обрабатывают различные аспекты редактора. Первый — раскрывающийся список «Collab», который находится с правой стороны панели инструментов.

Это один из последних сервисов Unity, который помогает большим командам взаимодействовать без проблем над одним проектом.

Следующая кнопка «Services», которая позволяет добавлять дополнительные сервисы для игры. Нажатие на кнопку предложит создать Unity ID проекта.

Как только вы добавите идентификатор проекта, то сможете добавлять сервисы для этого проекта.

Например, вы можете добавить облачные сборки в проект. Это автоматически собирает проект, так что вам не нужно ждать каждой сборки проекта.

Вы также можете добавить:

• Analytics
• In-Game Ads
• Multiplayer Support
• In-App Purchasing
• Performance Reporting
• Collaborate

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

Далее идет кнопка «Account», которая позволяет управлять учетной записью Unity, а также просматривать данные учетной записи, входить и выходить из системы, а также обновлять учетную запись.

Четвертая кнопка «Layers».

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

Последняя кнопка «Layouts» позволяет создавать и сохранять макет окон в редакторе и переключаться между ними. Unity прекрасно настраивается. Каждая из различных панелей в макете может быть изменена, закреплена, перемещена, или даже удалена из редактора.

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

Не беспокойтесь — вы всегда можете добавить окна, которые удалили обратно в интерфейс. Это позволяет настраивать редактор под определенную задачу. Например, возможно вы не хотите, чтобы окно Game было открывалось при работе с анимацией, но вы бы предпочли, чтобы окна Animator и Animation открывались рядом.

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

Unity спасает от этого утомительного действия, позволяя сохранять макеты, на которые вы можете переключаться в любое время через кнопку «Layouts». Вы можете легко открыть новое окно, используя элемент меню «Window».

Макеты могут быть сохранены и повторно вызваны с помощью кнопки Layout. Unity поставляется с несколькими заранее настроенными макетами, такими как «2 by 3» и «Wide». Опция Window в строке меню предоставляет список видов, которые вы можете добавить в редактор.

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

Это охватывает большинство видов отображения, которые вы будете использовать при разработке игр, но кроме них есть еще много других. Вы можете посмотреть их все в документации Unity.

Куда двигаться дальше?

Вы ознакомились с введением в Unity. Во второй части урока вы примените эти концепции на практике при создании небольшой космической игры. Вы узнаете, как создавать игры по правилам редактора «Unity», и получите более глубокое понимание различных инструментов и методов, при помощи которых сможете создать свою собственную игру.

Если у вас есть какие-либо вопросы по уроку, редактору Unity или связанных с ним видами макетов, то присоединяйтесь к обсуждению в комментариях.

За что отвечает вкладка hierarchy в unity

Во-первых, добавим на холст (Canvas) новую кнопку. Для этого во вкладке Hierarchy нужно нажать правой кнопкой мыши по строке Canvas и в контекстном меню выбрать Button. Если у вас во вкладке Scene отображается игровое поле, как на рисунке выше, то нужно перевести фокус на холст, для этого нужно щелкнуть по нему два раза левой кнопкой мыши во вкладке Hierarchy и увеличить масштаб колесиком мыши. В результате вы увидите на холсте новую кнопку. После чего поменяем название кнопки с «Button» на «Новая игра». Для этого на вкладке Hierarchy нужно раскрыть Button и выбрать подпункт Text. Затем во вкладке Inspector нужно поменять Text «Button» на «Новая игра». Ответственным за перезагрузку игры у нас будет скрипт GameController.cs, который привязан к объекту Game Controller в сцене. Нам нужно привязать этот объект к объекту тарелки. За тарелку отвечает скрипт CompletePlayerController.cs. Поэтому откроем его и в область объявления переменных добавим строку: public GameObject gameController; В конце я приведу полный текст скриптов, чтобы была возможность сверить изменения.

После добавления строки во вкладке Inspector, в разделе Complete Player Controller появится пункт Game Controller, нужно перенести в него объект Game Controller с вкладки Hierarchy. Далее нам нужно создать для кнопки какое-то действие, в нашем случае, кликая по ней, мы будем перезапускать игру. Для этого, во вкладке Hierarchy выберем пункт Button, после чего вкладка Inspector изменит свое содержимое: Нас интересует раздел On Click (). Сюда можно добавить функцию, вызываемую по нажатию кнопки. Нажмем на плюсик в этом разделе. После чего этот раздел примет следующий вид: Далее в скрипт GameController.cs нужно добавить функцию для перезапуска игры. Назовем ее restartGame(). Класс SceneManager находится в пространстве имен UnityEngine, поэтому добавим вначале две строчки: Вернемся к редактору Unity. В разделе On Click () Runtime Only можно оставить как есть. Ниже вы видите поле для добавления объекта к этой кнопке. Нам нужно привязать объект Game Controller, так как функцию для кнопки мы будем брать из него. Переносим из вкладки Hierarchy объект Game Controller в это поле. После чего для пункта No Function нужно выбрать функцию из перенесенного объекта. Это функция, которую мы добавили ранее – restartGame(). После чего раздел On Click () будет выглядеть следующим образом: Далее, проверьте, есть ли во вкладке Hierarchy, в пункте Canvas подпункт EventSystem, если нет, то его нужно добавить, так же как и кнопку. EventSystem нужен для того, чтобы кнопка реагировала на клики мышью.

Учебник по новому GUI в Unity. Часть 1.

Старая система GUI была очень мудреной системой, которая требовала чтобы весь код GUI был написан с помощью специальной функции OnGUI . Это был программеро-ориентированный, подход в отличие от визуального ориентированной природы самой Unity. Сам код работал медленно и неэффективно, а на то, чтобы сваять интерфейс, приходилось тратить много времени и сил. Конечно, были инструменты сторонних разработчиков, такие как NGUI, которые пытались решить эту проблему, но за то, чтобы начать пользоваться ими нужно было расстаться с n-й суммой денег.

К счастью, разработчики в Unity Technologies прислушались к народным мольбам и, после двух лет разработки, они предоставили в Unity 4.6 совершенно новый GUI, который мы и рассмотрим в этом уроке. На протяжении трех занятий мы будем создавать новый графический интерфейс к игре, созданной в наших предыдущих сериях уроков Ваяем игру в стиле Jetpack Joyride в Unity 2D.

Замечание: Если вы и в глаза не видели уроки по рассматриваемой нами в качестве примера игре, то ничего страшного в этом нет, тем не менее мы настоятельно рекомендуем вам изучить их. В этом случае вы будете иметь на руках функциональную игру, а не просто проект из сцены с простым меню. Вы также узнаете как можно перейти от старой системы GUI к новой, а это поистине бесценный опыт.

По мере прохождения этого гайда мы добавим в игру классическую сцену главного меню.

Однако, просто добавление нескольких кнопок будет не достаточным чтобы освоить новую систему с графическим интерфейсом. Чтобы добавить изюминку к игре и привлечь ваших пользователей вы будете

• Анимировать кнопки
• Создать выезжающее окно настроек.
• Использовать более новые элементы управления GUI, такие как Text, Slider, Panel, Mask и т.д.

Если вам не терпится, скачайте и вы сразу увидите что мы изучим на этом уроке)

Начинаем работать с GUI

Для начала, вам понадобится несколько изображений для фона, кнопок и других элементов пользовательского интерфейса, а также шрифты для надписей и текста на кнопках. Хорошая новость состоит в том, что вам не придется рыскать в Интернете для поиска нужных ассетов, потому что я подготовил специальный пакет, который имеет все необходимое. Вы можете скачать этот пакет отсюда: RocketMouse_GUI_Assets. Он содержит фоновые изображения, кнопки, значки и др.

Как уже упоминалось, вам придется добавить новую сцену к проекту Rocket Mouse созданному в предыдущих уроках, так что начнем, загрузив окончательный вариант этого проекта: RocketMouse_Final.

Создание сцены с меню в Unity

Скачайте по указанной выше ссылке проект Rocket Mouse и разархивируйте его. Откройте проект в Unity с помощью меню File\Open Project…. Кроме того, откройте папку Assets\Scenes в папке проекта и дважды щелкните на сцену RocketMouse.unity чтобы открыть ее в Unity.

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

Создадим новую пустую сцену. Для этого выберите в меню File\New Scene. Лучше сохранить сцену прямо сразу, поэтому откройте диалоговое окно Save Scene (Сохранить сцену), выбрав в меню File\Save Scene. Затем введите MenuScene в качестве имени сцены и сохранить его в папке Scenes рядом со сценой RocketMouse.

Посмотрите на Браузер проекта (Project browser) чтобы убедиться, что в одной папке лежат две сцены.

Примечание: Если у вас возникнут вопросы при открытии проекта, создании, сохранении сцены, или добавления ассетов, то перейдите к уроку Rocket Mouse. Там вы найдете подробные инструкции, часто в виде анимированных GIF изображений, которые не включены в эту статью.

Импорт изображений и шрифтов

Распакуйте архив с ассетами. В нем вы найдете две папки: Menu и Fonts . Выберите обе папки, а затем перетащите их в папку Assets в Браузере проекта. Подождите пока Unity обрабатывает файлы, после чего вы должны увидеть наши папки в Браузере проекта как показано на рисунке ниже:

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

Добавление первого элемента пользовательского интерфейса

Первый элемент, которым мы займемся — это фоновое изображение для сцены с меню. Выберите в верхнем меню Unity GameObejct/UI/Image чтобы добавить на сцену объект с именем Image. Вы должны увидеть его во вкладке Hierarchy (Иерархия), как дитя Canvas. Все элементы должны быть размещены на холсте. Если у вас его еще нет, Unity об этом позаботится. Чтобы гарантированно увидеть изображение на вкладке Scene (Сцена), выберите Image в Иерархии и задайте его Pos X и Pos Y равными нулю.

Примечание: Я уже слышу вопросы типа: “Что такое Pos X?”, “Что такое Rect Transform и где старый добрый компонент Transform?” В этом мануале вы найдете всю интересующую вас информацию. Чтобы вам легче было во всем разобраться, мы будем рассматривать каждый аспект в контексте других объектов, участвующих в сцене. Таким образом, вы сможете увидеть, как они ведут себя при разных настройках. Такие свойства как Width, Height или Pos X не требует каких-либо объяснений.

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

1. Image
2. Canvas
3. EventSystem

Image — неинтерактивный элемент управления, который отображает текстуру спрайта и позволяет настроить множество опций. Например, вы можете закрасить изображение или поместить на него материалы. Вы даже можете контролировать полноту его отображения. Например, применить к нему анимацию появления по часовой стрелке. Canvas — корневой объект для всех элементов вашего пользовательского интерфейса. Как уже было сказано раньше, он создается автоматически, когда вы добавляете первый элемент интерфейса. Холст обладает множеством свойств, определяющих отображение интерфейса, и вы будете исследовать некоторые из них во время этого урока. EventSystem отвечает за обработку ввода, рейкастинг и события в сцене Unity. Это нужно для работы интерфейса, поэтому этот элемент добавляется автоматически.

Настройки фонового изображения

Вернемся к Image. Первое, что мы сделаем — переименуем Image в img_background. Теперь откроем Menu в поисковой строке проекта и найдем изображение menu_background. Перетащим его в поле Source Image компонента Image в инспекторе img_background.

Теперь у вас есть фоновое изображение вместо белого изображения по умолчанию. Тем не менее, оно выглядит, мягко выражаясь, не айс, потому что изображение слишком мало, да и соотношение сторон является неправильным. Чтобы исправить, найти кнопку Set Native Size (Установить исходный размер) в Инспекторе и нажмите на нее, чтобы установить размер 1024 х 577.

Теперь изображение выглядит как настоящий фон.

Тем не менее, есть еще несколько проблем:

1. Фактический размер изображения 1136 x 640 , этого достаточно чтобы закрыть весь экран 4-дюймового iPhone, но не более.
2. Уменьшив окно в режиме Scene, вы увидите, что холст (белый прямоугольник) закрывает только часть изображения. Если вы переключитесь в режим Game, вы увидите только часть фонового изображения, как будто камера находится слишком близко к объекту, чтобы отобразить его полностью.

Примечание: оригинальная игра была разработана для айфонов с 3,5-х и 4-дюймовыми дисплеями. Вот почему графика игры поддерживает 1136 x 640 и 960 х 640 разрешения. Но вскоре вы увидите, как UI может адаптироваться к различным разрешениям экрана.

Первая проблема состоит в результатах импортирования настроек по умолчанию, и вы будете их править в следующем разделе. Вторую проблему мы решим с помощью Canvas Scaler.

Настройка импорта изображений

Для вашего проекта вам понадобятся изображения немного большего размера, при этом нужно будет сделать так, чтобы Unity их не уменьшала. Откройте папку Menu папка в Браузере проетка и выберите изображение menu_background . В Инспекторе, выберите Default tab , установите Max Size (Максимальный размер) равным 2048 и нажмите кнопку Apply (Применить).

Теперь выберите img_background в Иерархии, а затем нажмите кнопку Set Native Size снова. Ширина и высота должны измениться на правильные значения 1136 и 640, соответственно.

Видите? Это было действительно легко исправить. Идем дальше!

Использование Canvas Scaler

Настало время настроить способ отображения. Прежде всего следует сказать, что то, как отображается игра на данном этапе — вовсе не баг. С точки зрения Unity, вид в режиме Game настроен на параметры 550×310, поэтому вы видите только часть изображения, которая помещается в окно игры.

Если вы запустите игру на устройстве или просто растянете ваш вкладку Game до размеров фонового изображения, ты вы увидите его полностью.

Хотя настройки Unity применимы в большинстве случаев, иногда необходимо изменить дефолтное поведение. Например, когда у вас маленький монитор, который не соответствует разрешению целевого гаджета. Кроме того, многие игры поддерживают только одно разрешение.

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

К счастью, специальный компонент приходит на помощь. Этот компонент называется Canvas Scaler . В предыдущих версиях Unity он назывался, Reference Resolution и его нужно было добавлять к холсту вручную. С появлением Unity 4.6 этот компонент теперь прикреплен к каждому Canvas. Выберите Canvas в Иерархии и тогда в Инспекторе вы должны увидеть компонент Canvas Scalar .

Canvas Scalar имеет три режима работы:

Constant Pixel Size: все элементы пользовательского интерфейса сохраняют размер пикселя независимо от размера экрана. Это дефолтный режим.

Scale With Screen Size: Размеры и положение элементов пользовательского интерфейса определяются заданным разрешением. Если текущее разрешение выше, холст сохранит заданное разрешение, увеличив элементы в соответствии с новыми настройками.

Constant Physical Size: Позиции элементов пользовательских интерфейсов указаны в физических единицах, таких как миллиметры или точки. Для этого нужно знать точное число точек на дюйм экрана.

После добавления компонента, установите его Resolution (Разрешение) равным 1136 х 640. Кроме того, сдвиньте все Match Width или Match Height до упора вправо, или просто введите 1 в поле ввода.

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

Измените разрешение вкладки Game чтобы увидеть, как ваша игра будет выглядеть в другом разрешении, например, на 3-5 дюймовом iPhone. Чудесно. Как видите, по-прежнему выглядит хорошо!

Теперь переключитесь во вкладку Scene (Сцена) и вы увидите, что размер холста не меняется при изменении размера вкладки Сцена: боковые края экрана аккуратно обрезаются а центральная часть полностью видна. Это результат установки Настройте ширину и высоту в 1 (Настройте высоту). Это отлично соответствует разрешению ваших целевых гаджетов.

Постойте, но что насчет кнопок? Что происходит, когда они находятся очень близко к левому или правому краю экрана? Они не должны обрезаться или быть скрытыми. К счастью, Unity имеет функцию, которая поможет вам обойти эту ошибку новичка. Совсем скоро вы о ней узнаете.

Добавление изображения с заголовком

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

Откройте окно Scene и выберите GameObject\UI\Image в меню. Это позволит добавить еще одно белое изображение на сцену. Вот как это вышло у меня:

Примечание: Если изображение окажется слишком далеко, просто установите значение 0 для свойств Pos X и Pos Y.

Теперь попробуйте превратить этот белый прямоугольник в реальное изображение выполнив следующие действия:

1. Выберите Image в Иерархии и переменуйте его в img_header .
2. Откройте папку Menu в Браузере проекта и найдите картинку header_label.
3. Перетащите изображения в поле Source Image инспектора.
4. Нажмите на Set Native Size в Инспекторе.

Как видите, это было достаточно просто. Теперь нужно работать с позиционированием с помощью компонента Rect Transform.

Rect Transform, Anchors, Pivot и Вы)

Если вы работали с Unity раньше, то вы, наверняка, знакомы с компонентом Transform . Если нет, то ничего страшного. Это просто инструмент, с помощью которого можно расположить, вращать и масштабировать объекты на сцене. Вот как это выглядит:

Вы увидите Transform-компонент, когда выберите любой тип GameObject в Иерархии.

Тем не менее, если вы выберите какой-либо элемент пользовательского интерфейса, например, img_header , вы увидите другой компонент с именем Rect Transform.

Как видите, Transform и Rect Transform немного отличаются, но Rect Transform может изменить внешний вид вашей игры в зависимости от настроек якоря. Например, это может выглядеть следующим образом:

Примечание: Вместо Pos X , Pos Y , Width и Height вы работаете с Left , Top , Right и Bottom .

Вы задаетесь вопросом о настройке якорей, которые меняет внешний вид Rect Transform так кардинально? Вы найдете ответы, которые вы ищете в следующем разделе.

Якоря

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

Настраивая якоря, вы определяете несколько положений в родителе, как правило, по одному в каждом углу элемента интерфейса под названием Rect. При изменении размера родителя наш элемент будет стараться сохранить uniform distance to the anchor points, заставляя его перемещаться или изменять размер вслед за родителем.

Чтобы посмотреть на разные Anchor Presets, просто выберите img_headerв иерархии и кликните на прямоугольник прямо над полем Anchors в компоненте Rect Transform.

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

Если вы посмотрите на следующее изображение, в котором отключен фон, вы увидите, что размер холста изменяется немного лучше.

Как вы видите, настройки якорей влияют на то, как элементы вашего интерфейса адаптируются к разному разрешению экрана.

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

Манипулятор якорей

На данном этапе наши якоря используют 4 треугольника. Вот как это выглядит при настройке top-center:

Настраиваемые якоря

Вы можете вручную передвинуть якоря в произвольное положение, т.к. Anchor Presets можно менять любым удобным вам образом.

Примечание: Бывает так, что другой элемент интерфейса перекрывает иконку якоря, и вы не можете его выбрать. В таком случае просто вызовите иконку якоря, щелкнув на Anchor Preset (например, левая часть экрана). Иконка якоря появится в указанной части экрана, после чего вы сможете перемещать ее как угодно.

Примечание: Как видите, изменение размера холста заставляет изображение передвигаться вправо. Но это перемещение незначительно по отношению к правому краю холста. Это объясняется тем, что якоря установлены на 25% ширины холста.

Разделение якорей

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

Примечание: Захватив один из краев холста и перемещая его по экрану, вы не добьетесь изменения его размера. Найдите слово Preview возле курсора, используйте его, что уменьшить или увеличить холст, и посмотрите, как элементы вашего интерфейса будут адаптироваться к разным разрешениям экрана.

Rect Transform зависит от текущих настроек якоря

В зависимости от настроек якоря, Rect Transform контролирует размер и положение элементов интерфейса разными способами.

Ели вы поставите якорь на какую-то точку, без растягивания, вы увидите такие свойства, как Pos X, Pos Y, Width иHeight.

Но если вы настроите якорь так, что это приведет к растягиванию элемента, вместо Pos X и Width у вас будут свойства Left иRight (при горизонтальном растяжении), а вместо Pos Y and Height — Top и Bottom (при горизонтальном растяжении).

На этом скриншоте якорь img_header стоит на middle-stretch. Это значит, что изображение остается в центре холста вертикально и растягивается горизонтально.

Поскольку позиция по оси X и ширина зависят от размера родителя, установите отступы от левого и правого краев родителей.

Точка опоры

Осталось последнее не рассмотренное свойство компонента Rect Transform — Pivot (Точка опоры). Точка опоры является точкой, вокруг которой производятся все преобразования. Другими словами, определяя положение элемента, вы определяете его точку опоры. Если вы станете вращать элемент пользовательского интерфейса, то он будет вращаться вокруг этой точки.

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

Примечание: Вы также можете установить точку опоры за пределами элемента интерфейса. В этом случае она будет за пределами значений (0,0) – (1,1). Это может вам пригодиться. Например, вам нужно, чтобы объект вращался вокруг определенной точки в сцене. Чтобы изменить точку опоры, вы должны убедиться, что кнопка Pivot/Center стоит на Pivot таким образом:

Вы можете изменить Точку опоры в компоненте Rect Transform в Инспекторе или вы можете использовать Rect Tool.

Взгляните на следующие два изображения, на которых показаны элементы пользовательского интерфейса с одинаковыми значениями Pos X и Pos Y, но при этом у них различное положение на сцене.

На первом изображении Точка опоры установлена в дефолтное значение (0.5, 0.5), которое является центром элемента пользовательского интерфейса. Установите позицию элемента в положение (0, 0), а якоря — top-left .

Примечание: Важно понимать, что позиция элемента пользовательского интерфейса задается относительно якоря. Вот почему положение (0,0) означает расстояние от якоря, который устанавливаются в левом верхнем углу холста.

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

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

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

Примечание: Удерживайте кнопку ALT при масштабировании вокруг точки опоры.

Как видите, Точка опоры также влияет на изменение вашего элемента пользовательского интерфейса.

Примечание: Еще одна важная вещь, которую вам следует уяснить — это то, что изменение размера элемента интерфейса, не влияет на его масштабирование. Но вы можете изменить его параметры — Width и Height или Top, Right, Left, Bottom.Эти свойства немного отличаются. Например, размер не может быть отрицательным, но масштаб может; с помощью отрицательных значений вы можете перевернуть элемент. В большинстве случаев вам достаточно только изменить размер ваших элементов пользовательского интерфейса.

Размещение изображения с заголовом

Уф! Теперь вы знаете все, что нужно, о Rect Transform, Anchors и Pivot. Поверьте, когда-нибудь вы скажете мне спасибо за то, что корпели над этим упражнением, ведь от того, насколько хорошо вы усвоили эти понятия, зависит интерфейс вашей игры. Теперь мы можем сконцентрироваться на создании сцены меню. Остальные разделы пролетят в мгновение ока. Все эти манипуляции окончательно измотали бедный маленький img_header. Пора поместить его на законное место и оставить в покое.

Прежде чем продолжить, повторно включите img_background (если оно было отключено) чтобы увидеть границы холста. Затем выберите img_header в Иерархии и установить его свойства в Инспекторе следующим образом:

1. Нажмите на Set Native Size чтобы сбросить размер, так как вы, наверняка, изменили его играя с Точкой опоры.
2. Установите Якоря в top-center .
3. Установите Pos X в 0 и Pos Y в -100 .

Вы должны увидеть на Вашей вкладке Сцена что-то вроде этого:

Отлично. Теперь оставьте заголовок в покое).

Добавление кнопки Старт

Теперь, когда ваше приложение имеет приятный фон с заголовком, пришло время добавить несколько кнопок. Выберите GameObject\UI\Button в меню. Это позволит добавить объект Button в сцену, при этом вы должны увидеть его в Иерархии. Если развернуть его в Иерархии, вы увидите, что кнопка содержит текстовую метку — об этом вы узнаете чуть позже.

Взгляните на кнопку в инспекторе, и вы увидите знакомый компонент Image (Script). Помните, мы использовали его для добавления фона и метки хедера? Кроме того, существует компонент кнопки (Script). Другими словами, кнопка только изображение с прикрепленным скриптом, который содержит текст кнопки.

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

Позиционирование кнопки

Теперь займемся позиционированием и изменением размера кнопки. Выполните следующие действия:

1. Выберите Button в Иерархии и переменуйте ее в btn_start.
2. Установите Якоря Anchors в bottom-stretch , так как нам нужно чтобы кнопка растягивалась по горизонтали в случае изменения размера экрана.
3. Установите значения Left и Right равными 400.
4. Установите Height равным 80 .
5. Установите Pos Y равным 300 .

Теперь выберите вложеннsq текстовый элемент и введите текст Start Game (Начать игру). Измените Font Size (размер шрифта) на 32 чтобы сделать текст кнопки больше.

Это то, что вы должны увидеть в окне Scene (Сцена):

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

9-фрагментное масштабирование

Изображение для Button устанавливается так же, как изображение для Image. В конце концов, это практически один и тот же компонент. Но в отличие от изображений, которые редко масштабируются, кнопки часто бывают самых разных размеров. Конечно, можно создать фоновое изображение для каждого размера кнопки, но зачем же тратить драгоценное место? Вместо этого мы воспользуемся техникой, называемой 9-фрагментным масштабированием, которая позволяет обойтись одним маленьким изображением, которое масштабируется в соответствии с необходимым размером. Нет, это не магия. Вам не придется бросать свои изображения в волшебный фонтан прежде, чем вы сможете их использовать :] Этот метод делает это возможным, потому, что изображение не масштабируется равномерно. Есть девять зон, каждая из которых масштабируется по-разному.

Это гарантирует, что изображение будет выглядеть хорошо в любом масштабе.

Подготовка изображения для кнопок

Прежде чем вы сможете использовать нарезанное изображение, необходимо установить эти 9 зон. Чтобы сделать это, откройте папку Menu Браузере проекта и выберите btn_9slice_normal image . В Инспектора Import Settings (Настройки импорта), устанавливается Format в Truecolor , а затем нажмите на кнопку Sprite Editor (Редактор спрайта), чтобы открыть вкладку Sprite Editor .

Примечание: Установка формата на Truecolor не обязательна и не относится к масштабированию изображений. Но в моей практике были случаи нежелательного сжатия изображений, поэтому я пришел к выводу, что лучше этим не пренебрегать. Если вы используете собственные изображения и они выглядят нормально в сжатом формате, вам можно с этим не возиться.

В Sprite Editor установите значение Border равнмы L:14 , R:14 , B:16 , T:16 , а затем нажмите на Apply !

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

Настройка изображений кнопок

Подготовив все изображения, вы должны будете всего лишь перетащить их в соответствующие поля Инспектора. Выберите btn_start в иерархии и выполните следующие действия:

1. Замените Image Type на Sliced в компоненте Image.
2. Замените свойство Transition в компоненте Button на SpriteSwap.
3. Перетащите btn_9slice_normal в Source Image в компоненте Image.
4. Перетащите btn_9slice_highlighted в Highlighted Sprite в компоненте Button.
5. Перетащите btn_9slice_pressed в Pressed Sprite в компоненте Button.

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

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

Задание пользовательских шрифтов для кнопки

Использовать пользовательские шрифты легко. Помните папку Fonts, которыу вы добавили к проекту? Теперь пришло время воспользоваться ей и использовать один из этих шрифтов. Выберите метку Text , встроенную в in the btn_start,в иерархии. Затем откройте папку Fonts в Браузере проектов и перетащите шрифт TitanOne-Regular в поле Font . Также установите Color в white (белый).

Теперь запустите сцену и наслаждайтесь новой мега-кнопкой.

Удаление прозрачности кнопки

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

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

Нам потребуется всего несколько секунд чтобы отменить прозрачность. Выберите btn_start в Иерархии и дважды щелкните на свойство Color внутри компонента Image . В открывшемся диалоговом наборе выбора цвета установите A (альфа) равной 255 и закройте палитру цветов.

Теперь он выглядит намного лучше!

Добавление кнопки Settings (Настройка)

Есть только несколько вещей, которые осталось сделать прежде чем перейти к следующей части и одна из них добавить кнопку Settings (Настройка). Вы, наверное, уже можете сделать это сами, зная размер и положение кнопки.

Примечание: Самый простой способ — это дублировать кнопки, а потом подправить нужные свойства, но попробуйте создать кнопку с нуля, ведь Вы здесь, чтобы учиться.

Итак, вот свойства кнопки Settings:

• Name: btn_settings
• Rect Transform: Left и Right равны 450, Height — 70, а Pos Y — 180
• Text: Settings

Если у вас совсем ничего не получается, выполните следующие действия:

1. Выберите в меню GameObject\UI\Button . Это создаст объект Button на сцене.
2. Выберите Button в Иерархии и переименуйте в btn_settings
3. Установите Anchors кнопки в bottom-stretch .
4. Установите значение Left и Right в Rect Transform на 450 .
5. Установите Height to 70 and Pos Y to 180 .
6. Установите Transition (прозрачность) в компоненте Button равной SpriteSwap .
7. Убедитесь в том, чтобы установить Image Type в компоненте Image равным Sliced .
8. Откройте папку Menu в Браузере проекта и перетащите btn_9slice_normal на Source Image .
9. Перетащите btn_9slice_highlighted на Highlighted Sprite .
10. И наконец, перетащите btn_9slice_pressed на Pressed Sprite .
11. Дважды щелкните на Color внутри компонента Image и установите A равным 255 чтобы удалить прозрачность.
12. 
13. Select nested Text label.
14. Измените Text на Settings .
15. Установите размер шрифта Font Size равным 24
16. Измените цвет Color на White (белый).
17. Откройте папку Fonts в Браузере проектов и перетащите шрифт TitanOne-Regular в поле Font в Инспекторе.

Это то, что вы должны увидеть во вкладке Scene (Сцена) после добавления кнопки Settings (Настройки):

Теперь нам осталось только нажать кнопку Start Game и запустить вторую сцену (это сама игра).

Добавляем сцены в режим Build

Прежде, чем вы сможете запустить свои сцены, вам нужно будет добавить их в список Scenes in Build в настройках проекта, чтобы они были включены в конечную версию. Для этого выберите File\Build Settings… чтобы открыть диалоговое окно Build Settings . Затем откройте папку Scenes в Браузере проекта и перетащите сперва MenuScene , а затем сцену RocketMouse в список Scenes in Build .

Потом закройте окно Build Settings.

Создание UIManager

Когда вы добавляете обработчик событий для кнопки, необходимо указать метод, который будет вызываться при нажатии на кнопку. Это означает, что вы должны прикрепить объект к скрипту так как вы не можете использовать статические методы. Создайте пустой игровой объект и прикрепите скрипт к нему. Этот скрипт будет содержать все методы вызываемыми UI элементами в MenuScene. Выберите GameObject\Create Empty в меню. Затем выберите GameObject в Иерархии и переименуйте в UIManager . После этого нажмите на Add Component в Инспекторе и выберите New Script . Назовите его UIManagerScript . Убедитесь, что установлен язык CSharp и нажмите на Create and Add (Создаать и добавить). Это то, что вы должны увидеть в Иерархии и Инспекторе:

Сделайте двойной клик на UIManagerScript в инспекторе, чтобы открыть скрипт в MonoDevelop. После того, как сценарий загрузится, удалите методы Start и Update и добавьте метод StartGame следующим образом:

Сохраните файл и убедитесь, что он не содержит ошибок, создав его в MonoDevelop. Для этого выберите Build\Build All в меню MonoDevelop.

Вызов метода StartGame , когда игрок нажимает на кнопку

Вернитесь к Unity и выполните следующие действия:

1. Выберите btn_start в Иерархии и и прокрутите мышью по вкладке Инспекторе до списка On Click (Button) .
2. Нажмите кнопку + чтобы добавить новый элемент.
3. Затем перетащите UIManager из Иерархии на добавленный элемент в списке.
4. Нажмите на выпадающий список выберите функцию. Прямо сейчас в нем установлено No Function .
5. В открывшемся меню выберите UIManagerScript\StartGame () .

Запустите сцену и нажмите на кнопку Start Game чтобы запустить сцену с игрой.

Что дальше?

Итак, Вы создали пользовательский интерфейс, добавили изображения кнопок и даже написал код, который запускает игру, когда вы нажимаете на кнопку! Так устроен интерфейс многих игр . Вы также узнали, что такое a lot Rect Transform, Anchors, Pivot и другие полезные штуки. Теперь, когда вы знаете, как они работают, вы сможете значительно ускорить работу над своим проектов, используя эти элементы. Вы можете загрузить готовый проект здесь. В следующей части нашего урока вы узнаете как оживить элементы пользовательского интерфейса, создавать диалоги, использовать элементы управления такие как слайдер и переключатели, а в конце урока вы будете иметь сцену с рабочим меню! Отдохните и принимайтесь за Учебник по новому GUI в Unity. Часть 2!