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

Учебник по новому GUI в Unity. Часть 1. http://websketches.
ru/blog/uhebnik-po-novomu-gui-v-unity-1
()
РЕСУРС РАБОТАЕТ С МАЯ 2009 ГОДА Контакты (/contacts)
()
(/)
()
(/html)
(/css)
(/less)
()
()
()
()
Опубликовано: 28 мая 2015 г.
(/assets/files
/blog/uhebnik_po_novomu_gui_v_unity
Unity
1 of 40 7/25/2016 6:51 PM
Учебник по новому GUI в Unity. Часть 1. http://websketches.ru/blog/uhebnik-po-novomu-gui-v-unity-1
2D игра на Unity.
/RocketMouse_Final.zip)
Подробное руководство.
Часть 1
(/blog/2d-igra-na-unity-
podrobnoye-
rukovodstvo-p1)
Слайдер
Адаптивный слайдер без
Javascript на CSS3
(/blog
/adaptive_slider_for_css3)
Unity
Работа с Unity в 2D
(/blog/rabota-s-unity-2d)
Старая система GUI была очень мудреной системой, которая тре- Unity
бовала чтобы весь код GUI был написан с помощью специальной 2D игра на Unity.
функции OnGUI . Это был программеро-ориентированный, подход
Часть 3
в отличие от визуального ориентированной природы самой Unity.
Сам код работал медленно и неэффективно, а на то, чтобы сваять
podrobnoye-
интерфейс, приходилось тратить много времени и сил. Конечно,
rukovodstvo-p3)
были инструменты сторонних разработчиков, такие как NGUI, кото-
рые пытались решить эту проблему, но за то, чтобы начать пользо-
ваться ими нужно было расстаться с n-й суммой денег.
К счастью, разработчики в Unity Technologies прислушались к на-

родным мольбам и, после двух лет разработки, они предоставили в
Unity 4.6 совершенно новый GUI, который мы и рассмотрим в этом Unity
уроке. На протяжении трех занятий мы будем создавать новый гра-
фический интерфейс к игре, созданной в наших предыдущих сери- Часть 4
ях уроков Ваяем игру в стиле Jetpack Joyride в Unity 2D (/blog/igra- (/blog/2d-igra-na-unity-
kak-jetpack-joyride-unity2d-1). podrobnoye-
rukovodstvo-p4)
Замечание: Если вы и в глаза не видели уроки по рас-
2 of 40 7/25/2016 6:51 PM
сматриваемой нами в качестве примера игре, то ничего

страшного в этом нет, тем не менее мы настоятельно ре-
комендуем вам изучить их. В этом случае вы будете
иметь на руках функциональную игру, а не просто проект
из сцены с простым меню. Вы также узнаете как можно Unity
перейти от старой системы GUI к новой, а это поистине 2D игра на Unity.
бесценный опыт. Подробное руководство.
Часть 5
podrobnoye-
По мере прохождения этого гайда мы добавим в игру классическую rukovodstvo-p5)
сцену главного меню.
Unity
Часть 6
podrobnoye-
rukovodstvo-p6)
Однако, просто добавление нескольких кнопок будет не достаточ-

ным чтобы освоить новую систему с графическим интерфейсом. Unity
Чтобы добавить изюминку к игре и привлечь ваших пользователей Учебник по новому GUI в
вы будете Unity. Часть 2.
(/blog/uhebnik-
Анимировать кнопки po-novomu-gui-v-unity-2)
Создать выезжающее окно настроек.
Использовать более новые элементы управления GUI, такие

как Text, Slider, Panel, Mask и т.д.
Если вам не терпится, скачайте (/assets/files Unity

/blog/uhebnik_po_novomu_gui_v_unity Учебник по новому GUI в
/RocketMouse_PartOne_Final.zip) и вы сразу увидите что мы изучим Unity. Часть 1.
на этом уроке) (/blog/uhebnik-

po-novomu-gui-v-unity-1)
Для начала, вам понадобится несколько изображений для фона,

кнопок и других элементов пользовательского интерфейса, а также
3 of 40 7/25/2016 6:51 PM
шрифты для надписей и текста на кнопках. Хорошая новость состо-

