Как сделать меню в юнити

5

Unity Tips

Sharing Unity tips to help others (and myself) learn!

Customising Unity’s Menu Bar using MenuItem

1 Mastering the basics

1.1 Vanilla MenuItem

To add a new menu item to Unity’s menu bar, you simply need a static void method in any class in your project and decorate it with the MenuItem attribute. The method must be static , but can be private . The following example will give you the new menu My Custom Menu , with the menu item Hello World! . Clicking on this will reveal the classic greating in the console.

Note: Import the UnityEditor namespace to access MenuItem using UnityEditor

Watch Out! The MenuItem Attribute is in the UnityEditor namespace! Make sure you use it in an editor-only script, or ensure this code is wrapped in #if UNITY_EDITOR and #endif . Otherwise, your builds will fail!

1.2 How it works

When Unity recompiles your scripts, it searches through all the scripts in your project and looks for methods which are decorated with the MenuItem attribute. When it finds one, it creates a new menu item with the given path and executes the code in the method when you click that menu item.

1.3 Nesting

To nest menu items, you can simply add a / in the menu path, and it will add another sub menu to you menu!

I don’t know what the limit is, but I haven’t found it yet!

1.4 Using const for the path

The above examples are great and get us going quickly. However, there is an immediate improvement we can make to make our lives easier going forward: storing the menu path in a static const field. This is an improvement because when we get onto more complex menu customisation we will need to repeat this path in multiple places in our code, and we definitely don’t want the same string hardcoded several times! The following example has the exact same functionality as the first, but it is better!

Anticipating that we will most likely add more than one menu item going forward, we can take our static const approach one step further to avoid string repitition — saving you time and errors later on!

1.5 Ordering

Unless you want your menu items to randomly reorder themselves whenever they feel like it, you will definitely want to define an order in your MenuItem attributes. Without one, Unity will sometimes rearrange the menu items, which will wreak havok on your muscle menu that will develop when navigating the menu!

You specify the order by using the priority field. The menu items will be arranged with the smallest priority at the top and the largest priority at the bottom.

1.6 Divide and conquer

It is possible to add a dividing line, as shown above, by having a gap of more than 10 in their priorities. Note that Item3 has a priority of 3 and Item4 has a priority of 14. This is a gap of 11, which fufills the requirement of more than 10.

1.7 Hijacking Unity’s built in menus

When providing your path to MenuItem , you don’t have to use a custom path. You can hitch a ride off of one of Unity’s existing menus. For example, you could add your own menu item to the File or Edit Menus. To do this, simply use the name of the menu you want to use in the path.

2 More advanced usage

Just when you thought you had mastered MenuItem , there’s more! You have probably seen in Unity’s own menus, and menus of plugins, that you can do much more with menu items. Things like greyed out/disabled menu items, checkmarks/ticks and keyboard shortcuts. You can do these things too if you read on!

2.1 Disabled items

It is very simple to disable the use of a certain menu item, yet the Unity docs are not clear. To disable a menu item, we must make use of what Unity called a Validation Function. A Validation Function is a static bool method which gets executed before Unity displays your custom menu to you. To make a disabled menu item, simply return false from this method. Conversely, returning true (or not having a Validation Function) will cause the menu item to be enabled.

The confusion comes in by assigning the Validation Function. To do so, you must use the exact same MenuItem attribute as before, with the exact same path given as the first parameter. This tells Unity which menu item to apply this Validation Function to. You must then give true as the second parameter, which tells Unity that this is a Validation Function.

The above is made with the following code. Note how Item1 has a Validation Function assigned which returns false. This will mean Item1 is always disabled. Also note that Item2 has no Validation Function, which acts the same as a Validation Function which returns true, meaning Item2 is always enabled.

You can have some fun with this…

2.2 Checkmarks/ticks

The next feature of menu items is the ability to show a checkmark or a tick next to a menu item. This can be helpful, for example, to indicate if a certain setting is enabled or disabled.

In order to add checkmarks to menu items, we make use of the very same Validation Function from the previous section. As this method is called before Unity displays the menu to us, we can make use it to add or remove the checkmark to the menu item.

To add or remove the checkmark, we use the method Menu.SetChecked . The first parameter is the path to the menu item. Once again, this is why we store the menu path in the const field because we end up using it so much! The second argument is a boolean representing whether we have a checkmark or not.

