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

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

Добро пожаловать обратно! В первой части этой серии уроков, состоящей из трех частей, вы создали сцену с двумя кнопками. Вы узнали, как использовать элементы управления пользовательского интерфейса Image, Button и Text , а также изучили основные концепции, такие как RectTransform, Anchors и Pivots. Не так уж мало навыков для изучения в одном уроке! Однако сама сцена довольно проста.

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

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

Откройте проект в Unity. Откройте MenuScene, возьмите бодрящий напиток и начните думать о пользовательском интерфейсе!

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

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

Создание анимации и аниматора

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

Вот шаги к успеху:

1. Выберите StartButton в Иерархии.
2. Откройте окно Animation, выбрав в меню Window > Animation > Animation.
3. Нажмите кнопку Create в окне Animation. Это создаст Animator и анимационный клип.
4. Назовите анимацию StartButtonSlideOut и сохраните ее в RW > Animations.

Кроме создания самой анимации, Unity также добавляет компонент Animator в StartButton и создает Animator Controller. Готовы начать?

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

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

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

1. Выберите StartButton в Иерархии.
2. Убедитесь, что окно Animation видно.
3. Нажмите на отметку 1:00 на шкале времени, а затем нажмите на кнопку Record.
4. Измените Anchors на top-stretch.
5. Измените Pos Y на 60 в Инспекторе.
6. Остановите запись, нажав кнопку с красным кружком.

Произошли две вещи:

1. Ключевой кадр был вставлен автоматически на отметке 0:00. На данный момент кнопка находится в исходном положении, в котором вы располагали ее в предыдущем уроке.
2. Хотя визуальное представление якорей не стало красным, вы можете увидеть, что числовые значения изменились и стали красными, что указывает на то, что вы также анимировали якоря.

Сделайте окна Animation и Scene видимыми и воспроизведите анимацию. Вы увидите что-то вроде этого:

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

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

Что делать, если вы не знаете высоту экрана? Как убедиться, что кнопка останавливается сразу после того, как она больше не видна?

Ответ: Поменяйте якоря кнопки.

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

Анимация выезжающей на экран кнопки

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

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

Сначала отключите зацикливание анимации, так как кнопка должна перемещаться вверх или вниз, а затем останавливаться, а не двигаться назад и вперед.

Чтобы отключить зацикливание, откройте RW > Animations в окне Project и выберите анимацию StartButtonSlideOut. В Инспекторе снимите флажок Loop Time.

Затем выберите StartButton в Иерархии и откройте окно Animator, выбрав Window > Animation > Animator. Щелкните правой кнопкой мыши на состояние StartButtonSlideOut и выберите Copy.

Затем нажмите правой кнопкой мыши в любом месте свободного пространства в окне Animator и выберите Paste. Это дублирует состояние StartButtonSlideOut.

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

Затем в окне Animator нажмите правой кнопкой мыши на StartButtonSlideIn и выберите Set as Layer Default State, поскольку вы хотите, чтобы кнопка запускала свой жизненный цикл, перемещаясь по экрану, а не наоборот.

Далее вам нужен параметр для управления состоянием кнопки. В левом столбце окна Аниматора щелкните вкладку Parameters. Затем нажмите кнопку + и добавьте новый параметр Bool с именем isHidden.

И наконец, добавьте два перехода между состояниями. Для этого нажмите правой кнопкой мыши на состояние StartButtonSlideOut и выберите Make Transition. Щелкните StartButtonSlideIn, чтобы выполнить переход.

После этого создайте обратный переход, щелкнув правой кнопкой мыши StartButtonSlideIn, выбрав Make Transition и щелкнув StartButtonSlideOut. Вот что должно получиться в итоге:

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

Выберите переход от StartButtonSlideOut к StartButtonSlideIn. В Инспекторе нажмите + на панели Conditions. Установите для isHidden значение false.

Затем выберите переход, который идет в противоположном направлении, от StartButtonSlideIn к StartButtonSlideOut, и установите для его условий значение isHidden, равное true.

Выберите File > Save, чтобы сохранить вашу работу и запустить сцену. Вы должны увидеть, как кнопка выдвигается на сцену. Затем вручную измените значение isHidden, чтобы кнопка сдвинулась назад.

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

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

Вы можете сами анимировать кнопку настроек! Все, что вам нужно знать, это:

• Offscreen Pos Y должен быть -50.
• Якоря менять не нужно, поскольку кнопка уже расположена относительно нижнего края экрана.

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

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

Приятно видеть, как кнопка Settings перемещается вверх и вниз, но разве обе кнопки не должны выдвигаться одновременно, как вначале?

Да! Вы сделаете это дальше.

Запуск анимации кнопок из скрипта

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

public Animator startButton;
public Animator settingsButton;

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

public void OpenSettings() 
{
    startButton.SetBool("isHidden", true);
    settingsButton.SetBool("isHidden", true);
}

Это весь код, который вам нужен. Сохраните скрипт и вернитесь в Unity.

В Unity выберите UIManager в Иерархии. Перетащите StartButton из Иерархии в поле Start Button в Инспекторе и перетащите SettingsButton в поле Settings Button.

Затем выберите SettingsButton в Иерархии и нажмите на + в списке On Click (). Перетащите UIManager из Иерархии в новый элемент в списке. После этого откройте меню выбора функции и выберите UIManagerScript > OpenSettings ().

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

Добавление диалогового окна настроек

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

Создание панели

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

Чтобы создать панель, выберите в меню GameObject > UI > Panel. Это создаст полноэкранную панель с белым полупрозрачным изображением в качестве фона. В результате вы должны увидеть какую-то полноэкранную вуаль.

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

1. Выберите Panel в Иерархии и переименуйте ее в SettingsDialog.
2. Установите его якоря посередине и справа, так как вы разместите диалоговое окно за правым краем и за пределами экрана, чтобы его не было видно при запуске сцены.
3. Установите Width на 400 и Height на 150.
4. Установите Pos X на 220 и Pos Y на 0.

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

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

Вы собираетесь использовать 9-сегментное изображение в качестве фона диалогового окна. Сначала вам нужно установить границу в настройках импорта.

Откройте RW > UI > Menu в окне проекта и выберите settings_panel_bg_9slice. В инспекторе нажмите на Sprite Editor, чтобы открыть окно Sprite Editor.

Установите все значения Border на 20 и нажмите Apply вверху.

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

Выберите SettingsDialog в Hierarchy и перетащите settings_panel_bg_9slice в поле Source Image в инспекторе. Дважды нажмите на Color рядом с полем Source Image и установите для A значение 255 (или 1 в зависимости от настроек палитры цветов), чтобы удалить прозрачность.

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

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

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

Нажмите правой кнопкой мыши на SettingsDialog и выберите UI > Text, чтобы создать новый текстовый элемент пользовательского интерфейса в качестве дочернего элемента SettingsDialog. Выберите Text в Иерархии и переименуйте его в SettingsLabel.

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

1. Установите якоря по центру вверху.
2. Установите Pos X на 0 и Pos Y на -40.
3. Измените Text на Settings.
4. Откройте папку Fonts в окне Project и перетащите шрифт DCC — Dreamer в поле Font в Инспекторе.
5. Установите размер шрифта на 30.
6. Установите для параметра Alignment значение Center Align.
7. Установите для Color белый цвет с A (Alpha) 255, чтобы удалить прозрачность.

Анимация диалогового окна настроек

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

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

Выберите SettingsDialog в Иерархии и откройте представление Animation. Затем создайте новую анимацию, нажав Create.

Назовите анимацию SettingsDialogSlideIn и сохраните ее в RW > Animations.

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

В Инспекторе установите Anchors в центр середины и Pos X на 0.

Остановите запись анимации. Откройте папку Animations в окне проекта и выберите SettingsDialogSlideIn в Инспекторе. И наконец, снимите флажок Loop Time.

Выберите SettingsDialog в Иерархии и откройте окно Animator. Скопируйте и вставьте состояние SettingsDialogSlideIn, чтобы дублировать его. Переименуйте дубликат в SettlingsDialogSlideOut и установите для Speed значение -1.

Примечание. На этот раз не меняйте состояние по умолчанию! Состояние диалога по умолчанию должно оставаться SettingsDialogSlideIn.

