Введение в пользовательский интерфейс Unity — часть 3

jeanwinters Комментировать

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

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

Создавать скользящее меню в Unity теперь совсем не сложно!

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

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

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

Теперь вы будете развивать навыки, чтобы улучшить свое понимание пользовательского интерфейса Unity. Во-первых, вы сделаете новое модное меню. Затем вы перенесете игровую сцену RocketMouse из старой устаревшей системы графического интерфейса в новую систему пользовательского интерфейса!

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

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

Приготовьтесь, урок начинается.

Создание скользящего меню

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

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

Добавление кнопки открытия меню

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

Выберите GameObject > UI > Button в меню. Переименуйте только что добавленную кнопку в SlideMenuButton и удалите вложенный объект Text, поскольку для кнопки не нужна метка.

Выберите SlideMenuButton в Иерархии. Откройте RW > UI > Menu в окне проекта. Перетащите изображение btn_9slice_normal в поле Source Image в Инспекторе.

Установите положение и размер кнопки следующим образом:

  1. Установите якоря в нижний левый угол.
  2. Установите для Pos X и Pos Y значение 80.
  3. Установите для ширины и высоты значение 64.

Установка параметров кнопки в окне Inspector редактора Unity

Хорошо сделано! Это первый шаг.

Добавление панели-маски

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

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

Выберите GameObject > UI > Panel, чтобы создать первую панель. Это добавит панель, которая будет маской, в Иерархию. Выберите панель и выполните следующие действия:

  1. Переименуйте игровой объект в MaskPanel.
  2. Перетащите его на SlideMenuButton, чтобы добавить в качестве дочернего объекта.
  3. Установите якоря по центру вверху.
  4. Установите Pivot на (X: 0,5, Y: 0)
  5. Установите для Pos X и Pos Y значение 0.
  6. Установите ширину на 64 и высоту на 192.
  7. Добавьте компонент маски, нажав кнопку Add Component и выбрав UI > Mask.
  8. Снимите флажок Show Mask Graphic в диалоговом окне компонента маски.

Установка параметров панели-маски в окне Inspector редактора Unity

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

Добавление основной панели

Добавьте еще одну панель, выбрав GameObject > UI > Panel и выполнив следующие действия:

  1. Переименуйте игровой объект в ContentPanel.
  2. Добавьте его как дочерний элемент MaskPanel.

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

  1. Установите якоря на значения stretch.
  2. Установите Left, Top, Right и Bottom на 0.
  3. Установите Pivot на (X: 0,5, Y: 1)

Установка параметров основной панели в окне Inspector редактора Unity

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

Откройте RW > UI > Menu в окне проекта и выберите изображение slide_menu_panel_9slice. Откройте редактор спрайтов в Инспекторе и установите для всех границ значение 8. Нажмите Apply!

После этого выберите ContentPanel в Иерархии, а затем перетащите slide_menu_panel_9slice из окна Project в поле Source Image в Инспекторе.

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

Пример использования панели-маски в редакторе Unity

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

Добавление кнопок

Затем вы добавите три кнопки в скользящее меню.

Чтобы создать первую кнопку, выберите GameObject > UI > Button. Переименуйте кнопку в AboutButton и удалите дочерний объект Text.

Перетащите кнопку AboutButton на ContentPanel в Иерархии, чтобы добавить ее в качестве дочернего элемента. Откройте RW > UI > Menu в окне проекта и перетащите slide_menu_btn_about в Source Image в инспекторе. Нажмите на Set Native Size. Пока не беспокойтесь о позиции.

Щелкните правой кнопкой мыши на AboutButton и выберите Duplicate (Ctrl / Cmd + D), чтобы создать еще одну кнопку. Переименуйте дубликат в AchievementsButton и используйте slide_menu_btn_achievements из RW > UI > Menu в окне проекта в качестве исходного изображения.

После этого продублируйте кнопку еще раз. Назовите его LeaderboardsButton и используйте slide_menu_btn_leaderboards в качестве исходного изображения.

Хорошо! Теперь у вас есть три кнопки, но как насчет их расположения? Пора использовать простой способ!

Выберите ContentPanel в Иерархии. Добавьте компонент Vertical Layout Group и вуаля! Вы должны увидеть три кнопки, аккуратно составленные в пространстве.

Вот как это должно выглядеть:

Три кнопки главной панели в редакторе Unity

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

Как заставить панель скользить вверх и вниз

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

