Как сделать всплывающее окно в unity

Добавил пользователь Дмитрий К.
Обновлено: 05.10.2024

Без окон в Unity, конечно, не обойтись - не все же вешается на игровые объекты. И как прекрасно, что не всё.
Окна представлены в Unity классом EditorWindow, однако один класс сочетает в себе огромное количество возможных вариантов.

Для рисования внутри класса нужно создать метод void OnGUI() в котором можно рисовать любым из GUI-классов.

В качестве варианта открытия окна я использовал метод с атрибутом [MenuItem( )].
Как несложно догадаться данный атрибут добавляет пункт в меню. Условия его использования - обязательно статический метод и обязательно без параметров.

Внутри функции можно увидеть один из вариантов вызова - GetWindow (true, "Window Title", true).
Однако, способов вызвать окно немаленькое количество.

Вызвать как обычную вкладку

Окно будет выглядеть как и большинство других окон в Unity, его можно будет подстраивать к краям экрана и тому подобное.

Всем привет. Такой вопрос, есть карта, на ней стоят здания (штук 8). Как сделать так, что при приближении камеры к любому из зданий, на экран всплывает окошко с описанием именно про это здание. Причем что бы окошко можно было закрыть. Заранее, спасибо.

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

Андванс Чесс Просветленный (31519) У меня нет, а в чём проблема написать? По идее столкновение очень легко детектируется, разве нет?

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.

RepeatButton, созданная в коде приведённого выше примера

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.

Простейшее применение

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), созданное в коде приведённого выше примера

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 в полностью рабочую игру.

Создавать выдвижные меню в Unity теперь гораздо проще

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

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

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

Начнём

Создаём Выдвижное Меню

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

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

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

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

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

Установите позицию кнопки и её размер, по параметрам указанным ниже

Отлично! Вы справились с первым шагом.

Добавляем Masking Panel

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

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

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

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

Добавляем Панель Содержимого

Добавьте ещё одну панель через GameObject ▸ UI ▸ Panel и следуйте инструкциям

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

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

Открывайте RW ▸ UI ▸ Menu в окне проекта, и выбирайте картинку для slide_menu_panel_9slice. Откройте sprite editor в Инспекторе и поставьте для всех значений border параметр 8. Жмите применить, Apply!

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

На этой GIF анимации вы видите как должны выглядеть обе панели содержимого и как работает компонент mask. Видите – не видите!

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

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

Дальше, мы добавим три кнопки для выдвижного меню.

Чтобы создать первую кнопку, выбирайте 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 в окне проекта как Source Image.

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

Отлично! Теперь, у вас есть три кнопки, на как насчёт их позиции? Самое время использовать shortcut!

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

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

На заметку: Параметр The Vertical Layout Group сгруппировал ваши кнопки в ряд. Вы можете изменить порядок, по которому Vertical Layout Group это делает. В вашем случае высота ваших кнопок равна высоте панели.

Настроим панель так чтобы она открывалась и закрывалась

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

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

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

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

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

Это включит компонент анимации при открытии высплывающего меню и установить правильное значение параметра isHidden. Сохраните скрипт и переключитесь обратно на Unity.В Unity выберите UIManager в Иерархии и перетащите ContentPanel из Иерархии в поле Content Panel в Инспекторе.

Теперь выберите SlideMenuButton в Иерархии. В Инспекторе найдите список обработчиков событий On Click () и добавьте новый, нажав кнопку +. После этого перетащите UIManager из Иерархии в этот новый обработчик. Затем в раскрывающемся меню выбора функций выберите UIManagerScript ▸ ToggleMenu ().

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

Добавляем вращающуюся шестерню в качестве кнопки для настроек

Чего то не хватает? Конечно! Иконки вращающейся шестерни — которая показана на GIF анимации в начале этой части.

Добавляем картинку шестерни

Во первых, добавьте картинку как дочерний объект SlideMenuButton, и настройте её анимацию во время открытия и закрытия меню.

Нажимайте ПКМ на SlideMenuButton и выбирайте UI ▸ Image чтобы создать новую картинку в качестве дочернего объекта. После этого следуйте инструкциям:

Анимируем изображение шестерни

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

Вот что вам необходимо знать:

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

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

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

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

public Animator gearImage;
Затем прокрутите вниз и найдите ToggleMenu. Добавьте следующее в конец тела метода:

Это включает компонент Animator и устанавливает для его параметра isHidden то же значение, что и для параметра isHidden аниматора в contentPanel.Сохраните файл сценария и переключитесь обратно в Unity.

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

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

Хорошая работа! Выдвижное меню завершено, и ваша сцена укомплектована.

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

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

Переключитесь на сцену RocketMouse, открыв RW ▸ Scenes в окне проекта. Дважды щелкните сцену RocketMouse, чтобы открыть ее.
Выберите GameObject ▸ UI ▸ Text, чтобы создать новый элемент Text UI. Вы также собираетесь работать с Canvas и EventSystem, пока находитесь здесь.
Выберите Текст в Иерархии и внесите следующие изменения в Инспектор:

Переименуйте его в PointsText.
Установите якоря в верхнем левом углу.
Установите Pivot на (0, 0,5).
Установите Pos X на 50 и Pos Y на -30.
Измените текст на 0, так как игрок начинает с нуля очков.
Откройте RW ▸ UI ▸ Fonts в окне Project и перетащите TitanOne-Regular в поле Font в Инспекторе.
Установите размер шрифта на 24.
Установите для параметра Horizontal Overflow значение Overflow, чтобы на этом слою могли отображаться даже самые невероятные результаты.
Измените цвет текста на белый.

Добавляем значок очков

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

Выберите его в Иерархии и выполните следующие действия:

Переименуйте его в PointsIcon.
Перетащите его поверх PointsText, чтобы добавить его в качестве дочернего, чтобы при перемещении метки, значок также перемещался вместе с ней
Установите Anchors в middle-left.
Установите Pivot на (1, 0.5).
Установите Width и Height на 32.
Поставьте PosX на -5 и PosY на 0
Откройте спрайты RocketMouse в окне проекта и перетащите изображение монеты в поле Source Image в Инспекторе.

Обновляем метку очков

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

Откройте RocketMouse ▸ Scripts в окне Project и дважды щелкните скрипт MouseController, чтобы открыть его в редакторе кода.
Когда скрипт загрузится, найдите и удалите следующие методы, которые используют старую систему графического интерфейса:

OnGUI
DisplayCoinsCount
DisplayRestartButton

Добавьте следующее, используя директиву:

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

public Text coinsLabel;

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

Сохраните файл сценария и переключитесь обратно в Unity.

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

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

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

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

Поместите это в центр canvas.

Вернись когда закончишь всё сам.

Настраиваем отображение окна перезагрузки

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

public GameObject restartDialog;;

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

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

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

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

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

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

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

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

Читайте также: