Как сделать переход между сценами в unity по нажатию кнопки

Добавил пользователь Алексей Ф.
Обновлено: 05.10.2024

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

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

Для начала, думаю стоит рассмотреть простейший вариант как создать кнопку.

Одиночное нажатие UI кнопки

Для создания самой кнопки на канвасе заходим в меню и создаем объект кнопки.

Далее для работы с кнопкой нам нужен скрипт который будет принимать события от кнопки.

Скрипт кинем на камеру. Создадим новое событие по клику и выберем там объект камеры на котором висит скрипт.

Работает!

Выполнение действия пока нажата UI кнопка

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

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

Разберемся, что и как. Переменная sceneEnd используется для перехода на следующую сцену, в любом другом скрипте достаточно написать:

nextLevel - здесь нужно указать следующую сцену, конкретно id. Если хотите указывать по имени, тогда надо изменить переменную:

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

Настроим саму сцену. Создаем GameObject -> UI -> Image. Нажмите на переключатель 2D в окне редактора, это нужно чтобы удобней было редактировать элементы UI, после, переключите обратно. И еще надо перекрасить сразу наше изображение в черный цвет.

Не забудьте повесить скрипт на изображение.

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

Осталось убрать галочку с Image иначе будет мешать работать дальше.

Всё, можно пробовать!

Осталось уточнить некоторые детали. Чтобы всё работало как полагается, на сцене либо не должно быть других элементов UI, либо наша картинка должна быть поверх всех остальных элементов, например:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь нужно создать два перехода между состояниями анимации, как вы это делали ранее. Для этого добавьте параметр 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, который является типом перехода по умолчанию.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

— settings_btn_sound для фона

— settings_btn_sound_checkmark, для Checkmark

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

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

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

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

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

Если вы выберете отключение звука в разделе 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.

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

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

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

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

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

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

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

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

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