Следуйте этим шагам:

  1. Выберите ContentPanel в Иерархии и откройте окно Animation.
  2. Создайте новый клип, нажав кнопку Create.
  3. Назовите анимацию SlidingMenuDown и сохраните ее в RW > Animations.
  4. Щелкните на отметку 1:00 на шкале времени и включите запись в режиме просмотра анимации. Включите запись, нажав кнопку с красным кружком, а затем убедитесь, что элементы управления воспроизведением станут красными.
  5. Установите параметр Top на значение 192 в Инспекторе, а затем остановите запись.

    6. Установка параметра Top в окне Inspector редактора Unity

  6. Откройте RW > Animations в окне проекта и выберите SlidingMenuDown. Снимите флажок Loop Time в Инспекторе.

    7. Установка флажка повторения анимации в окне Inspector редактора Unity

  7. Выберите ContentPanel в Иерархии и откройте окно Animator. Скопируйте и вставьте состояние SlidingMenuDown, чтобы создать дубликат.

    8. Создание состояния анимации в окне Animator редактора Unity

  8. Переименуйте дубликат в SlidingMenuUp и установите его Speed равным -1 в Inspector.

    9. Установка параметра скорости для состояния анимации в окне Inspector редактора Unity

  9. Создайте два перехода: один от SlidingMenuUp к SlidingMenuDown, а другой — в противоположном направлении.

    10. Создание переходов анимации в окне Animator редактора Unity

  10. Добавьте новый параметр Bool с именем isHidden и установите для него значение по умолчанию true.

    11. Добавление параметра в окне Animator редактора Unity

  11. Выберите переход от SlidingMenuUp к SlidingMenuDown и в списке условий установите для isHidden значение true.

    12. Установка условий для перехода состояний анимации в окне Animator редактора Unity

  12. Выберите переход от SlidingMenuDown к SlidingMenuUp, и на этот раз установите условия, чтобы isHidden было равно false.

    13. Установка условий для перехода состояний анимации в Unity

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

    14. Создание нового состояния анимации в окне Animator редактора Unity

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

    15. Установка состояния анимации для использования по умолчанию и создание перехода анимации в окне Animator редактора Unity

  15. Выберите ContentPanel в Иерархии и откройте окно Animation. Создайте новый анимационный клип и назовите его Idle.

    16. Создание нового анимационного клипа в окне Animator редактора Unity

  16. В первом ключевом кадре установите Top на 192. Затем остановите запись.

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

Добавление кода для переключения меню

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

public Animator contentPanel;

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

public void ToggleMenu() 
{
    bool isHidden = contentPanel.GetBool("isHidden");
    contentPanel.SetBool("isHidden", !isHidden);
}

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

Сохраните скрипт и вернитесь в Unity, выберите UIManager в Иерархии и перетащите ContentPanel из Иерархии в поле Content Panel в Инспекторе.

Настройка параметров компонента скрипта UI Manager Script в окне Inspector редактора Unity

Теперь выберите SlideMenuButton в Иерархии. В Инспекторе найдите список обработчиков событий On Click () и добавьте новый, нажав кнопку +.

После этого перетащите UIManager из Иерархии в этот новый обработчик. Затем в раскрывающемся меню выбора функции выберите UIManagerScript > ToggleMenu ().

Установка функции обработчика нажатия на кнопку в окне Inspector редактора Unity

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

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

Добавление вращающегося значка шестеренки

Вам не кажется, что чего-то не хватает? Конечно! Значок вращающейся шестеренки на самой кнопке открытия — тот, что показан на анимированном GIF-изображении в начале урока.

Добавление изображения шестеренки

Сначала добавьте изображение в качестве дочернего объекта SlideMenuButton и настройте его на анимацию во время анимации открытия и закрытия меню.

Щелкните правой кнопкой мыши на SlideMenuButton и выберите UI > Image, чтобы создать новое изображение в качестве дочернего объекта.

После этого выполните следующие действия:

  1. Переименуйте изображение в GearImage.
  2. Откройте RW > UI > Menu в окне проекта и перетащите изображение slide_menu_gear в поле Source Image в Инспекторе.
  3. Нажмите на Set Native Size.

Установка параметров для изображения кнопки в окне Inspector редактора Unity

Анимация изображения шестеренки

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

Вот что нужно знать:

  • Продолжительность анимации должна быть идентична анимации скользящей панели. Все анимации в этом уроке длятся ровно одну секунду.
  • Шестеренка должна вращаться на 360 градусов вокруг оси Z (вращение Z).
  • Используйте то же имя isHidden для имени параметра и установите для него значение по умолчанию true.
  • Не забудьте отключить цикл и компонент Animator.

Если нужны более подробные инструкции, откройте спойлер ниже.

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

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

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

public Animator gearImage;

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

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

    gearImage.SetBool("isHidden", !isHidden);
}

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

Сохраните файл скрипта и вернитесь в Unity.

В Unity выберите UIManager в Иерархии. Перетащите GearImage в поле Gear Image в Инспекторе.

