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

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

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

Анимация кнопки

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

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

Выберите btn_start в Иерархии (Hierarchy)
Откройте вкладку Aнимация (Animation view).
Нажмите на [Create New Clip] (Создать новый клип) в выпадающем списке Animations (слева).

Примечание: выберите btn_start в Иерархии, так как вы будете добавлять новую анимацию и аниматор к выбранному объекту.

Назовите анимацию btn_start_slide_out и сохраните ее в папке Animations.

В дополнение к созданию самой анимации, Unity также любезно добавляет компонент аниматора к btn_start и создает контроллер аниматора.

Если вы не знакомы с анимацией и контроллерами Аниматора в Unity, пожалуйста, изучите урок под названием Ваяем игру в стиле Jetpack Joyride в Unity 2D.

Анимирование кнопки, выезжающей за пределы экрана

Хотя фактически нам нужны две анимации technically — кнопка, выезжающая из сцены, и кнопка, выезжающая обратно в сцену — мы схитрим и создадим всего одну, а потом прокрутим ее задом наперед.

Чтобы создать слайд из анимации, выполните следующие действия:

Выберите btn_start в Иерархии
Убедитесь, что при этом появилась вкладка Анимация (Animation view).
Нажмите на 1:00 на временной шкале и убедитесь в том, что запись анимации запущена. Это должно происходить автоматически.
Измените Anchors (Якоря) на top-stretch (сверху-тянется).
Измените Pos Y (Позиция по оси Y) на 60 в Инспекторе (Inspector).
Остановите запись, нажав на кнопку с красным кружком.

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

Обратите внимание на два следующих пунктов, отмеченных буквами на скриншоте:

A: Ключевому кадр была автоматически выставлена метка 0:00. В этот момент кнопка находится в исходном положении, в том самом, что вы установили в предыдущем учебнике.

B: Хотя визуальное отображение якорей не изменяется на красный цвет, вы можете увидеть, что числовые значения изменились и стали красными, указывая, что вы также анимировали якоря.

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

Вы заметили анимацию якорей? Если и нет, то вам наверняка бросилась в глаза эта раздражающе мигающая красная стрелочка. Жаль графический дизайн не моя сильная сторона. Хотя, если немного подумать, все становится на свои места: положение кнопки соответствует расстоянию до якорей. В случае btn_start, это было расстояние от нижней границы. В данный момент вы работаете только с движением по вертикали, поэтому только нижняя граница имеет значение. Чтобы убедиться, что кнопка выезжает за пределы экрана, двигайте ее вверх, пока она не пропадет из поля зрения. Что делать, если вам неизвестна высота экрана? Как сделать так, чтобы кнопка остановилась в тот самый момент, когда вы больше ее не видите? Ответ: изменив ее якоря. Установив якоря на верхнюю границу экрана, вы просто устанавливаете расстояние от этой границы. Таким образом, кнопка всегда будет выше края экрана и не зависеть от ее высоты, так как она позиционируется относительно верхнего края экрана.

Анимирование кнопки, въезжающей в сцену

Хорошая работа! У вас есть кнопка, которая выдвигается из экрана, а теперь нам нужна обратная анимация. Вы будете использовать ее в двух случаях:

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

Это довольно легко сделать. Во-первых, нужно отключить зацикливание анимации, так как кнопка должна двигаться либо вверх, либо вниз, а не скакать туда-сюда как шарик от пинг-понга. Чтобы отключить цикл, откройте папку Animations в Браузере проекта и выберите анимацию btn_start_slide_out, а в Инспекторе снимите галочку с пункта Loop Time.

Теперь выберите btn_start в Иерархии и откройте Animator view (вкладку Аниматор). Щелкните правой кнопкой мыши на состояние btn_start_slide_out и выберите Copy.

Щелкните правой кнопкой мыши где-нибудь внутри вкладки Аниматор, и выберите Paste чтобы продублировать состояние btn_start_slide_out.

Теперь выберите этот дубликат состояния, скорее всего он называется btn_start_slide_out 0, и переименуйте его в Инспекторе на btn_start_slide_in. Кроме того, задайте Speed значение, равное -1.

Затем, внутри вкладки Аниматор щелкните правой кнопкой мыши на btn_start_slide_in и выберите Set As Default, т.к. нам надо, чтобы жизненный цикл кнопки начинался с ее появления на экране, а не наоборот.

Далее, вам нужен параметр для контроля за состоянием кнопки. Нажмите кнопку + и добавьте новый параметр Bool с именем isHidden.

Наконец, добавьте два перехода между состояниями. Чтобы сделать это, щелкните правой кнопкой мыши на состоянии btn_start_slide_out и выберите Make Transition (сделать переход). Далее нажмите на btn_start_slide_in, чтобы сделать переход. После этого создайте обратный переход, щелкнув правой кнопкой мыши на btn_start_slide_in, выбрав Make Transition, а затем нажав на btn_start_slide_out. Вот, что у вас должно получиться:

Вы близки к цели, но нужно дополнительно настроить переходы. Вместо этого вы должны использовать параметр isHidden. Выберите transition из btn_start_slide_out в btn_start_slide_in и измените Conditions в Инспекторе чтобы isHidden стала равной false.

Затем выберите переход, который идет в обратном направлении, из btn_start_slide_in в btn_start_slide_out и изменитеs Conditions чтобы isHidden стала равной true.

Запустите сцену. Кнопка должна аккуратно въехать в сцену. Потом измените isHidden вручную, чтобы кнопка выехала за пределы экрана.

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

Анимация кнопки настроек

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

Offscreen Pos Y should be -50
Нет необходимости изменять якоря, поскольку кнопка уже спозиционирована по отношению к нижнему краю экрана.

Попробуйте сами. Чтобы создать анимацию кнопки, выезжающей вверх и вниз, следуйте следующим инструкциям:

Выберитеbtn_settings в Иерархии.
Откройте вкладку Анимация (Animation view).
Откройте раскрывающийся список анимаций и выберите [Create New Clip].
Назовите анимацию btn_settings_slide_out и сохраните ее в папке Animations. Это также приведет к созданию контроллера анимации и добавит компонент аниматора в btn_settings.
На вкладке Анимация нажмите на 1:00 mark at the timeline and make sure recording is on. Запись включится автоматически, но вы можете нажать на красный кружок и начать запись вручную.
В Инспекторе для btn_settings измените Pos Y на -50. На этот раз Вам не нужно менять якоря.
Остановите запись, нажав на кнопку с красным круго, или сохранив сцену.
Откройте папку Animations в Браузере проекта (Project browser). Выберите btn_settings_slide_out и снимите галочку в Инспекторе напротив пункта Loop Time.
Теперь откройте вкладку Аниматор (Animator).
Скопируйте и вставьте состояние btn_settings_slide_out для дублирования.
Выберите продублированное состояние, которое названо btn_settings_slide_out 0. В Инспекторе измените имя на btn_settings_slide_in и измените Speed на -1.
Щелкните правой кнопкой мыши на состояние btn_settings_slide_in и выберите Set As Default.
Создайте переход из btn_settings_slide_in to btn_settings_slide_out, затем создайте обратный переход.
Добавьте новый параметр Bool под именем isHidden.
Выберите переход из btn_settings_slide_out to btn_settings_slide_in, зайдите в Инспектор и измените Conditions, переключив isHidden на false.
Выберите переход из btn_settings_slide_in to btn_settings_slide_out и измените Conditions, переключив isHidden наtrue.

Вот, что вы должны получить после этого:

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

Запуск анимации кнопки с помощью скрипта

В MonoDevelop откройте UIManagerScript, который мы создали в первой части, и добавьте следующие переменные экземпляра прямо внутри определения класса:

public Animator startButton;

public Animator settingsButton;

После этого добавьте следующий метод:

public void OpenSettings()

{

startButton.SetBool("isHidden", true);

settingsButton.SetBool("isHidden", true);

}

Вот и весь код, который нам нужен. Сохраните скрипт и вернитесь обратно в Unity. В Unity выберите UIManager в Иерархии (Hierarchy). Перетащите btn_start из Иерархии в поле Start Button в Инспекторе, а btn_settings в поле Settings Button.

Теперь выделите btn_settings в Иерархии и нажмите на клавишу + в списке On Click (Button). Перетащите UIManager из иерархии в новый пункт в списке. После этого откройте меню выбора функций и выберите UIManagerScript\OpenSettings ().

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

Кнопки выходят за пределы экрана в противоположных направлениях

Добавление окна с настройками

Посмотрите, сколько у нас теперь свободного места! Идеально подходит для выезжающего диалогового окна. Ведь природа не терпит пустоты :] Обычно, диалоги содержат некоторые другие элементы управления, которые должны появиться и двигаться с диалогом. Таким образом, наиболее эффективным будет создать диалоговое окно как панель и назначить другие элементы интерфейса его детскими объектами. Для создания панели выберите GameObject\Create UI\Panel в меню. Это создаст полноэкранную панель с полупрозрачным белым фоном.

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

Выберите Panel в Иерархии и переименуйте на dlg_settings.
Установите его якоря в middle-right, так как вы будете позиционировать диалог относительно правого края от экрана, поэтому он не виден, когда вы запускаете сцену.
Установите Width равной 400, а Height - 150.
Установите Pos X равной220, а Pos Y - 0.

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

Установка фонового изображения для диалога

Вы собираетесь использовать 9й срез изображения в качестве фона диалогового окна, поэтому в первую очередь вы должны установить границу в настройках импорта. Откройте папку Menu в браузере проекта и выберите settings_panel_bg_9slice. В Инспекторе кликните на Sprite Editor чтобы открыть вкладку Редактора спрайтов (Sprite Editor view). Установите толщину рамок (Border) равной 20 и нажмите на кнопку Применить (Apply) на самом верху.

Теперь вы можете использовать это изображение для фона диалогового окна. Выберите dlg_settings в Иерархии и перетащите settings_panel_bg_9slice в поле Source Image в Инспекторе. Дважды щелкните на Color сядом с полем Source Image и установите A значение 255 чтобы убрать прозрачность.

Вот как должен выглядеть диалоговое окно после установки фонового изображения:

Добавление метки

В своем нынешнем состоянии, трудно утверждать, что этот зеленый прямоугольник - ни что иное, как диалоговое окно с настройками, но есть простой способ чтобы это исправить. Все, что вам нужно сделать, это написать на нем "Настройки"). Веберите GameObject\Create UI\Text для создания нового текстового UI элемента. Выберите Text в Иерархии и переименуйте в lbl_settings. Теперь переместите lbl_settings на dlg_settings чтобы добавить его в качестве дочернего объекта.

lbl_settings - дочерний объект dlg_settings

После этого, выберите в иерархии lbl_settings и сделайте следующие изменения:

Установите Якоря Anchors в top-center.
Задайте Pos X равной 0, а Pos Y - -40.
Измените Text на Settings.
Откройте папку Fonts в Браузере проекта и перетащите шрифт DCC – Dreamer в поле Инспектора Font.
задайте Font Size значение 30.
Отцентрируйте, установите выравнивание Alignment в Center Align.
Покрасьте текст в белый цвет, задав Color белую палитру и установив A (Alpha) значение255 чтобы убрать прозрачность.

Анимация окна с настройками

Теперь у вас есть настоящее окно с Параметрами и наш следующий шаг будет заключаться в том, чтобы при нажатии пользователем на кнопку Настройка происходило появление этого окна. Мы проделаем все тоже самое, что и для скользящих кнопок, разница будет только в том, что диалоговое окно не будет скользить автоматически после запуска сцены. Выберите в Иерархии dlg_settings и откройте вкладку Animation (Анимация). Затем создайте новую анимацию, нажав на [Create New Clip] (Создать новый клип) в выпадающем списке.

Создаем новую анимацию для окна с настройками

Назовем анимацию dlg_settings_slide_in и сохранем ее в папке Animations.

Затем щелкните по отметке 1:00 на шкале и убедитесь в том, что запись началась, или запустите ее вручную, нажав на кнопку записи.

В инспекторе установите Якоря Anchors в middle-center, а Pos X в 0.

Нажмите на Stop recording чтобы остановить запись.

Откройте папку Animations в Браузере проекта и выберите dlg_settings_slide_in. В Инспекторе снимите галку напротив Loop Time.

Теперь переключитесь на вкладку Animator. Скопируйте и вставьте состояние dlg_settings_slide_in чтобы дублировать его. Переименуйте его в dlg_settings_slide_out, установите его скорость Speed в -1.

Примечание: На этот раз, не изменяйте состояние по умолчанию! Дефолтное состояние диалогового окна должно остаться таким: dlg_settings_slide_in.

Нажмите на кнопку + и добавьте новый параметр Bool под именемisHidden. Создайте два перехода между состояниями, точно так же, как вы делали с кнопками. Затем добавьте параметр isHidden типа Bool. Измените условия перехода dlg_settings_slide_out => dlg_settings_slide_in, переключив isHidden на false, а для перехода dlg_settings_slide_in => dlg_settings_slide_out переключите isHidden на true.

Запустите сцену и вы увидите скольжение диалогового окна в начале, а затем происходит перекрытие кнопок.

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

Отображение диалога при нажатии на кнопку.

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

public Animator dialog;

Затем добавьте следующий код в конец OpenSettings:

public void OpenSettings()

{

//..пропускается..

dialog.enabled = true;

dialog.SetBool("isHidden", false);

}