Нажмите кнопку + и добавьте новый параметр типа bool с именем isHidden.

Создайте два перехода между состояниями, как вы это делали для кнопок. Затем добавьте параметр isHidden типа bool.

Измените условие перехода SettingsDialogSlideOut => SettingsDialogSlideIn на isHidden равное false. Для перехода SettingsDialogeSlideIn => SettingsDialogSlideOut измените условие на isHidden равное true.

Затем щелкните правой кнопкой мыши в Animator и выберите Create State, а затем выберите Empty.

В окне Inspector назовите состояние Idle. Затем щелкните состояние правой кнопкой мыши и выберите Set as Layer Default State. И наконец, создайте переход от Idle к SettingsDialogSlideIn. Задайте для Condition значение isHidden, равное false.

Должно получиться так:

Выберите File > Save, чтобы сохранить вашу работу, а затем запустите сцену. Вы увидите, как диалоговое окно появляется в начале и перекрывает кнопки.

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

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

Отключите компонент Animator, чтобы он не воспроизводил анимацию в начале, установив значение по умолчанию для isHidden равным true. Щелкните на пустое место в окне Animator и установите для isHidden значение true:

Теперь, когда вы запускаете сцену, диалог появляется не сразу, и это хорошо; однако он не появится, даже если вы нажмете на кнопку Settings. Нужно этот поправить.

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

public Animator dialog;

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

public void OpenSettings() 
{
    //..skipped..

    dialog.SetBool("isHidden", false);
}

Это включает компонент Animator и устанавливает правильное значение для параметра isHidden.

И наконец, добавьте новый метод CloseSettings, как показано ниже:

public void CloseSettings() 
{
    startButton.SetBool("isHidden", false);
    settingsButton.SetBool("isHidden", false);
    dialog.SetBool("isHidden", true);
}

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

Сохраните UIManagerScript и вернитесь в редактор Unity.

Выберите UIManager в Иерархии и перетащите SettingsDialog в поле Dialog в Инспекторе.

Запускаем сцену. Затем нажмите кнопку Settings и посмотрите, как кнопки выдвигаются по мере появления диалогового окна.

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

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

Создайте новую кнопку как дочернюю для диалогового окна SettingsDialog, щелкнув на него правой кнопкой мыши в Hierarchy и выбрав UI > Button. Переименуйте новую кнопку в CloseSettingsButton. Кроме того, на этой кнопке не будет текста, поэтому удалите объект Text, вложенный в CloseSettingsButton.

Вот что у вас должно быть в Иерархии на данный момент:

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

1. Установите якоря в верхний правый угол.
2. Установите для Pos X и Pos Y значение 0.
3. Откройте RW > UI > Menu в окне проекта и перетащите settings_btn_close в поле Source Image в Инспекторе.
4. Нажмите на Set Native Size.

Вот как теперь должно выглядеть диалоговое окно в режиме просмотра сцены:

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

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

Выберите CloseSettingsButton в Иерархии. Прокрутите вниз до списка On Click () и нажмите +. Перетащите UIManager из Иерархии в новый элемент, а затем выберите метод UIManagerScript > CloseSettings () в раскрывающемся списке.

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

Эй, ты хорошо поработал. Выглядит красиво!

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

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

Музыка? Да, какое удовольствие в игре без рок-саундтрека?

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

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

Выберите Main Camera в Иерархии и добавьте компонент Audio Source. Затем в окне Project откройте RocketMouse > Audio и перетащите Music в поле Audio Clip в Инспекторе.

Включите Play On Awake.

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

Чтобы включать и выключать музыку, вы будете использовать — подождите — элемент пользовательского интерфейса toggle. Щелкните правой кнопкой мыши на SettingsDialog и выберите UI > Toggle, чтобы добавить переключаемый элемент пользовательского интерфейса в качестве дочернего элемента диалогового окна.

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

1. Background: изображение, которое всегда видно (т. е. как во включенном, так и в выключенном состоянии).
2. Checkmark: изображение, которое видно только при активном переключателе (ВКЛ.)
3. Label: ярлык, отображаемый рядом с переключателем.

На этот раз ярлык вам не нужен, поэтому удалите вложенный Label. Затем переименуйте Toggle в SoundToggle. Вот что вы должны увидеть в Иерархии после того, как закончите:

Выберите SoundToggle в Иерархии. Установите его Anchors на средний левый угол, Pos X на 115 и Pos Y на -10.

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

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

Кроме того, в компоненте Toggle снимите флажок Is On.

Теперь вам нужно указать изображения для дочерних объектов Background и Checkmark. Так же, как вы сделали с другими изображениями, вы возьмете их из RW > UI > Menu, поэтому откройте эту папку в окне Project.

Вам понадобятся два изображения:

• settings_btn_sound для фона
• settings_btn_sound_checkmark для галочки

Выберите дочерний элемент Background объекта SoundToggle в Иерархии и перетащите settings_btn_sound из окна проекта в Source Image в инспекторе. Затем нажмите на Set Native Size.

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

Вот что вы должны увидеть в режиме просмотра сцены:

Примечание. Вы заметите, что размер корневого объекта (широкий прямоугольник) не соответствует размерам фонового изображения. Вы можете изменить его размер, но это не важно. Прямоугольник дочерних объектов будет действовать как блоки коллайдера для взаимодействия. Кроме того, отмеченное состояние может все еще отображаться, но когда вы нажимаете кнопку воспроизведения в редакторе, Toggle обновляет свое состояние на основе параметра Is On, который вы установили ранее.

Отключение музыки

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

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

Выберите SoundToggle в Иерархии и в Инспекторе найдите список On Value Changed (Boolean). Щелкните +, чтобы добавить новый элемент.

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

Примечание. Если вы внимательно посмотрите на параметры выбора функций, вы увидите два свойства отключения звука: одно в разделе Dynamic bool, а другое в Static Parameters.

Разница банальна. Если вы выберете отключение звука в разделе Dynamic bool, его значение будет устанавливаться на текущее значение свойства Active переключателя при каждом его переключении.

Если вы выберете свойство mute в разделе Static Parameters, появится новое поле ввода, и вы сможете установить его значение в Inspector на постоянное значение.

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

Следовательно, когда переключатель активен (например, active равно true), он устанавливает для свойства mute AudioSource значение true и отключает музыку.

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

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

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

Опять же, щелкните правой кнопкой мыши на SettingsDialog, чтобы добавить дочерний объект, но на этот раз добавьте UI > Slider. Переименуйте его в VolumeSlider.

Выберите VolumeSlider в Иерархии и установите его якоря посередине справа. Затем установите его Pivot на (1, 0.5), чтобы вы могли расположить его, используя среднюю точку его правого края.

И наконец, установите RectTransform на (Pos X: -20, Pos Y: -10, Width: 270, Height: 35).

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

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

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

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

Откройте RW > UI > Menu в окне проекта и найдите три изображения, соответствующие каждой части слайдера: slider_background, slider_fill и slider_handle.

Для каждого изображения откройте Sprite editor в Inspector и установите для всех значений Border значение 8. Нажмите Apply.

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

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

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

Изменение громкости компонента AudioSource

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

Выберите VolumeSlider в Иерархии. В Инспекторе прокрутите вниз, чтобы увидеть список On Value Changed (Single), и нажмите +, чтобы добавить новый элемент.

Перетащите MainCamera из Иерархии в этот новый элемент в списке, откройте раскрывающийся список выбора функции и выберите AudioSource > volume в разделе Dynamic float.

Кроме того, установите параметр Value компонента Slider на 1, чтобы установить для ползунка то же значение, что и громкость музыки при запуске сцены.

Выберите File > Save, чтобы сохранить вашу работу, а затем запустите сцену. Откройте диалоговое окно Settings и измените значение ползунка. Вы должны услышать, как громкость увеличивается и уменьшается, когда вы перетаскиваете ручку ползунка. Какая замечательная функция!

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

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

Если вы хотите увидеть результат данного урока, то найдите итоговый проект с помощью кнопки «Скачать материалы урока» в начале страницы.

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

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

Автор перевода: Jean Winters

Источник: Introduction to Unity UI – Part 2