Установка изображения для параметра UIManager в окне Inspector редактора Unity

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

Выдвигающееся меню настроек для игры в Unity

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

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

Обновление сцены RocketMouse для использования пользовательского интерфейса Unity

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

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

Переключитесь на сцену RocketMouse, открыв RW > Scenes в окне Project. Дважды нажмите на сцену RocketMouse, чтобы открыть ее.

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

Создание текстового объекта в окне Hierarchy редактора Unity

Выберите объект Text в Иерархии и внесите следующие изменения в Инспекторе:

  1. Переименуйте его в PointsText.
  2. Установите якоря в верхний левый угол.
  3. Установите Pivot на (0, 0.5).
  4. Установите Pos X на 50 и Pos Y на -30.
  5. Измените Text на 0, так как игрок начинает с нуля.
  6. Откройте RW > UI > Fonts в окне проекта и перетащите TitanOne-Regular в поле Font в Инспекторе.
  7. Установите размер шрифта на 24.
  8. Установите для параметра Horizontal Overflow значение Overflow, чтобы на метке отображались даже самые невероятные оценки.
  9. Измените цвет текста на белый.


Настройка параметров текстового объекта в окне Inspector редактора Unity

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

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

Выберите GameObject > UI > Image, чтобы создать новое изображение. Выберите его в Иерархии и выполните следующие действия:

  1. Переименуйте его в PointsIcon.
  2. Перетащите его поверх PointsText, чтобы добавить его в качестве дочернего элемента, чтобы при перемещении метки также перемещался значок.
  3. Установите якоря в среднее левое положение.
  4. Установите Pivot на (1, 0.5).
  5. Установите для ширины и высоты значение 32.
  6. Установите Pos X на -5 и Pos Y на 0.
  7. Откройте RocketMouse > sprites в окне Project и перетащите изображение монеты в поле Source Image в Инспекторе.

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

Обновление метки игрового счета

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

Откройте RocketMouse > Scripts в окне проекта и дважды нажмите на скрипт MouseController, чтобы открыть его в редакторе кода.

Когда скрипт загрузится, найдите и удалите следующие методы, которые используют старую систему графического интерфейса:

  • OnGUI
  • DisplayCoinsCount
  • DisplayRestartButton

Добавьте следующую директиву using:

using UnityEngine.UI;

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

public Text coinsLabel;

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

coinsLabel.text = coins.ToString();

Сохраните файл скрипта и вернитесь в Unity.

В Unity выберите Mouse в Иерархии и найдите компонент MouseController. Перетащите PointsText в поле Coins Label в Инспекторе.

Установка параметра для компонента скрипта MouseController в окне Inspector редактора Unity

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

Пример метки для отображения собранного количества монет в редакторе Unity

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

Добавление диалогового окна перезапуска

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

Панель с текстом и двумя кнопками для игры в редакторе Unity

Поместите его в центр холста.

Панель для игры в центре сцены редактора Unity

Вернитесь, когда сделаете все сами!

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

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

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

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

public GameObject restartDialog;

Затем добавьте следующую строку кода в Start, чтобы скрыть диалог в начале:

restartDialog.SetActive(false);

Прокрутите вниз и добавьте следующую строку в конец HitByLaser:

restartDialog.SetActive(true);

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

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

public void RestartGame() 
{
    SceneManager.LoadScene(SceneManager.GetActiveScene().name);
}

public void ExitToMenu() 
{
    SceneManager.LoadScene("MenuScene");
}

Вы скоро свяжете их с соответствующими кнопками.

Сохраните файл скрипта и вернитесь в Unity.

В Unity выберите Mouse в Hierarchy и перетащите RestartDialog в поле Restart Dialog в Инспекторе.

Установка игровому объекту Mouse параметра диалогового окна в настройках Inspector редактора Unity

Затем выберите RestartButton в Иерархии и прокрутите вниз до списка On Click ().

Нажмите на +, чтобы добавить новый элемент. После этого перетащите Mouse из Иерархии к новому элементу. В раскрывающемся меню выбора функции выберите MouseController > RestartGame ().

Установка функции обработчика при нажатии на кнопку в окне Inspector редактора Unity

Теперь выберите ExitButton и повторите процесс, но на этот раз выберите функцию MouseController > ExitToMenu ().

Сохраните и запустите сцену и направьте мышь на линию огня лазера. Вы должны увидеть диалог сразу после проигрыша. Если вы нажмете на Restart, вы перезапустите игру. Если вы нажмете наExit, то вернетесь в главное меню.

Появление диалогового окна с кнопками в игре, сделанной на Unity

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

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

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

Если у вас есть вопросы или комментарии, пишите их ниже.

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

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

Комментировать

Почта не публикуется.Обязательные поля отмечены *