Это активирует компонент Animator и устанавливает правильное значение параметра isHidden. И в заключении добавим новый метод CloseSettings следующим образом:

public void CloseSettings()

{

startButton.SetBool("isHidden", false);

settingsButton.SetBool("isHidden", false);

dialog.SetBool("isHidden", true);

}

Это возвращает кнопки и скрывает диалоговое окно. Сейчас мы добавим элемент UI, вызывающий этот метод. Сохраните UIManagerScript и переключитесь обратно в Unity. Выберите UIManager в Иерархии и перетащите dlg_settings в поле Dialog в Инспекторе.

Запустите сцену, затем нажмите на кнопку Настройка и проследите, как кнопки выезжают из сцены в то время, как в нее заезжает диалоговое окно. Мы здорово продвинулись, но еще многое предстоит сделать, ведь мы не можем закрыть диалоговое окно. Чтобы это исправить добавим кнопку Закрыть. Выберите GameObject\Create UI\Button. Переименуйте новую кнопку в btn_close и перетащите ее на dlg_settings в Иерархии чтобы добавить кнопку в качестве дочернего объекта. тек как эта кнопка не имеет текста, то удалите текст из btn_close. Вот что вы должны иметь в Иерархии на данный момент:

Теперь выберите btn_close и выполните следующие действия:

Установите Якоря Anchors в top-right.
Установите значения Pos X и Pos Y равными 0.
Откройте папку Menu в Браузере проекта и перетащите settings_btn_close в поле Source Image в Инспекторе.
Нажмите на Set Native Size.

Теперь наше диалоговое окно на вкладке Сцена должно выглядеть так:

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

Кнопка выглядит стильно, но она ничего не делает. К счастью, мы уже добавили метод, который должна вызывать наша кнопка. Выберите btn_close в Иерархии, прокрутите вниз список до On Click (Button) и нажмите +. Перетащите UIManager Из иерархии к новому пункту, а затем выберите в выпадающем списке метод UIManagerScript\CloseSettings().

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

Добавление настроек звука

Сейчас в нашем диалоговом окне нет никакого толка. Пришло время добавить в него какие-нибудь настройки. Пусть это будет включение/выключение музыки. Музыки? Да, что за удовольствие играть в игру без звуковой дорожки?

Добавление музыки к сцене с Меню

Вы можете порыться в своей коллекции для поиска подходящей мелодии, но это не обязательно, потому что проект уже содержит музыкальный трек. Все, что вам нужно сделать, это проиграть его. Выберите Main Camera в Иерархии и добавьте компонент Audio Source. Затем, в Браузере проекта откройте папку Audio и перетащите music в поле Audio Clip в Инспекторе. Поставьте галочку справа от Play On Awake.

Включение и выключение музыки

Для включения и выключения музыки вы собираетесь использовать a…wait for it…toggle control. Выберите GameObect\Create UI\Toggle чтобы добавить переключатель на сцену.

Управление переключателя состоит из root object (корневой объект) с добавленным Toggle script (скрипт переключения) и несколькими дочерними объектами:

Background: Изображение, которое всегда видно (i.e. in both On and Off states)
Checkmark (галочка): Изображение, которое отображается только при включении (ON).
Label: Метки, отображается рядом с переключателем.

Метка нам не понадобится, поэтому дочерний объект Label можете удалить. Переименуйте Toggle в tgl_sound и перетащите его на dlg_settings, чтобы вставить в диалоговое окно. Вот, что вы должны увидеть в Иерархии после всех этих действий:

Выберите tgl_sound в Иерархии. Установите Якоря Anchors в положение middle-left, Pos X в 115, а Pos Y в -10.

Примечание: Помните, как якоря и позиция устанавливаются по отношению к родителю? Поэтому важно сначала добавить tgl_sound в качестве детского объекта dlg_settings и только после этого установите его позицию.

Помните, изменение якорей и точки отсчета не влияет на положение элементов UI - вместо этого изменяются значения Pos X, Pos Y, Left, Right и т.д., в результате чего элемент остается на том же месте, но с использованием новых якорей и точки отсчета. Установите их в первую очередь, и поиграйте с ними, чтобы установить правильное положение.

Ах да, под компонентом Toggle (Script) есть окошко Active - нужно убрать из него галочку. Теперь вам нужно настроить изображение для фона и галочки, а также дочерние объекты. Так же, как и другие изображения, мы возьмем из папки Menu folder в Браузере проекта. Нам потребуются два изображения:

settings_btn_sound для фона
settings_btn_sound_checkmark для Checkmark

Выберите Background из tgl_sound в иерархии и перетащите settings_btn_sound из браузера проекта в Source Image в Инспектор. Затем нажмите на Set Native Size.

Теперь выберите Checkmark и повторите предыдущие шаги, но на этот раз используйте изображение settings_btn_sound_checkmark из Браузера проекта.

Вот, что вы должны увидеть во вкладке Сцена:

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

Выключение музыки

Сильной стороной обработчиков событий элементов UI является то, что иногда вы можете обойтись без написания какого-либо кода. Вместо этого, вы можете установить элемент пользовательского интерфейса, чтобы изменить свойство или непосредственно вызвать функцию компонента, подключенную к объекту. Вот как вы можете изменить свойство mute компонента Audio Source, прикрепленого к основной камере. Выберите tgl_sound в Иерархии, а в Инспекторе в списке найдите On Value Changed (Boolean). Нажмите на + чтобы добавить новый элемент.

Перетащите MainCamera из иерархии на добавленный элемент. Откройте выпадающее меню с функциями и выберите AudioSource\mute из секции Dynamic bool на верху.

Примечание: Если вы внимательно посмотрите на варианты выбора функции, вы увидите два свойства mute: один в разделе Dynamic bool, а другой - в Static Parameters. Давайте разберем в чем разница. Если вы отключите звук в разделе Dynamic bool, значение функции будет изменяться на текущее значение свойства Active переключателя каждый раз, когда вы будете его переключать. Если вы отключите звук в разделе Static Parameters, откроется новое поле, и вы сможете установить постоянное значение функции в Инспекторе. Конечно, в разделе Dynamic bool находятся только свойства и методы, в основе которых лежат значения Bool, т.к. это активный тип переключателя. Но поскольку вы можете определить каждое значение как статический параметр, в разделе Static Parameters вы найдете все публичные свойства и методы.

Следовательно, когда для переключателя установлено свойство Active, он изменяет свойство Mute у AudioSource на true и выключает музыку. Запустите сцену, откройте окно с настройками и попробуйте выключить, а потом включить музыку.

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

То, что переключатель может синхронизировать свое активное и неактивное состояние с полем какого-нибудь другого объекта – это, конечно, хорошо, но что делать, если у вас диапазон значений? В этом случае, вы можете использовать элемент Slider UI. Выберите GameObject\Create UI\Slider для добавления слайдера. Переименуйте его в sdr_volume и положите его в dlg_settings.

Выберите sdr_volume в Иерархии и установите его Якоря Anchors в положение middle-right. Установите его Pivot раной (1, 0.5) так что вы могли бы позиционировать sdr_volume с помощью средней точки своего правого края. Наконец установите его Pos X, равной -20, Pos Y - -10, Width - 270, а Height - 35.

Теперь диалог Настройки должен выглядеть так, как сейчас:

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

Background: Изображение, которое показывает границы ползунка и его внутренней области, когда она не заполнена (например, когда рукоятка слева).
Handle: Изображение для рукоятки. Вы перетаскиваете ее чтобы изменить значение слайдера.
Fill: Изображение, которое тянется, чтобы показать значение ползунка.

На самом деле это изображение – не единственная часть, которая может тянуться, поэтому лучше использовать изображения, которые можно увеличить как минимум в 9 раз, для всех трех частей. Откройте папку Menu в Браузере проекта и найти три изображения, соответствующие каждой части слайдера: slider_background, slider_fill и slider_handle.

Для каждого изображения, откройте Sprite Editor в Инспекторе и задайте все значения Border равными восьми. Нажмите на Apply.

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

Выберите sdr_volume и перетащите slider_background на Source Image в Инспекторе.
Выберите Fill (не Fill Area) и перетащите slider_fill на Source Image.
Выберите Handle и перетащите slider_handle на Source Image.

Если вы запустите сцену сейчас и откройте диалоговое окно Настройки, вы должны увидеть что-то вроде этого:

Изменение уровня громкости

Изменение громкости музыки с помощью ползунка похоже на то, что вы сделали с переключателем. Выберите sdr_volume в Иерархии. В инспекторе, прокрутите вниз, чтобы увидеть On Value Changed (Single) и нажмите на + чтобы добавить новый пункт. Перетащите MainCamera из Иерархии к этому новому пункту в списке, откройте выпадающий список функций и выберите AudioSource\volume в разделе Dynamic float.

Запустите сцену, откройте диалоговое окно Настройки (Settings) и измените значение слайдера. Вы должны услышать как изменяется громкость звука при перетаскивании ползунка. Лично я считаю, что это супер-крутая функция.

Что будет дальше?

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

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