We can achieve a very simply toggling action with the following code.

Once again, you can have some fun with this…

BONUS!

If you want the setting to persist between Unity editor sessions (which the above example will not) you can simply modify the above example to use EditorPrefs as shown below. The only modification changing IsSettingEnabled to a property which implements EditorPrefs.

2.3 Keyboard shortcuts

The final topic is assigning keyboard shortcuts to menu items. This is, once again, a simple thing to do, and can save you lots of time for commonly used menu items.

To add a keyboard shortcut to a menu item, you need to suffix a string which specifies the shortcut to the end of the menu item path. You must have a space between your menu item and the shortcut specifier.

In order to make it as unclear as possible, Unity introduced some some symbols which represent the modifier keys Control/Command, Shift and Alt keys.

Combining these modifier keys with any the following key codes gives you a load of options to create keyboard shortcuts.

So, to assign the keyboard shortcut Ctrl+Shft+I to a menu item, you simply suffix the string %#I to the end of your menu item path. You must have a space between the end of your menu item name and the keyboard shortcut for it to register.

Note that to assign a shortcut of a single key on its own, without any modifiers, you must use the underscore _ symbol.

Unity Create Main Menu With UI Canvas

User Interface (UI) is a combination of graphics, text, and buttons that plays a key role in providing an enjoyable gaming experience.

Main Menu is one of the most prominent parts of the UI since it’s usually the first thing that players see when loading the game.

In this tutorial, I will be showing how to create a Main Menu in Unity using UI Canvas.

Step 1: Design the Main Menu

• Create new Canvas (GameObject -> UI -> Canvas)

• Create a new Image by right-clicking on Canvas -> UI -> Image (This will be Menu Background)

• Assign the Texture to a newly created Image. You can use the image below (Right-click -> Save as. ), make sure its Texture Type is set to ‘Sprite (2D and UI)’ in Import Settings:

• Create a new script, call it SC_BackgroundScaler then paste the code below inside it:

SC_BackgroundScaler.cs

• Attach SC_BackgroundScaler script to a newly created image. (Upon attaching, the script will automatically scale the background image to fit the screen):

Now we will create Menu buttons:

• Right-click on Canvas -> Create Empty then rename it to «MainMenu». This Object will contain the UI elements for the Main Menu.
• Create new Text by Right-Clicking on «MainMenu» object -> UI -> Text. This will be a title text.
• Change the Text to your game name (In my case it’ll be «Game Title»):

• Change paragraph alignment to middle center and Color to white:

• Lastly, change the Font Size to something bigger (for example 30) and Font Style to Bold.

However, you will notice that the text disappeared, that’s because the Rect Transform dimensions are too small. Change them to something bigger (ex. Width: 400 Height: 100), also move it up slightly by changing Pos Y to 50:

• Create 3 buttons (Right Click on «MainMenu» object -> UI -> Button 3 times) and move each button down by 30 pixels.
• Change Text of each button to «Play Now», «Credits» and «Quit» respectively:

• Duplicate «MainMenu» object and rename it to «CreditsMenu» remove all the buttons inside it except «Quit» button and change its Text to «Back».
• Change the font size of a title Text in «CreditsMenu» to something smaller (ex. 14), change its Pos Y to 0 and type the credits text.

Step 2: Program Menu Buttons

Now we need to make the Buttons functional by creating a script.

• Create a new script, call it SC_MainMenu then paste the code below inside it:

SC_MainMenu.cs

• Attach SC_MainMenu to the Canvas object
• Assign «MainMenu» Object to Main Menu variable
• Assign «CreditsMenu» Object to Credits Menu variable

The last step is to bind SC_MainMenu functions to each Button.

• Select the Button and in «On Click ()» click (+) to add a new element variable:

• Assign the Object with SC_MainMenu script (Canvas) to the Button «On Click ()» and select the function that corresponds the button («PlayNowButton()» for Play Now Button, «CreditsButton()» for Credits Button, «QuitButton()» for Quit Button and «MainMenuButton()» to Back Button in Credits Menu).

The Main Menu is now ready.

NOTE: PlayNowButton() function in SC_MainMenu.cs will attempt to load a Scene called «GameLevel». So make sure you have a scene with the name «GameLevel», which is also added to Build settings (alternatively you can change the name in that line to correspond to the name of the Scene you want to load).

Interested in learning more about UI creation? Check our tutorial on How to Make Mobile Touch Controls in Unity.

Unity UI. Создаём меню. Часть первая

Привет. Мы узнали, что такое кнопки, изображения, текст. Пробовали их разные параметры. Этих знаний уже достаточно, чтобы сделать что-то своё. Предлагаю в этот раз не только затронуть новый UI элемент Unity — Panel, но и создать своё меню для потенциальной игры. Бета-версию меню =)

Упомянутый Panel по сути дела является обычным Image, но так как он вынесен отдельно, то стоит попробовать и его. Чаще всего этот элемент можно увидеть в виде фона для других фрагментов UI. А никаких взаимодействий пользователя с ним не предусмотрено.

Создаём своё меню

Для начала определимся с фоном. Стандартный фон в 2D проекте – не самый приятный цвет заливки:

Его можно отрегулировать в камере:

Я большой фанат живых бекграундов. Т.е. чтобы на фоне загружался какой-то уровень и что-то происходило. Но пока для такого рановато.

Так что сделаем что-то максимально минималистичное. Я предлагаю выбрать… Белый!

Определимся и с тем, что вообще будет на экране. Я хочу добавить 4 кнопки (Play, Continue, Settings и Exit), заголовок (Text) и для кнопок и заголовка будет две фоновые панели.

В соответствии с этим гайдом: Unity UI. Более продвинутые Button добавляю несколько круглых кнопок с иконками в пустого родителя. Родителю добавлю компонент Vertical Layout Group:

Выравнивание дочерних объектов ставим в центре. Кнопкам прописываем текст: Play, Continue, Settings, Exit. Шрифт для них это бесплатный Montserrat-Bold, а иконки взяты из бесплатного пака 64 Flat Game Icons.

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

Не забывайте и указать Scale для Canvas, чтобы он не сильно искажался на разных устройствах!

Если всё сделано верно, то уже получаем такую вот симпатичную картинку:

Можно пойти более брутальным путём и использовать вместо круглых кнопок – прямоугольные:

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

Привет, Panel!

Теперь кнопкам нужен фон. Для этого добавляем в канвас элемент Panel:

За внешний вид Panel отвечает компонент Image. Пожалуй, сделаю его прозрачнее, а цвет укажу соответствующий кнопкам. И, конечно же, круглые углы:

Само меню с кнопками вкладываю в панель, подгоняю размеры:

Добавляем заголовок

Помните компонент, который сделал списком наши кнопки? Vertical Layout Group. Предлагаю добавить новый родительский элемент с этим компонентом:

Туда добавить новую Panel, которая будет фоном для заголовка, и переместить уже готовую с кнопками:

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

Для заголовка я выбрал шрифт JosefinSans-Regular и указал красноватый цвет.

И ещё раз

Разберём ещё раз всё. Пошагово.

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

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

Именно поэтому в панелях у нас заблокированы все значения размещения, кроме высоты:

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

Родитель кнопок тоже содержит элемент Vertical Layout Group, он отвечает за вертикальное расположение кнопок меню.

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

На этом пока всё, но в следующий раз я расскажу, как добавить анимированный фон из сетки иконок. Спасибо за внимание!

Как сделать меню в юнити

Рисование, Дизайн и Разработка игр

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

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

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

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

Вы помните старую систему пользовательского интерфейса Unity? Нужно было написать весь код графического интерфейса в OnGUI . Это было медленно, неэффективно и ориентировано на программистов, что противоречило визуальной природе Unity. Многие разработчики предпочли вместо этого использовать сторонние инструменты, такие как NGUI.

К счастью, Unity Technologies прислушалась к отзывам сообщества и разработала новую систему, выпущенную в Unity 4.6.

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

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

• Анимировать кнопки.
• Создавать диалоговое окно настроек, которое вставляется в сцену.
• Использовать больше элементов управления графическим интерфейсом, таких как текст, слайдер, панель и маска.

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

Это руководство предназначено для тех, кто знаком с редактором Unity. Загляните в серию уроков «Введение в Unity», если это ваше первое родео. Хорошая новость заключается в том, что, поскольку руководство посвящено системе пользовательского интерфейса, оно на 95% не содержит скриптов!

Примечание. Имейте в виду, что в уроке не рассматривается создание самой игры. Цель здесь — предоставить введение в систему пользовательского интерфейса Unity и познакомить вас с ее компонентами.

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

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

Это все, что вам нужно!

Создание MenuScene

Откройте в Unity начальный проект Introduction to Unity UI Part 1 Starter.

Игра RocketMouse уже настроена, и все ее ресурсы находятся в отдельной папке. Вы будете работать в папке RW, которая содержит папку Scenes. Теперь вы создадите новую сцену для работы. В строке меню выберите File > New Scene, чтобы создать новую пустую сцену.

Лучше всего сразу сохранить сцену. Откройте диалоговое окно Save Scenes, выбрав File > Save Scenes. Затем введите MenuScene в качестве имени сцены и сохраните в папке RW / Scenes рядом со сценой RocketMouse.

Импортирование изображений и шрифтов

Первым делом в вашем списке дел нужно добавить ресурсы в сцену, поэтому распакуйте пакет UI Assets в проводнике файлов. Там вы найдете две папки: Menu и Fonts.

Примечание. Папка Menu содержит фоновые изображения, кнопки, значки и другой игровой арт, который предоставлен сайтом Game Art Guppy, где вы можете найти множество другой графики для тренировочных игр. Вдобавок два шрифта от DaFont. находятся в папке Fonts. Вы можете поблагодарить Rodrigo Fuenzalida за шрифт Titan One и Draghia Cornel за шрифт DCC Dreamer.

Приятно поддерживать аккуратную структуру папок, поэтому в окне Project создайте новую папку внутри RW с именем UI.

Из проводника файлов перетащите папки Menu и Fonts в папку UI в окне Project:

Как только ассеты будут в проекте, проверьте их настройки импорта. Убедитесь, что все ресурсы в UI / Menu установлены на тип текстуры Sprite (2D и UI).

У-у-у! Вы закончили настройку и готовы создать свой первый элемент пользовательского интерфейса с помощью системы Unity UI.

Добавление вашего первого элемента пользовательского интерфейса

Первый элемент, который вы создадите — это фоновое изображение для сцены меню.

На верхней панели выберите GameObject > UI > Image. Это добавляет в сцену объект с именем Image. Вы должны увидеть его в Иерархии как дочерний элемент Canvas. Все элементы должны быть размещены на холсте. Если у вас его нет, Unity создаст его автоматически.

Выберите изображение и установите его положение на (X: 0, Y: 0). Вы только что открыли для себя Rect Transform:

Примечание. Rect Transform — это пользовательский интерфейс, эквивалентный Transform. Он позиционирует, вращает и масштабирует элементы пользовательского интерфейса на холсте. Вы будете часто использовать его в этом руководстве.

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

1. Image
2. Canvas
3. EventSystem

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

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

Canvas — это корневой объект для всех ваших элементов пользовательского интерфейса. Помните, Unity создает его за вас, когда вы добавляете свой первый элемент пользовательского интерфейса. Он имеет несколько свойств, которые позволяют вам управлять отрисовкой пользовательского интерфейса.

EventSystem обрабатывает и направляет входные события объектам в сцене. Он также отвечает за управление Raycasting. Как и в случае с Canvas, пользовательскому интерфейсу требуется система событий, поэтому Unity автоматически добавляет ее.

Настройка фонового изображения меню

Первое, что нужно сделать, это переименовать изображение. В Иерархии выберите Image и переименуйте его в Background.

Затем откройте RW > UI > Menu в окне проекта и найдите изображение menu_background. Перетащите его в поле Source Image компонента Image, игрового объекта Background, в окне Inspector:

Теперь у вас есть фоновое изображение вместо белого изображения по умолчанию. Но такой фон слишком маленький, а соотношение сторон неправильное.

Чтобы исправить ситуацию, найдите кнопку Set Native Size в Инспекторе и нажмите на нее для установки размера 1136 x 640.

Теперь это похоже на правильный фон.

Ой-ой. Есть еще одна проблема.

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

Примечание. Изначально игра была разработана для iPhone с дисплеями диагональю 3,5 и 4 дюйма. Вот почему вся игровая графика поддерживает разрешения 1136 x 640 и 960 x 640. Скоро вы увидите, как пользовательский интерфейс может адаптироваться к различным разрешениям игры.

Вы решите эту проблему, используя Canvas Scaler.

Использование масштабатора холста

Вы воспользуетесь инструментом Canvas Scaler, чтобы настроить фоновое изображение.

Во-первых, вам нужно знать, что отображение не является результатом ошибки. С точки зрения Unity, у вас есть игровое представление — или окно просмотра — настолько маленькое, что оно отображает только ту часть изображения, которая умещается в игровом представлении.

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

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

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

Если вы когда-либо игнорировали указания своего дизайнера, вы знаете, что за это нужно платить. Удобство работы и различные разрешения важны, но постарайтесь сделать так, чтобы ваш дизайнер тоже был доволен.

Canvas Scaler спешит на помощь! По умолчанию каждый холст включает масштабатор холста.

Выберите Canvas в Hierarchy, и в Inspector вы должны увидеть компонент Canvas Scaler:

Canvas Scaler имеет три режима масштабирования:

• Constant Pixel Size: заставляет элементы пользовательского интерфейса сохранять одинаковый размер пикселя независимо от размера экрана. Это значение Canvas по умолчанию.
• Scale With Screen Size: размеры и расположение элементов пользовательского интерфейса в соответствии с указанным разрешением. Если текущее разрешение больше, чем указанное разрешение, холст сохранит исходное разрешение, увеличивая при этом размеры элементов для соответствия целевому разрешению.
• Constant Physical Size: позиции элементов пользовательского интерфейса указываются в физических единицах, таких как миллиметры или точки. Это требует правильного сообщения о разрешении экрана.

Измените режим компонента на Scale With Screen Size и установите для Reference Resolution значение (X: 1136, Y: 640). Также сдвиньте Match Width or Height до упора вправо или просто введите 1 в поле ввода.

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

Измените разрешение просмотра игры, чтобы увидеть, как ваша игра может выглядеть в другом разрешении, например, на iPhone Wide 480 x 320. Вы заметите, что игра по-прежнему выглядит хорошо!

Примечание. Если вы не видите ни одного из вариантов iPhone, скорее всего, вы работаете для другой платформы. В строке меню выберите File > Build Settings. В диалоговом окне настроек сборки под настройками платформы обязательно выберите iOS.

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

Теперь переключитесь в режим просмотра Scene, и вы увидите, что размер холста не изменился при изменении размера представления Scene. Боковые края экрана аккуратно обрезаны, а центральная часть полностью видна. Это результат установки Match Width or Height на 1. Он отлично работает для ваших целевых разрешений.

Это старые версии дизайна! В «альбомном» режиме экраны современных телефонов намного шире. Переключитесь на такой режим iPhoneX, и возникнет совершенно новая проблема.

Если вы измените значение Match Width or Height обратно на ноль, оно будет работать для iPhone 5 и iPhoneX, но будет отображаться в виде почтового ящика на iPhone 4.

К счастью, для этого есть другие решения. Хотя у Canvas Scaler есть два других режима масштабирования, Expand и Shrink, есть еще один полезный компонент, который мы можем использовать специально для фоновых изображений.

Верните Canvas Scaler в положение Match Width or Height со значением 1 и установите для игрового представления значение iPhoneX. Ему снова должно понравиться изображение выше.

Теперь выберите Background и добавьте компонент Aspect Ratio Fitter. Он автоматически установит значение Aspect Ratio на текущее соотношение Rect Transform изображения. Переключите Aspect Mode на Envelope Parent. Размер изображения автоматически изменится, чтобы снова заполнить весь экран.

Уф, проделано много работы. И мы только добавили фоновое изображение! Но правильная настройка Canvas Scaler и фона упростит работу в будущем. Сделав это несколько раз, вы обнаружите, что настройка настолько проста, что у вас едва ли будет время моргнуть, прежде чем вы закончите.

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

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

Добавление изображения заголовка

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

Откройте окно Scene и на верхней панели выберите GameObject > UI > Image. Это добавит еще одно изображение в качестве дочернего элемента Canvas:

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

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