ит в том, что вам не придется рыскать в Интернете для поиска нуж-
ных ассетов, потому что я подготовил специальный пакет, который
имеет все необходимое. Вы можете скачать этот пакет отсюда:
RocketMouse_GUI_Assets (/assets/files
/blog/uhebnik_po_novomu_gui_v_unity/RocketMouse_GUI_Assets.zip).
Он содержит фоновые изображения, кнопки, значки и др.
Как уже упоминалось, вам придется добавить новую сцену к проек-

ту Rocket Mouse созданному в предыдущих уроках, так что начнем,
загрузив окончательный вариант этого проекта: RocketMouse_Final
(/assets/files/blog/uhebnik_po_novomu_gui_v_unity
/RocketMouse_Final.zip).
Скачайте по указанной выше ссылке проект Rocket Mouse и разар-

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

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

File\New Scene. Лучше сохранить сцену прямо сразу, поэтому от-
кройте диалоговое окно Save Scene (Сохранить сцену), выбрав в
меню File\Save Scene. Затем введите MenuScene в качестве име-
ни сцены и сохранить его в папке Scenes рядом со сценой
RocketMouse.
4 of 40 7/25/2016 6:51 PM
Посмотрите на Браузер проекта (Project browser) чтобы убедиться,

что в одной папке лежат две сцены.
Примечание: Если у вас возникнут вопросы при откры-

тии проекта, создании, сохранении сцены, или добавле-
ния ассетов, то перейдите к уроку Rocket Mouse
(/?p=69392). Там вы найдете подробные инструкции, ча-
сто в виде анимированных GIF изображений, которые не
включены в эту статью.
Распакуйте архив с ассетами. В нем вы найдете две папки: Menu и

Fonts . Выберите обе папки, а затем перетащите их в папку
Assets в Браузере проекта. Подождите пока Unity обрабатывает
файлы, после чего вы должны увидеть наши папки в Браузере про-
екта как показано на рисунке ниже:
5 of 40 7/25/2016 6:51 PM
Поздравляю, Вы только что завершили подготовительныеработы и

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

для сцены с меню. Выберите в верхнем меню Unity
GameObejct/UI/Image чтобы добавить на сцену объект с именем
Image. Вы должны увидеть его во вкладке Hierarchy (Иерархия),
как дитя Canvas. Все элементы должны быть размещены на холсте.
Если у вас его еще нет, Unity об этом позаботится. Чтобы гаранти-
рованно увидеть изображение на вкладке Scene (Сцена), выберите
Image в Иерархии и задайте его Pos X и Pos Y равными нулю.
6 of 40 7/25/2016 6:51 PM
Примечание: Я уже слышу вопросы типа: “Что такое

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

перь посмотрите внимательно на вкладку Иерархия и вы увидите
три новых объекта в сцене. Вот они:
1. Image
2. Canvas
3. EventSystem
Image - неинтерактивный элемент управления, который отобража-

ет текстуру спрайта и позволяет настроить множество опций. На-
пример, вы можете закрасить изображение или поместить на него
материалы. Вы даже можете контролировать полноту его отображе-
ния. Например, применить к нему анимацию появления по часовой
стрелке. Canvas - корневой объект для всех элементов вашего
пользовательского интерфейса. Как уже было сказано раньше, он
создается автоматически, когда вы добавляете первый элемент ин-
терфейса. Холст обладает множеством свойств, определяющих
отображение интерфейса, и вы будете исследовать некоторые из
них во время этого урока. EventSystem отвечает за обработку вво-
да, рейкастинг и события в сцене Unity. Это нужно для работы ин-
7 of 40 7/25/2016 6:51 PM
терфейса, поэтому этот элемент добавляется автоматически.
Вернемся к Image. Первое, что мы сделаем - переименуем Image в

img_background. Теперь откроем Menu в поисковой строке проекта
и найдем изображение menu_background. Перетащим его в поле
Source Image компонента Image в инспекторе img_background.
Теперь у вас есть фоновое изображение вместо белого изображе-

