Часть 2

вы узнали, как использовать элементы графического интерфейса «Кнопка», «Текст» и «Изображение», а также изучили что такое RectTransform, Anchors и Pivots.

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

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

Теперь откройте ваш проект в Unity, перейдите в MenuScene, возьмите бодрящий напиток и наслаждайтесь творческим процессом!

Анимированные кнопки

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

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

Процесс создания анимации кнопок в Unity аналогичен анимации любого другого объекта в этой программе. Чтобы создать несколько анимированных изображений и настроить их статус и переходы необходимо добавить объект «Animator».

Вот как это сделать:

  1. Выбираем StartButton в меню;

  2. Далее в появившемся меню открываем «Анимация»;

  3. Нажимаете кнопку «Создать». Это даст возможность добавить в сцену Animator и анимационный клип.

  4. Дайте название анимации «StartButtonSlideOut» и сохраните ее в RW — Анимации.

В дополнение к созданию самой анимации, Unity также помещает объект «Animator» в меню StartButton. Вы готовы начать?

Анимация кнопки, которая выходит за пределы экрана

С технической точки зрения вы будете создавать сразу две анимации – кнопка будет переворачиваться и возвращаться на место.

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

  1. Выберите в иерархии «StartButton»;

  2. Убедитесь, что анимацию хорошо видно;

  3. На временной шкале нажмите на отметку 1:0 и начните запись.

  4. Поменяйте анкоры местами;

  5. Положение Y установите на 60;

  6. Остановите запись, нажав на соответствующую кнопку.

Что изменилось:

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

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

Теперь сделайте Animation и Scene видимыми и попробуйте воспроизвести анимацию. Должно получиться что-то вроде этого:

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

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

Ответ: измените анкоры.

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

Анимация кнопки с дополнительными вставками

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

  1. Если вы хотите, чтобы во время загрузки сцены кнопка перемещалась, а не просто появлялась на экране.

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

Для начала выключите меню воспроизведения анимации, чтобы кнопка перестала перемещаться по рабочей области. Для того чтобы отключить зацикливание, откройте пункт «Animations» в окне проекта и выберите анимацию StartButtonSlideOut. На панели управления снимите флажок «Loop Time».

Затем в иерархии выберите «StartButton» и откройте меню «Аниматора», выбрав Окно ⇒ Анимация ⇒ Аниматор. Выбирайте функцию «копировать» при помощи щелчка правой кнопки мыши по анимации StartButtonSlideOut.

Затем кликните правой кнопкой мыши на любой свободной области и выберите функцию «вставить». Это продублирует настройки StartButtonSlideOut.

Теперь нужно выбрать созданную нами копию и переименовать ее в StartButtonSlideIn. В параметрах скорость нужно установить значение -1.

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

Следующим шагом вам нужно перейти во вкладку «Параметры» в левом столбце окна «Animator» и при помощи кнопки «+» добавить новый параметр Bool с именем isHidden.

Наконец, вам предстоит добавить несколько переходов между двумя состояниями кнопок. Для этого щелкните правой кнопкой мыши состояние StartButtonSlideOut и выберите «Сделать переход». Затем нажмите на StartButtonSlideIn, чтобы сделать переход.

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

Вы уже близки к цели, но для завершения оперfции необходимо присвоить значение isHidden, основываясь на том, какой переход происходит. Для этого выберите переход от StartButtonSlideOut к StartButtonSlideIn и в панели управления нажмите «+» в меню «Условия». Установите значение isHidden на false.

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

Выберите Файл ⇒ Сохранить, чтобы сохранить свою работу и запустить сцену. Вы должны увидеть движение кнопки. Затем измените isHidden вручную, чтобы кнопка сдвинулась назад.

Настройка кнопки «параметры/настройки»

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

Значение для Y должно быть – 50;

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

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

Вот что должно получиться на данном этапе:

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

Конечно! И вы научитесь это делать в следующем шаге.

Настройка анимации кнопок при помощи скрипта

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

public Animator startButton;

public Animator settingsButton;

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

public void OpenSettings()

{

startButton.SetBool("isHidden", true);

settingsButton.SetBool("isHidden", true);

}

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

Находясь в программе, выберите в иерархии UIManager и перетащите кнопкой мышки StartButton в поле ввода «Start Button». Таким же образом переместите SettingsButton в поле «Settings Button».

После этого выберите пункт «Настройки» в иерархии и нажмите «+» в списке «по щелчку».

Затем выберите «Настройки» в иерархии и нажмите «+» в списке «По щелчку». Перетащите UIManager из Иерархии в новый список элементов. После этого откройте меню настроек и выберите UIManagerScript ⇒ OpenSettings.

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

Создание меню настроек

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

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

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

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

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

1.Выбрать в иерархии вкладку «Panel» и переименовать ее в SettingsDialog;

  1. Установите все анкоры с правой стороны;

  2. Установите ширину на 400 и высоту на 150;

  3. Установите значения X на 220 и Y на 0.

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

Откройте RW ⇒ UI ⇒ Меню и в появившемся окне выберите settings_panel_bg_9slice. В меню щелкните «Редактор спрайтов», чтобы открылись параметры меню «Редактор спрайтов». Установите все значения границ на 20 и нажмите «Применить». Теперь вы можете использовать изображение в качестве фона для диалога.

В иерархии нужно выбрать SettingsDialog и перетащить settings_panel_bg_9slice в поле «Исходное изображение» которое находится в Инспекторе.

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

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

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

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

Щелкните правой кнопкой мыши на «SettingsDialog» и выберите UI I Text, чтобы создать новый элемент Text UI в качестве побочного элемента SettingsDialog. В иерархии выберите текст и переименуйте его в SettingsLabel.

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

  1. Установите анкоры сверху по центру;

  2. Установите значения X=0 и Y =-40;

  3. Измените текст в настройках;

  4. Откройте папку «Шрифты» в окне «Проект» и перетащите шрифт «DCC – Dreamer» в поле «Шрифт» которое находится в Инспекторе.

  5. Установите размер шрифта равный 30.

  6. Примените выравнивание текста по центру.

  7. Установите значение Color (цвет) на White (белый), чтобы убрать прозрачность.

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

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

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

В иерархии выберите SettingsDialog и откройте диалоговое окно настроек Анимации. Затем создайте новую анимацию, нажав кнопку «Создать».

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

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

В Инспекторе установите значение анкора в середину квадрата, а значение Х=0.

Остановите запись анимации. Теперь откройте папку «Анимации» в окне «Проект» и выберите «SettingsDialogSlideIn» в Инспекторе. Снимите флажок с «Loop Time».

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

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

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

Теперь нужно создать два перехода между состояниями анимации, как вы это делали ранее. Для этого добавьте параметр isHidden типа bool.

Измените условие перехода SettingsDialogSlideOut ⇒ SettingsDialogSlideIn, чтобы значение isHidden было равно false. Для перехода SettingsDialogeSlideIn ⇒ SettingsDialogSlideOut нужно изменить условие isHidden равное значению true.

Далее кликните правой кнопкой мыши в области Animator и в диалоговом меню выберите Create State и значение Empty.

В инспекторе создайте подпункт Idle, после чего создайте для него состояние слоя по умолчанию и сделайте два перехода между Idle и SettingsDialogSlideIn. По условию isHidden имеет значение false.

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

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

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

Отображение содержимого меню при нажатии кнопки

Нажмите на любое пустое место в окне Animator и установите значение isHidden = true:

Теперь при запуске воспроизведения сцены диалоговое окно больше не будет появляться сразу. Однако и при нажатии кнопки «настройки» пока ничего не произойдет. Чтобы это исправить необходимо внести значение для переменной:

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 в соответствующее поле в Инспекторе.

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

Добавление кнопки «закрыть»

Создайте новую кнопку как дополнительный элемент SettingsDialog, щелкнув правой кнопкой мыши в меню иерархии и выбрав UI ⇒ Button. Эту кнопку необходимо переименовать в CloseSettingsButton. Обратите внимание, что на этой кнопке не будет текста, поэтому необходимо удалить объект Text, вложенный в CloseSettingsButton.

Вот как должно выглядеть меню иерархии на данный момент:

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

  1. Установите анкор в верхнем правом углу.

  2. Установите значение для X и Y равное 0.

  3. Откройте меню RW ⇒ UI in в окне «Проект» и перетащите settings_btn_close в поле «Исходное изображение» в Инспекторе.

  4. Выберите функцию «Установить собственный размер».