1. Выберите Image в иерархии и переименуйте его в Header.
2. Откройте папку Menu в окне проекта и найдите изображение header_label.
3. Перетащите изображение в поле Source Image в Инспекторе.
4. Нажмите Set Native Size в Инспекторе.

Теперь вы будете работать с компонентом Rect Transform, чтобы расположить изображение.

Rect Transform, Anchors и Pivot

Если вы работали с Unity до этого или прошли другие уроки по Unity на этом веб-сайте, возможно, вы имели некоторое представление о компоненте Transform. Если нет, ничего страшного. Transform — это инструмент, который может позиционировать, вращать и масштабировать объекты в сцене. Вот как это выглядит:

Вы увидите компонент Transform, когда выберете любой тип GameObject, не относящийся к пользовательскому интерфейсу, в окне Hierarchy. Однако, если вы выберете любой элемент пользовательского интерфейса, например заголовок, вы увидите другой компонент с именем Rect Transform.

Как видите, Transform и Rect Transform выглядят по-разному. Кроме того, Rect Transform может изменять свой внешний вид в зависимости от настроек привязки. Например, это может выглядеть так:

Здесь вместо Pos X, Pos Y, Width и Height у вас есть Left, Top, Right и Bottom.

Вас интересует настройка привязки, которая так резко меняет внешний вид Rect Transform? Продолжайте читать!

Anchors

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

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

Чтобы увидеть различные Anchors Presets, выберите Header в Иерархии и щелкните прямоугольник над полем Anchors в компоненте Rect Transform.

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

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

Как видите, настройки якорей управляют тем, как ваш элемент пользовательского интерфейса адаптируется к изменениям размера экрана.

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

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

Пользовательские якоря

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

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

Здесь пригодится еще один инструмент Unity UI. Если вы знакомы с Unity, то знаете, что сочетания клавиш Q, W, E и R позволяют переключать инструменты Hand, Move, Rotate и Scale соответственно. В новой системе пользовательского интерфейса RectTool был добавлен для кнопки T. При выбранном RectTool Gizmo превращается в поле 2D масштабирования / перемещения, которое действует так, как вы ожидаете от любого программного обеспечения для редактирования графики.

Теперь вы можете брать якоря и перемещать их.

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

Разделение анкеров

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

Примечание. На самом деле вы не изменяете размер холста при перетаскивании его краев. Фактически, вы не можете изменить размер холста таким образом.

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

Rect Transform зависит от текущей настройки якорей

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

Если вы установите привязку к одной точке без растяжения, вы увидите свойства Pos X, Pos Y, Width и Height.

Однако, если вы установите привязки таким образом, чтобы растягивать элемент пользовательского интерфейса, вы получите Left и Right вместо Pos X и Width, если вы настроите его на растяжение по горизонтали. Вы получите Top и Bottom вместо Pos Y и Height, если установите растяжение по вертикали.

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

Точка опоры

Последнее свойство, которое нужно обсудить в компоненте Rect Transform, — это Pivot.

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

Поворот использует нормализованные координаты. Это означает, что он изменяется от 0 до 1 как для высоты, так и для ширины, где (0, 0) — нижний левый угол, а (1, 1) — верхний правый угол.

Примечание. Вы также можете установить Pivot за пределами границ элемента пользовательского интерфейса. В этом случае Pivot будет вне диапазона (0, 0) — (1, 1). Это может быть полезно. Например, вы можете захотеть повернуть ваш объект вокруг некоторой точки сцены. Чтобы изменить поворот, вы должны убедиться, что кнопка Pivot / Center переключена на Pivot следующим образом:

Вы можете изменить поворот в компоненте Rect Transform в Инспекторе или использовать инструмент Rect Tool.

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

На первом изображении показана точка поворота со значением по умолчанию (0,5, 0,5), которое является центром элемента пользовательского интерфейса. Позиция установлена на (0, 0), а якоря установлены в верхний левый угол.

Примечание. Важно понимать, что положение элемента пользовательского интерфейса устанавливается относительно привязок. Позиция (0, 0) означает расстояние от якорей, которые установлены в верхнем левом углу холста.

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

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

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

Примечание. Удерживайте нажатой клавишу Option / ALT во время масштабирования для масштабирования вокруг точки поворота.

Как видите, поворот также влияет на изменение размера элемента пользовательского интерфейса.

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

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

Размещение изображения заголовка

Уф! Так много информации о Rect Transform, Anchors и Pivot. Поверьте, вы будете благодарны, что потратили время на выполнение упражнения, поскольку эти концепции необходимы для создания потрясающего пользовательского интерфейса в ваших играх.

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

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

Прежде чем продолжить, повторно включите фон, если вы отключили его, чтобы увидеть границу холста.

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

1. Нажмите на Set Native Size, чтобы сбросить размер, поскольку вы, вероятно, испортили его, играя с поворотом.
2. Установите якоря по центру вверху.
3. Установите Pos X на 0 и Pos Y на -100.

Вы должны увидеть что-то вроде этого в режиме просмотра Scene:

Вот так! Теперь оставьте изображение заголовка в таком положении.

Теперь, когда вы знаете о привязках и точка опоры, вернитесь к фоновому изображению. Вы заметили, что когда вы добавили установщик соотношения сторон, часть текстуры пола теперь обрезана за пределами экрана? Мы можем использовать Aspect Ratio Fitter в сочетании с опорной точкой, чтобы исправить это:

1. Отключите Aspect Ratio Fitter
2. Установите Pivot на (X: 0,5, Y: 0)
3. Повторно активируйте Aspect Ratio Fitter

Теперь не только фон всегда соответствует размеру телефона, но и пол всегда остается на виду!

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

Теперь, когда у игры есть красивый фон с надписью, пора добавить несколько кнопок.

На верхней панели выберите GameObject > UI > Button. Это добавит в сцену объект Button, который вы должны увидеть в Иерархии. Если вы развернете кнопку, то увидите, что она содержит дочерний элемент Text — об этом вы узнаете позже.

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

Кроме того, есть компонент Button. Другими словами, кнопка — это просто изображение с дочерним элементом Text и прикрепленным скриптом кнопки.

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

Размещение кнопки

Теперь все о расположении и изменении размера кнопки. Следуйте этим шагам:

1. Выберите кнопку в окне Иерархии и переименуйте ее в StartButton.
2. Установите его Anchors на растяжение снизу, так как вы хотите, чтобы он растягивался по горизонтали при изменении размера экрана. Совет: удерживайте Alt / Cmd и Shift при выборе привязки, чтобы также установить положение и точку опоры.
3. Для дальнейшей настройки якорей установите для X значение (Min:0.2, Max:0.8).
4. Установите для Left и Right значение 123.
5. Установите Pivot на (X: 0,5, Y: 0)
6. Установите Height на 80.
7. Установите Pos Y на 300.

Затем выберите вложенный Text element и установите его параметру Text значение Start Game. Измените Font Size на 32, чтобы увеличить текст кнопки.

Вот что вы должны увидеть в режиме просмотра сцены:

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

9-сегментное масштабирование

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

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

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

Это гарантирует, что изображение будет хорошо смотреться в любом масштабе.

Подготовка изображений кнопок

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

В Import Settings инспектора установите для параметра Texture Type значение Sprite (2D and UI) и примените изменения. Затем нажмите на кнопку Sprite Editor, чтобы открыть окно редактора спрайтов.

В редакторе спрайтов установите значения Border на L: 14, R: 14, B: 16, T: 16. Не забудьте нажать Apply!

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

Настройка изображений кнопок

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

1. Измените Image Type на Sliced в компоненте Image.
2. Измените свойство Transition в компоненте Button на SpriteSwap.
3. Перетащите btn_9slice_normal в Source Image в компоненте Image.
4. Перетащите btn_9slice_highlighted в Highlighted Sprite в компоненте Button.
5. Перетащите btn_9slice_pressed в Pressed Sprite в компоненте Button.

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

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

Установка пользовательского шрифта для кнопки

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

Выберите элемент Text, вложенный в StartButton в Иерархии. Затем откройте папку Fonts в окне Project и перетащите шрифт TitanOne-Regular в поле Font. Также установите белый цвет.

Теперь запустите сцену и наслаждайтесь своей новой мега-крутой кнопкой!

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

Осталось сделать еще несколько вещей. Сначала добавьте кнопку Settings.

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

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

Эти свойства кнопки Settings различаются:

• Name: SettingsButton
• Rect Transform: левый и правый — 400, высота — 70, а положение Y — 180.
• Text: Settings
• Fontsize: 24

Если у вас не получается, просто выполните следующие действия:

1. На верхней панели выберите GameObject > UI > Button. Это создаст объект Button в сцене.
2. Выберите кнопку в окне Иерархии и переименуйте ее в SettingsButton.
3. Установите кнопке Anchors на bottom-stretch. Затем обновите X до (Min:0.2, Max:0.8)
4. Установите Pivot на (X: 0,5, Y: 0)
5. Установите для Left и Right в Rect Transform значение 173.
6. Установите Height на 70 и Pos Y на 180.
7. Установите для параметра Transition в компоненте Button значение Sprite Swap.
8. Убедитесь, что для параметра Image Type в компоненте Image установлено значение Sliced.
9. Откройте папку Menu в окне Project и перетащите btn_9slice_normal в Source Image.
10. Затем перетащите btn_9slice_highlighted в Highlighted Sprite.
11. И, наконец, перетащите btn_9slice_pressed в Pressed Sprite.
12. Дважды нажмите на Color внутри компонента Image и проверьте, установлено ли для A значение 255, чтобы удалить любую прозрачность.

Вот что вы должны увидеть в режиме просмотра сцены после добавления кнопки настроек:

Теперь сохраните сцену.

Запуск игры

Последняя задача в этой части — нажать кнопку Start Game и запустить вторую сцену в самой игре.

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

Прежде чем вы сможете запускать различные сцены, вам необходимо добавить их в список Scenes in Build в настройках проекта.

Для этого в меню выберите File > Build Settings. Откроется диалоговое окно Build Settings. Затем откройте папку Scenes в браузере проектов. Сначала перетащите сцену MenuScene, а затем сцену RocketMouse в списке Scenes in Build.

Наконец, закройте диалоговое окно Build Settings.

Создание UIManager

А вот и 5% часть урока с кодом!

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

На верхней панели выберите GameObject > Create Empty. Затем выберите GameObject в окне Hierarchy и переименуйте его в UIManager.

Создайте папку Scripts внутри RW, а затем создайте в ней новый скрипт C# с именем UIManager. Как только Unity скомпилирует скрипт, прикрепите его в качестве компонента к игровому объекту UIManager.

Вот что вы должны увидеть в окне Hierarchy и Inspector:

Дважды нажмите на UIManagerScript в Инспекторе, чтобы открыть скрипт в редакторе кода. После загрузки скрипта удалите как Start () , так и Update () .

Затем добавьте следующий оператор под предыдущими операторами using .

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

Сохраните скрипт и переходите к следующему шагу:

Вызов StartGame при нажатии кнопки

Вернитесь в Unity и выполните следующие действия:

1. Выберите StartButton в Иерархии и прокрутите вниз в Инспекторе до списка On Click().
2. Нажмите кнопку +, чтобы добавить новый элемент.
3. Перетащите UIManager из Иерархии на новый добавленный элемент в списке.
4. Нажмите на раскрывающийся список, чтобы выбрать функцию. Сейчас установлено значение No Function.
5. В открывшемся меню выберите UIManagerScript и в открывшемся меню выберите StartGame ().

Сохраните сцену и затем нажмите кнопку Play, чтобы запустить игру. Нажмите на кнопку Start Game в меню. Это должно открыть игровую сцену.

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

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

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

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

Вы также узнали много нового о Rect Transform, Anchors и Pivot. Теперь, когда вы их поймете, вы сможете действовать намного быстрее, если примените эти навыки в своих собственных проектах.

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

Если у вас есть вопросы или комментарии, оставьте их ниже! Увидимся во второй части урока!

Комментариев: 3 на “ Введение в пользовательский интерфейс Unity — часть 1 ”

Нажимаю на кнопку sprite editor, но почему то не открывается редактор спрайтов, а выходит какое то сообщение, подскажите

Возможно не установлен плагин Sprite Editor. Зайдите в window/package manager, нажмите сверху на Packages: Unity Registry и выберите 2D sprite, установите нажав на кнопку install.

так может зависеть от версий юнити, некоторые плагины нужно устанавливать, и интерфейс отличается