ния по умолчанию. Тем не менее, оно выглядит, мягко выражаясь,
не айс, потому что изображение слишком мало, да и соотношение
сторон является неправильным. Чтобы исправить, найти кнопку
Set Native Size (Установить исходный размер) в Инспекторе и
нажмите на нее, чтобы установить размер 1024 х 577.
8 of 40 7/25/2016 6:51 PM
Теперь изображение выглядит как настоящий фон.
Тем не менее, есть еще несколько проблем:
1. Фактический размер изображения 1136 x 640 , этого доста-

точно чтобы закрыть весь экран 4-дюймового iPhone, но не
более.
2. Уменьшив окно в режиме Scene, вы увидите, что холст (бе-

лый прямоугольник) закрывает только часть изображения. Ес-
ли вы переключитесь в режим Game, вы увидите только
часть фонового изображения, как будто камера находится
слишком близко к объекту, чтобы отобразить его полностью.
9 of 40 7/25/2016 6:51 PM
Примечание: оригинальная игра была разработана для

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

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

шего размера, при этом нужно будет сделать так, чтобы Unity их не
уменьшала. Откройте папку Menu папка в Браузере проетка и вы-
берите изображение menu_background . В Инспекторе, выберите
Default tab , установите Max Size (Максимальный размер)
равным 2048 и нажмите кнопку Apply (Применить).
10 of 40 7/25/2016 6:51 PM
Теперь выберите img_background в Иерархии, а затем нажмите

кнопку Set Native Size снова. Ширина и высота должны изме-
ниться на правильные значения 1136 и 640, соответственно.
Видите? Это было действительно легко исправить. Идем дальше!
Настало время настроить способ отображения. Прежде всего сле-

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

вкладку Game до размеров фонового изображения, ты вы увидите
его полностью.
11 of 40 7/25/2016 6:51 PM
Хотя настройки 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
в поле ввода.
12 of 40 7/25/2016 6:51 PM
После того, как эти изменения вступят в силу, вы увидите фоновое

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

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

что размер холста не меняется при изменении размера вкладки
Сцена: боковые края экрана аккуратно обрезаются а центральная
часть полностью видна. Это результат установки Настройте ши-
рину и высоту в 1 (Настройте высоту)... Это отлично соответ-
ствует разрешению ваших целевых гаджетов.
Постойте, но что насчет кнопок? Что происходит, когда они находят-
13 of 40 7/25/2016 6:51 PM
ся очень близко к левому или правому краю экрана? Они не долж-

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

бавлять еще один образ - образ заголовка. Для выполнения этого
упражнения, вы будете использовать не полноэкранное изображе-
ние, чтобы продемонстрировать некоторые другие важные понятия
новой системы GUI.
Откройте окно Scene и выберите GameObject\UI\Image в меню.

Это позволит добавить еще одно белое изображение на сцену. Вот
как это вышло у меня:
Примечание: Если изображение окажется слишком да-

леко, просто установите значение 0 для свойств Pos X и
Pos Y.
Теперь попробуйте превратить этот белый прямоугольник в реаль-

ное изображение выполнив следующие действия:
1. Выберите Image в Иерархии и переменуйте его в

img_header .
2. Откройте папку Menu в Браузере проекта и найдите картинку

header_label.
3. Перетащите изображения в поле Source Image инспектора.
14 of 40 7/25/2016 6:51 PM
4. Нажмите на Set Native Size в Инспекторе.
Как видите, это было достаточно просто. Теперь нужно работать с

позиционированием с помощью компонента Rect Transform.
Если вы работали с Unity раньше, то вы, наверняка, знакомы с ком-

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

GameObject в Иерархии.
Тем не менее, если вы выберите какой-либо элемент пользователь-

ского интерфейса, например, img_header , вы увидите другой
компонент с именем Rect Transform.
15 of 40 7/25/2016 6:51 PM
Как видите, Transform и Rect Transform немного отличаются,

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

Height вы работаете с Left , Top , Right и
Bottom .
Вы задаетесь вопросом о настройке якорей, которые меняет внеш-

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

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

ле, как правило, по одному в каждом углу элемента интерфейса
под названием Rect. При изменении размера родителя наш эле-
16 of 40 7/25/2016 6:51 PM
мент будет стараться сохранить uniform distance to the anchor