Теперь диалоговое меню должно выглядеть так:

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

Кнопка смотрится замечательно, но по-прежнему не несет в себе никакой функциональности.

Чтобы это исправить, в иерархии вам нужно выбрать CloseSettingsButton, найти пункт On Click, нажать «+» и перетащить UIManager из иерархии в новый элемент, а затем выберите метод UIManagerScript ⇒ CloseSettings в появившемся списке.

Не забудьте сохранить свою работу (Файл ⇒ Сохранить), а затем запустите функцию воспроизведения сцены. Попробуйте теперь нажать кнопку «Настройки» и затем закрыть появившееся меню.

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

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

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

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

В иерархии вам необходимо выбрать «Основная камера» и добавить компонент «Источник звука». Затем в окне «Проект» откройте RocketMouse ⇒ «Аудио» и перетащите значение «Музыка» в поле «Аудиоклип» в Инспекторе.

Включение и выключение звукового сопровождения

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

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

— Фон – постоянно видимое изображение;

— Галочка — изображение, которое видно только при установки переключателя на значение ВКЛ;

— Метка — которая отображается рядом с переключателем.

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

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

Теперь измените анкор SoundToggle в Иерархии с X=115 и Y=-10.

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

Теперь вам нужно выбрать изображения для дополнительных объектов Background и Checkmark.

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

— settings_btn_sound для фона

— settings_btn_sound_checkmark, для Checkmark

Выберите фон для SoundToggle в иерархии и перетащите settings_btn_sound из окна проекта в исходное изображение в инспекторе. Затем вам нужно выбрать функцию «Установить собственный размер».

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

Теперь в вашей сцене появился дополнительный элемент:

Обратите внимание: размер исходного объекта не соответствует фоновому изображению, но это не так важно — вы всегда можете настроить его размер при желании.

Отключение звуков

Вы можете изменить свойства mute компонента Audio Source, прикрепленного к MainCamera без написания специального кода. Для этого в иерархии выберите SoundToggle, после чего находясь в инспекторе найдите On Value Changed (Boolean) и нажмите «+», чтобы добавить новый элемент.

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

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

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

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

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

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

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

При помощи правой кнопки мышки в области SettingsDialog вам нужно добавить новый дочерний объект с пользовательским интерфейсом ⇒ Slider. Переименуйте его в VolumeSlider.

В иерархии выбираем VolumeSlider и устанавливаем его анкор в середине правой стороны, также устанавливаем Pivot на (1, 0,5). Наконец, установите его RectTransform X=-20, Y=-10, ширина: 270, Высота: 35.

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

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

Вот его основные части:

  • — Фон — изображение, которое показывает границы ползунка и его внутренней области;

  • — Ползунок;

  • — Изображение, которое показывает значение ползунка.

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

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

Для каждого изображения откройте редактор Sprite в Инспекторе и установите все значения для границы = 8. Нажмите «Применить».

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

  1. Выберите «Фон» и перетащите slider_background на «Исходное изображение» в инспекторе.

  2. Выберите Fill (не Fill Area) и перетащите slider_fill к исходному изображению.

  3. Выберите Handle и также перетащите slider_handle к исходному изображению.

Если вы сейчас запустите воспроизведение сцены и откроете меню настроек, то увидите:

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

Вам предстоит проделать манипуляции аналогичные тем, что вы делали при работе с переключателем. Вам нужно выбрать в иерархии VolumeSlider и в инспекторе найти On Value Changed (Single). Нажмите «+», чтобы добавить новый элемент. Теперь переместите MainCamera из иерархии к новому элементу в списке, откройте его функции и выберите AudioSource in volume в разделе Dynamic float.

Теперь вам нужно установить компонента Slider = 1. Это позволит установить ползунок громкости на то же значение, что и общая громкость музыки при запуске сцены.

Снова сохраните проект (Файл ⇒ Сохранить) и запустите воспроизведение сцены. Теперь в настройках меню громкости вы можете изменять громкость звуков и музыки.

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

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

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

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

PreviousЧасть 1NextЧасть 3

Last updated