Кнопки произвольной формы в Unity3d
Как реализовать кнопку произвольной формы?
Имеется Button, имеется текстура с альфа-каналом, имеющая полностью прозрачные области (якобы там ничего и нет. Как никак, графический файл являет собой прямоугольную область). Нужно, чтобы область реагирования на клик у кнопки совпадала с непрозрачной частью наложенной на кнопку текстуры. Если просто натянуть текстуру на кнопку, последняя реагирует на нажатия в любой точке картинки, даже прозрачной.
Встречал вот такое решение, датированное далеким 2012-м, но, почему-то, кажется, что должно быть что-то более оптимальное. Во-первых, в плане оптимизации, а во-вторых: данное решение, как я понимаю, имеет явный недостаток — одна кнопка своей прозрачной областью может мешать нажать на другую.
1 ответ 1
Не совсем понятно, что вы в итоге хотите получить: простую кастомную кнопку или также карту делаете, как в приведенном вами примере или еще что-то.
Как бы то ни было, в Unity уже имеются разные инструменты для работы с такими текстурами. К примеру, есть у вас текстура со множеством точек перехода? Без проблем. Делаете картинку спрайтом, навешиваете на неё Polygon Collider 2D и делаете скрипт, который реагирует на действия, например, на наведение мыши:
Как видим, картинка имеет коллайдер, по форме «обтекающий» текстуру, при наведении на который что-то происходит.
Тоже самое можно делать и с картой. Навешиваем всё тот же Polygon Collider 2D у которого можно добавить множество областей, которые имеют множеством кастомных координат:
Твори что угодно. Вот пример при наведении на одну из областей карты:
Как пользоваться UI кнопками в Unity?
На самом деле функций у кнопок в Unity больше, чем могло бы показаться на первый взгляд и не всегда все реализуется самостоятельно с наскока без мануалов.
Если вы делаете какое-то меню, то кнопки можно использовать, как обычно, то есть, одно нажатие один вызов функции. Но если эта кнопка должна реализовывать перемещение персонажа или это кнопка модификатор, бег например, то подход необходимо изменить.
Для начала, думаю стоит рассмотреть простейший вариант как создать кнопку.
Одиночное нажатие UI кнопки
Для создания самой кнопки на канвасе заходим в меню и создаем объект кнопки.
Далее для работы с кнопкой нам нужен скрипт который будет принимать события от кнопки.
Скрипт кинем на камеру. Создадим новое событие по клику и выберем там объект камеры на котором висит скрипт.
При нажатии на кнопку мы будем просто выводить сообщение в консоль. Теперь нужно связать эту функцию с необходимым событием на кнопке.
Готово, теперь при клике будет выводиться сообщение в консоль.
Выполнение действия пока нажата UI кнопка
Вот мы и подошли к случаю, когда вам необходимо, что-либо выполнять пока нажата кнопка.
Для решения этой задачи необходимо добавить компонент Event Trigger и указать там нужные нам события, а так же прописать новый код в скрипте.
В скрипте мы запоминаем, что кнопка была нажата, а затем ждем когда ее отпустят. Все время между этими событиями выполняем полезное действие, в нашем случае выводим сообщения в консоль.
Unity UI. Button
Привет. В этот раз у нас кнопка (Button). Это первый элемент UI, который создан для непосредственного взаимодействия с пользователем, так что он и вправду очень важный. При этом кнопки ещё и довольно частый элемент в интерфейсе. Вы могли видеть в различных меню, инвентарях и других экранах.
Добавляем элемент Button
Я продолжу предыдущий проект, но просто перемещу Text и Image элементы, чтобы они нам не мешали. В следующий раз мы к ним вернемся.
Итак. Уже привычным способом добавляем на канвас кнопку:
В результате этого в центре экрана получаем новенькую кнопку:
Важной особенностью этого элемента в Unity является то, что текст внутри – это уже знакомый элемент Text. Его мы разбирали. Ещё круче то, что в Button можно положить, допустим, Image, получив кнопку с картинкой.
Инспектор кнопки содержит больше элементов, чем предыдущие, но среди них есть известные компоненты, вроде Rect Transform (положение, размер) и Image (спрайт кнопки).
Из предыдущих уроков мы узнали достаточно чтобы кастомизировать кнопку на свой вкус, например так:
И да, тень и обводка работают и с кнопками.
Компонент Button в Unity
Но разберем же и сам Button:
Чек-бокс Interactable определяет активна ли кнопка. Если флаг стоит, то на кнопку можно нажать, но если его снять, то нажатия больше не сработают (и она вообще ни на что реагировать не будет). Сама кнопка при этом тоже изменит цвет.
Transition это переходы для отрисовки кнопки в разных состояниях. Может иметь три варианта: Color Tint, Sprite Swap и Animation.
Color Tint, это когда мы выбираем один спрайт для кнопки, но меняем лишь цвета. Т.е. цветовой переход, как сейчас. У нас есть цвета для нормального состояния, при наведении курсора, при нажатии, при выделении и для неактивного состояния.
Fade Duration это длительность перехода.
Sprite Swap позволяет просто выбрать отдельные спрайты для этих же состояний:
Animation один из самых интересных. Тут можно создать полноценный контроллер анимации и задать отдельные анимации для разных состояний.
Жмём Auto Generate Animation. И сохраняем в новую папку Animations. В результате вы должны получить такой вот файлик:
Двойным кликом по файлу Button открываем Animator и видим готовую конструкцию с различными состояниями. Эти же имена должны быть указаны в самой кнопке.
Добавим анимацию при наведении на кнопку мыши. Пускай… она будет ставать немного больше. Выделяем кнопку и открываем окошко анимации:
Выбираем Highlighted и добавляем переменную Scale:
Анимация будет такая: небольшое увеличение до 30 секунды, а после будет идти уменьшение до изначального размера.
Запускаем и проверяем:
Далее идёт Navigation. Он определяет, как можно будет перемещаться по элементам UI при помощи клавиатуры. None – запрещает управление, далее следуют Автоматический, Горизонтальный, Вертикальный, Явный (Explicit) – позволит самостоятельно определить направление. А Visualize ниже нужен, чтобы отобразить перемещение наглядно:
Последний блок этого компонента это On Click (). Но для его реализации нужен скрипт, так что отложим это на другой раз.
А с кнопкой на этом всё ? А в официальных обучающих ресурсах есть ещё обучающий материал по кнопкам.
Контролы
IMGUI Control Types
There are a number of different IMGUI Controls that you can create. This section lists all of the available display and interactive Controls. There are other IMGUI functions that affect layout of Controls, which are described in the Layout section of the Guide.
Label
The Label is non-interactive. It is for display only. It cannot be clicked or otherwise moved. It is best for displaying information only.
Label, созданный в коде приведённого выше примера
Button
The Button is a typical interactive button. It will respond a single time when clicked, no matter how long the mouse remains depressed. The response occurs as soon as the mouse button is released.
Простейшее применение
In UnityGUI, Buttons will return true when they are clicked. To execute some code when a Button is clicked, you wrap the the GUI.Button function in an if statement. Inside the if statement is the code that will be executed when the Button is clicked.
RepeatButton
RepeatButton is a variation of the regular Button. The difference is, RepeatButton will respond every frame that the mouse button remains depressed. This allows you to create click-and-hold functionality.
Простейшее применение
In UnityGUI, RepeatButtons will return true for every frame that they are clicked. To execute some code while the Button is being clicked, you wrap the the GUI.RepeatButton function in an if statement. Inside the if statement is the code that will be executed while the RepeatButton remains clicked.
TextField
The TextField Control is an interactive, editable single-line field containing a text string.
Простейшее применение
TextField будет всегда отображать строку. Вы должны предоставить строку для отображения в TextField. Когда производится изменение текста, функция TextField вернет измененную строку.
TextField, созданный в коде приведённого выше примера
TextArea
The TextArea Control is an interactive, editable multi-line area containing a text string.
Простейшее применение
TextArea будет всегда отображать строку. Вы должны предоставить строку для отображения в TextArea. Когда производится изменение строки, функция TextArea вернет измененную строку.
TextArea, созданная в коде приведённого выше примера
Toggle
The Toggle Control creates a checkbox with a persistent on/off state. The user can change the state by clicking on it.
Простейшее применение
Состояние вкл/выкл представлено в виде boolean значения (true/false). Вы должны предоставить boolean в качестве параметра, чтобы флажок отобразил текущее состояние. Функция Toggle вернёт новое значение boolean, если флажок был нажат. Чтобы “поймать” этот момент, вы должны присвоить boolean значение, возвращаемое Toggle функцией.
Toggle, созданный в коде приведённого выше примера
Toolbar
The Toolbar Control is essentially a row of Buttons. Only one of the Buttons on the Toolbar can be active at a time, and it will remain active until a different Button is clicked. This behavior emulates the behavior of a typical Toolbar. You can define an arbitrary number of Buttons on the Toolbar.
Простейшее применение
Активная кнопка в Toolbar определяется целым числом (integer). Вы должны предоставить integer в качестве аргумента функции. Чтобы сделать Toolbar интерактивным, вы должны присвоить integer переменной возвращаемое функцией значение. Число элементов в массиве с содержимым, который вы передадите, определит количество кнопок, отображаемых в Toolbar.
Toolbar, созданная в коде приведённого выше примера
SelectionGrid
The SelectionGrid Control is a multi-row Toolbar. You can determine the number of columns and rows in the grid. Only one Button can be active at time.
Простейшее применение
Активная кнопка в SelectionGrid отслеживается через integer. Вы должны передать integer в качестве аргумента функции. Чтобы сделать SelectionGrid интерактивным, вы должны присвоить возвращаемое значение integer’у. Число элементов в массив с содержимым определяет количество кнопок, отображаемых в SelectionGrid. Вы также можете устанавливать количество столбцов через аргументы функции.
SelectionGrid, созданная в коде приведённого выше примера
HorizontalSlider
The HorizontalSlider Control is a typical horizontal sliding knob that can be dragged to change a value between predetermined min and max values.
Простейшее применение
Положение ползунка хранится в виде float переменной. Для отображения положения ползунка вы должны передать этот float в качестве одного из аргументов функции. Существует два дополнительных значения, которые определяют минимум и максимум. Если вы хотите, чтобы слайдер можно было двигать, присваивайте возвращаемое значение из функции Slider переменной типа float.
Horizontal Slider, созданный в коде приведённого выше примера
VerticalSlider
The VerticalSlider Control is a typical vertical sliding knob that can be dragged to change a value between predetermined min and max values.
Простейшее применение
Положение ползунка хранится в виде float переменной. Для отображения положения ползунка вы должны передать этот float в качестве одного из аргументов функции. Существует два дополнительных значения, которые определяют минимум и максимум. Если вы хотите, чтобы слайдер можно было двигать, присваивайте возвращаемое значение из функции Slider переменной типа float.
Vertical Slider, созданный в коде приведённого выше примера
HorizontalScrollbar
The HorizontalScrollbar Control is similar to a Slider Control, but visually similar to Scrolling elements for web browsers or word processors. This control is used to navigate the ScrollView Control.
Простейшее применение
Horizontal Scrollbar’ы работают идентично Horizontal Slider’ам с одним исключением: существует дополнительный аргумент, который контролирует ширину самого ползунка скроллбара.
Horizontal Scrollbar, созданный в коде приведённого выше примера
VerticalScrollbar
The VerticalScrollbar Control is similar to a Slider Control, but visually similar to Scrolling elements for web browsers or word processors. This control is used to navigate the ScrollView Control.
Простейшее применение
Vertical Scrollbar’ы работают идентично Vertical Slider’ам с одним исключением: существует дополнительный аргумент, который контролирует высоту самого ползунка скроллбара.
Vertical Scrollbar, созданный в коде приведённого выше примера
ScrollView
ScrollViews are Controls that display a viewable area of a much larger set of Controls.
Простейшее применение
ScrollViews require two Rects as arguments. The first Rect defines the location and size of the viewable ScrollView area on the screen. The second Rect defines the size of the space contained inside the viewable area. If the space inside the viewable area is larger than the viewable area, Scrollbars will appear as appropriate. You must also assign and provide a 2D Vector which stores the position of the viewable area that is displayed.
ScrollView, созданный в коде приведённого выше примера
Window
Windows are drag-able containers of Controls. They can receive and lose focus when clicked. Because of this, they are implemented slightly differently from the other Controls. Each Window has an id number, and its contents are declared inside a separate function that is called when the Window has focus.
Простейшее применение
Windows are the only Control that require an additional function to work properly. You must provide an id number and a function name to be executed for the Window. Inside the Window function, you create your actual behaviors or contained Controls.
Окно (Window), созданное в коде приведённого выше примера
GUI.changed
To detect if the user did any action in the GUI (clicked a button, dragged a slider, etc), read the GUI.changed value from your script. This gets set to true when the user has done something, making it easy to validate the user input.
A common scenario would be for a Toolbar, where you want to change a specific value based on which Button in the Toolbar was clicked. You don’t want to assign the value in every call to OnGUI(), only when one of the Buttons has been clicked.
Введение в Unity UI – часть 2
Данный урок является частью серии, которая состоит из 3 уроков, посвященных Unity UI:
И снова здравствуйте!
Из первой части этого самоучителя вы узнали, как использовать элементы графического интерфейса «Кнопка», «Текст» и «Изображение», а также изучили что такое RectTransform, Anchors и Pivots.
В итоге у вас должна была получиться простая сцена. В этом уроке вы сможете улучшить сцену, добавив анимацию, дополнительные настройки и другие элементы управления пользовательским интерфейсом, такие как Slider и Toggle.
Вы продолжите создавать проект с конца первой части. Вы также можете загрузить готовый для работы проект нажав кнопку «Загрузить материалы» в верхней или нижней части этого руководства.
Теперь откройте ваш проект в Unity, перейдите в MenuScene, возьмите бодрящий напиток и наслаждайтесь творческим процессом!
Анимированные кнопки
Зачем в сцену добавлять анимацию? Во-первых, это классно смотрится. Во-вторых, использование анимированных кнопок является практичным решением для подобных проектов. Вам понадобятся кнопки для выхода из сцены, чтобы при этом оставалось достаточно места для отображения нового диалога, который мы создадим позже.
Создание анимации
Процесс создания анимации кнопок в Unity аналогичен анимации любого другого объекта в этой программе. Чтобы создать несколько анимированных изображений и настроить их статус и переходы необходимо добавить объект «Animator».
Вот как это сделать:
В дополнение к созданию самой анимации, Unity также помещает объект «Animator» в меню StartButton. Вы готовы начать?
Анимация кнопки, которая выходит за пределы экрана
С технической точки зрения вы будете создавать сразу две анимации – кнопка будет переворачиваться и возвращаться на место.
Чтобы создать слайд-анимацию, выполните следующие действия:
Теперь сделайте Animation и Scene видимыми и попробуйте воспроизвести анимацию. Должно получиться что-то вроде этого:
Вы заметили анимацию на анкорах? Теперь нужно их переместить и вот почему: положение кнопки – это расстояние до ее анкоров. В случае StartButton это было расстояние от нижнего края. Однако в данный момент вы работаете только с вертикальным движением анимации, поэтому значение имеет только нижний край. Чтобы убедиться, что кнопка покидает экран, перемещайте ее вверх, пока она не исчезнет из вида.
Как быть, если вам неизвестна высота экрана? Как убедиться в том, что кнопка останавливается сразу после того, как она пропадает?
Ответ: измените анкоры.
Установка анкоров в верхней части сцены означает, что вы регулируете расстояние до верхней границы экрана. Таким образом, кнопка всегда будет выше края в независимости от высоты экрана.
Анимация кнопки с дополнительными вставками
Хорошая работа! Теперь у вас есть кнопка, которая покидает рабочую область. Далее вам нужно создать обратную анимацию. Для чего это нужно:
Для начала выключите меню воспроизведения анимации, чтобы кнопка перестала перемещаться по рабочей области. Для того чтобы отключить зацикливание, откройте пункт «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, который вы создали в первом уроке, и добавьте следующие переменные в адресную строку:
После этого необходимо добавить последующий метод:
Собственно, это и есть код, который вам нужен. Сохраните его в текстовом документе и переключитесь обратно на Unity.
Находясь в программе, выберите в иерархии UIManager и перетащите кнопкой мышки StartButton в поле ввода «Start Button». Таким же образом переместите SettingsButton в поле «Settings Button».
После этого выберите пункт «Настройки» в иерархии и нажмите «+» в списке «по щелчку».
Затем выберите «Настройки» в иерархии и нажмите «+» в списке «По щелчку». Перетащите UIManager из Иерархии в новый список элементов. После этого откройте меню настроек и выберите UIManagerScript ⇒ OpenSettings.
Выбрать файл ⇒ Сохранить, чтобы сохранились внесенные изменения, а затем поставьте сцену в режим воспроизведения. Дождитесь, когда кнопки перестанут двигаться, и нажмите кнопку «Настройки». В конечном итоге вы должны увидеть, как обе кнопки одновременно движутся за пределы экрана в противоположных направлениях.
Создание меню настроек
Посмотрите, как много свободного пространства для творчества мы с вами создали! Это идеальное место для размещения меню игровых настроек.
Создание панели
Как правило, диалоги могут содержать различные элементы управления, которые появляются и перемещаются вместе с диалогом. По этой причине наиболее эффективным считается создание диалога в виде панели, с установкой прочих элементов пользовательского интерфейса в качестве дополнительных объектов.
Для того чтобы создать панель необходимо выбрать GameObject ⇒ UI ⇒ Панель в меню. Это создаст полноэкранную панель в которой в качестве фона используется белое полупрозрачное изображение. В результате своих действий вы должны увидеть что-то вроде пелены, скрывающей изображение.
Не смотря на то, что пелена покрывает весь экран, размер диалога будет относительно небольшим. Для того, чтобы установить размер и месторасположение диалога необходимо выполнить следующие действия:
1.Выбрать в иерархии вкладку «Panel» и переименовать ее в SettingsDialog;
В итоге вы должны увидеть область в виде полупрозрачного прямоугольника. Именно он будет использоваться для диалога. Но для начала вам нужно установить границы размера в настройках импорта изображения.
Откройте 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 в иерархии и внесите следующие изменения:
Анимация меню настроек
Теперь у вас есть настоящее диалоговое меню с игровыми настройками. Следующим шагом шагом является его отображение, когда пользователь нажимает кнопку «Настройки».
Для этого вам нужно будет проделать практически такие же действия, как и для настройки анимации кнопок меню. Единственная разница будет заключаться в том, что диалоговое меню не будет автоматически появляться после запуска воспроизведения сцены.
В иерархии выберите 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:
Теперь при запуске воспроизведения сцены диалоговое окно больше не будет появляться сразу. Однако и при нажатии кнопки «настройки» пока ничего не произойдет. Чтобы это исправить необходимо внести значение для переменной:
Затем добавьте следующую строку в конец OpenSettings:
Это включает компонент Animator и устанавливает правильное значение для параметра isHidden.
Далее необходимо добавить новый метод CloseSettings прописав следующие значения:
Это позволит вернуть кнопки и скрыть диалоговое меню.
Далее сохраните UIManagerScript в текстовом редакторе и переключитесь обратно в редактор Unity. В иерархии вам нужно выбрать UIManager и переместить SettingsDialog в соответствующее поле в Инспекторе.
Запустите сцену и нажмите кнопку «Настройки», чтобы посмотреть, как теперь перемещаются кнопки. Чтобы иметь возможность закрывать и открывать меню необходимо добавить в диалог новую функцию.
Добавление кнопки «закрыть»
Создайте новую кнопку как дополнительный элемент SettingsDialog, щелкнув правой кнопкой мыши в меню иерархии и выбрав UI ⇒ Button. Эту кнопку необходимо переименовать в CloseSettingsButton. Обратите внимание, что на этой кнопке не будет текста, поэтому необходимо удалить объект Text, вложенный в CloseSettingsButton.
Вот как должно выглядеть меню иерархии на данный момент:
Теперь вам нужно выбрать CloseSettingsButton и выполнить следующие действия:
Теперь диалоговое меню должно выглядеть так:
Важная информация: в этом случае вы будете использовать другой метод для выделения изображения редактируемой кнопки (свойство 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. Нажмите «Применить».
Теперь вам нужно установить соответствующее изображение для каждой части слайдера:
Если вы сейчас запустите воспроизведение сцены и откроете меню настроек, то увидите:
Изменение громкости компонента AudioSource
Вам предстоит проделать манипуляции аналогичные тем, что вы делали при работе с переключателем. Вам нужно выбрать в иерархии VolumeSlider и в инспекторе найти On Value Changed (Single). Нажмите «+», чтобы добавить новый элемент. Теперь переместите MainCamera из иерархии к новому элементу в списке, откройте его функции и выберите AudioSource in volume в разделе Dynamic float.
Теперь вам нужно установить компонента Slider = 1. Это позволит установить ползунок громкости на то же значение, что и общая громкость музыки при запуске сцены.
Снова сохраните проект (Файл ⇒ Сохранить) и запустите воспроизведение сцены. Теперь в настройках меню громкости вы можете изменять громкость звуков и музыки.
Что делать дальше?
Вы очень многому научились из этого урока – создавать анимацию кнопок меню, менять их фон, изменять настройки звука и т.д.
Кроме того, вы можете использовать прикрепленные к уроку готовые (фон, анимация, звуки, изображения) материалы для работы с проектом.
В третьей, заключительной, части этой серии, вы сможете научиться создавать маски для скользящего меню. А также вы научитесь создавать более сложную анимацию и узнаете, как перенести устаревший код графического интерфейса в пользовательский интерфейс Unity.