points, заставляя его перемещаться или изменять размер вслед за
родителем.
Чтобы посмотреть на разные Anchor Presets, просто выберите

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

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

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

го интерфейса адаптируются к разному разрешению экрана.
17 of 40 7/25/2016 6:51 PM
Вы наверняка хотите покопаться и в других настройках, чтобы по-

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

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

т.к. Anchor Presets можно менять любым удобным вам образом.
Примечание: Бывает так, что другой элемент интерфей-

са перекрывает иконку якоря, и вы не можете его вы-
брать. В таком случае просто вызовите иконку якоря,
щелкнув на Anchor Preset (например, левая часть экра-
18 of 40 7/25/2016 6:51 PM
на). Иконка якоря появится в указанной части экрана, по-

сле чего вы сможете перемещать ее как угодно.
Примечание: Как видите, изменение размера холста за-

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

вался горизонтально, вертикально или в обоих направлениях.
19 of 40 7/25/2016 6:51 PM
Примечание: Захватив один из краев холста и переме-

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

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

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

элемента, вместо Pos X и Width у вас будут свойства Left иRight
(при горизонтальном растяжении), а вместо Pos Y and Height - Top
и Bottom (при горизонтальном растяжении).
На этом скриншоте якорь img_header стоит на middle-stretch. Это

значит, что изображение остается в центре холста вертикально и
растягивается горизонтально.
20 of 40 7/25/2016 6:51 PM
Поскольку позиция по оси 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 .
21 of 40 7/25/2016 6:51 PM
Примечание: Важно понимать, что позиция элемента

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

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

помощью статичного изображения, поэтому вот несколько анима-
ций:
22 of 40 7/25/2016 6:51 PM
Пожалуйста, обратите внимание как изображение поворачивается

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

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

мента пользовательского интерфейса.
Примечание: Еще одна важная вещь, которую вам сле-

дует уяснить - это то, что изменение размера элемента
интерфейса, не влияет на его масштабирование. Но вы
можете изменить его параметры - Width и Height или Top,
Right, Left, Bottom.Эти свойства немного отличаются. На-
пример, размер не может быть отрицательным, но мас-
штаб может; с помощью отрицательных значений вы мо-
жете перевернуть элемент. В большинстве случаев вам
достаточно только изменить размер ваших элементов
пользовательского интерфейса.
Уф! Теперь вы знаете все, что нужно, о Rect Transform, Anchors и

Pivot. Поверьте, когда-нибудь вы скажете мне спасибо за то, что
23 of 40 7/25/2016 6:51 PM
корпели над этим упражнением, ведь от того, насколько хорошо вы

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

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

как вы, наверняка, изменили его играя с Точкой опоры.
2. Установите Якоря в top-center .
3. Установите Pos X в 0 и Pos Y в -100 .
24 of 40 7/25/2016 6:51 PM
Вы должны увидеть на Вашей вкладке Сцена что-то вроде этого:
Отлично. Теперь оставьте заголовок в покое).
Теперь, когда ваше приложение имеет приятный фон с заголовком,

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

нент Image (Script). Помните, мы использовали его для добавления
фона и метки хедера? Кроме того, существует компонент кнопки
(Script). Другими словами, кнопка только изображение с прикреп-
25 of 40 7/25/2016 6:51 PM
ленным скриптом, который содержит текст кнопки.
Примечание: Текст надписи не является обязательным,

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

ки. Выполните следующие действия:
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 чтобы сделать текст кнопки больше.
26 of 40 7/25/2016 6:51 PM
Это то, что вы должны увидеть в окне Scene (Сцена):
Теперь у нас есть кнопка, и все, что нам осталось - немного покол-
довать над ее внешним видом. Для этого мы установим для нее
фоновое изображение и используем красивый шрифт.
27 of 40 7/25/2016 6:51 PM
Изображение для Button устанавливается так же, как изображение

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

масштабе.
Прежде чем вы сможете использовать нарезанное изображение,

необходимо установить эти 9 зон. Чтобы сделать это, откройте пап-
28 of 40 7/25/2016 6:51 PM
ку 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 !
29 of 40 7/25/2016 6:51 PM
Повторите действие для изображений 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.
30 of 40 7/25/2016 6:51 PM
Примечание: Если вы наткнетесь на ошибку: Отсут-

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

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

Fonts, которыу вы добавили к проекту? Теперь пришло время вос-
пользоваться ей и использовать один из этих шрифтов. Выберите
метку Text , встроенную в in the btn_start,в иерархии. Затем от-
кройте папку Fonts в Браузере проектов и перетащите шрифт
TitanOne-Regular в поле Font . Также установите Color в
white (белый).
31 of 40 7/25/2016 6:51 PM
Теперь запустите сцену и наслаждайтесь новой мега-кнопкой.
Вы заметили, что мы можем видеть фон через кнопку? В зависимо-

сти от ваших целей это может быть хорошо или плохо. Для главно-
го меню в этой игре будет лучше, если мы избавимся от прозрачно-
сти.
32 of 40 7/25/2016 6:51 PM
Примечание:Мне кажется, прозрачность добавляется

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

ность. Выберите btn_start в Иерархии и дважды щелкните на
свойство Color внутри компонента Image . В открывшемся диа-
логовом наборе выбора цвета установите A (альфа) равной 255
и закройте палитру цветов.
Теперь он выглядит намного лучше!
33 of 40 7/25/2016 6:51 PM
Есть только несколько вещей, которые осталось сделать прежде

чем перейти к следующей части и одна из них добавить кнопку
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 .
34 of 40 7/25/2016 6:51 PM
9. Перетащите btn_9slice_highlighted на Highlighted

Sprite .
10. И наконец, перетащите btn_9slice_pressed на Pressed

Sprite .
11. Дважды щелкните на Color внутри компонента Image и

установите A равным 255 чтобы удалить прозрачность.
13. Select nested Text label.
14. Измените Text на Settings .
15. Установите размер шрифта Font Size равным 24
16. Измените цвет Color на White (белый).
17. Откройте папку Fonts в Браузере проектов и перетащите

шрифт TitanOne-Regular в поле Font в Инспекторе.
35 of 40 7/25/2016 6:51 PM
Это то, что вы должны увидеть во вкладке Scene (Сцена) после

добавления кнопки Settings (Настройки):
Теперь нам осталось только нажать кнопку Start Game и запустить

вторую сцену (это сама игра).
36 of 40 7/25/2016 6:51 PM
Прежде, чем вы сможете запустить свои сцены, вам нужно будет

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

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

открыть скрипт в MonoDevelop. После того, как сценарий загрузит-
ся, удалите методы Start и Update и добавьте метод
StartGame следующим образом:
public void StartGame() {

Application.LoadLevel("RocketMouse");
}
Сохраните файл и убедитесь, что он не содержит ошибок, создав

его в MonoDevelop. Для этого выберите Build\Build All в ме-
ню MonoDevelop.
StartGame
Вернитесь к Unity и выполните следующие действия:
1. Выберите btn_start в Иерархии и и прокрутите мышью по

вкладке Инспекторе до списка On Click (Button) .
2. Нажмите кнопку + чтобы добавить новый элемент.
3. Затем перетащите UIManager из Иерархии на добавленный

элемент в списке.
4. Нажмите на выпадающий список выберите функцию. Прямо

сейчас в нем установлено No Function .
5. В открывшемся меню выберите

UIManagerScript\StartGame () .
38 of 40 7/25/2016 6:51 PM
Запустите сцену и нажмите на кнопку Start Game чтобы запустить

сцену с игрой.
Итак, Вы создали пользовательский интерфейс, добавили изобра-

жения кнопок и даже написал код, который запускает игру, когда вы
нажимаете на кнопку! Так устроен интерфейс многих игр . Вы также
узнали, что такое a lot Rect Transform, Anchors, Pivot и другие полез-
ные штуки. Теперь, когда вы знаете, как они работают, вы сможете
значительно ускорить работу над своим проектов, используя эти
элементы. Вы можете загрузить готовый проект здесь (/assets/files
/blog/uhebnik_po_novomu_gui_v_unity/RocketMouse_Final.zip). В сле-
дующей части нашего урока вы узнаете как оживить элементы
пользовательского интерфейса, создавать диалоги, использовать
элементы управления такие как слайдер и переключатели, а в кон-
39 of 40 7/25/2016 6:51 PM
це урока вы будете иметь сцену с рабочим меню! Отдохните и при-

нимайтесь за Учебник по новому GUI в Unity. Часть 2 (/blog/uhebnik-
po-novomu-gui-v-unity-2)!
webSketches 2016 © Copyright

контакты (/contacts)
40 of 40 7/25/2016 6:51 PM

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

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

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

Загружено:

Авторское право:

Доступные форматы

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

Опубликовано: 28 мая 2015 г.

К счастью, разработчики в Unity Technologies прислушались к на-

сматриваемой нами в качестве примера игре, то ничего

Однако, просто добавление нескольких кнопок будет не достаточ-

Создать выезжающее окно настроек.

Использовать более новые элементы управления GUI, такие

Если вам не терпится, скачайте (/assets/files Unity

на этом уроке) (/blog/uhebnik-

Для начала, вам понадобится несколько изображений для фона,

шрифты для надписей и текста на кнопках. Хорошая новость состо-

Как уже упоминалось, вам придется добавить новую сцену к проек-

Скачайте по указанной выше ссылке проект Rocket Mouse и разар-

После того как проект загружен, вы увидите до слез знакомый сю-

Создадим новую пустую сцену. Для этого выберите в меню

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

Примечание: Если у вас возникнут вопросы при откры-

Распакуйте архив с ассетами. В нем вы найдете две папки: Menu и

Поздравляю, Вы только что завершили подготовительныеработы и

Первый элемент, которым мы займемся - это фоновое изображение

Примечание: Я уже слышу вопросы типа: “Что такое

Вы установили правильные положение и размер нашего фона. Те-

Image - неинтерактивный элемент управления, который отобража-

терфейса, поэтому этот элемент добавляется автоматически.

Вернемся к Image. Первое, что мы сделаем - переименуем Image в

Теперь у вас есть фоновое изображение вместо белого изображе-

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

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

1. Фактический размер изображения 1136 x 640 , этого доста-

2. Уменьшив окно в режиме Scene, вы увидите, что холст (бе-

Примечание: оригинальная игра была разработана для

Первая проблема состоит в результатах импортирования настроек

Для вашего проекта вам понадобятся изображения немного боль-

Теперь выберите img_background в Иерархии, а затем нажмите

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

Настало время настроить способ отображения. Прежде всего сле-

Если вы запустите игру на устройстве или просто растянете ваш

Хотя настройки Unity применимы в большинстве случаев, иногда

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

К счастью, специальный компонент приходит на помощь. Этот ком-

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

Constant Pixel Size: все элементы пользовательского интерфейса

Scale With Screen Size: Размеры и положение элементов пользо-

Constant Physical Size: Позиции элементов пользовательских ин-

После добавления компонента, установите его Resolution (Раз-

После того, как эти изменения вступят в силу, вы увидите фоновое

Измените разрешение вкладки Game чтобы увидеть, как ваша игра

Теперь переключитесь во вкладку Scene (Сцена) и вы увидите,

Постойте, но что насчет кнопок? Что происходит, когда они находят-

ся очень близко к левому или правому краю экрана? Они не долж-

Прежде чем перейти к кнопок и других UI управления, вы будете до-

Откройте окно Scene и выберите GameObject\UI\Image в меню.

Примечание: Если изображение окажется слишком да-

Теперь попробуйте превратить этот белый прямоугольник в реаль-

1. Выберите Image в Иерархии и переменуйте его в

2. Откройте папку Menu в Браузере проекта и найдите картинку

3. Перетащите изображения в поле Source Image инспектора.

4. Нажмите на Set Native Size в Инспекторе.

Как видите, это было достаточно просто. Теперь нужно работать с

Если вы работали с Unity раньше, то вы, наверняка, знакомы с ком-

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

Тем не менее, если вы выберите какой-либо элемент пользователь-

Как видите, Transform и Rect Transform немного отличаются,

Примечание: Вместо Pos X , Pos Y , Width и