Добавление элементов UI. Часть 3

Ключевые слова: UI, кнопки, спрайты, toggle, panel, якорь

Разработка интерфейса(UI)

Первым делом создадим папку "UI" для хранения элементов интерфейса ( в директории Assets). Перенесем туда выданные заготовки (Рис. 1).

Рис. 1 Будущие элементы интерфейса​

Для того, чтобы сохранить прозрачность фона изображений, выделим их все и, в меню инспектора, переключим Texture Type на Sprite (2D and UI). Не забываем нажать Apply.

В меню иерархии создадим UI -> Canvas (то, что отображается на экране пользователя). Перейдем в 2D режим (иконка в меню сцены). Внутри canvas создадим UI -> Panel. На этой панели будут храниться все элементы интерфейса, по умолчанию она будет растянута на весь Canvas, пометайте цвет panel на прозрачный: компонент Image, свойство Color. Все размеры в этом мастер-классе будут адаптированы под разрешение 1920х1080.

Добавляем кнопки вкл/выкл(Toggle) для ингредиентов пиццы. Нажмем ПКМ на Panel UI->Toggle. Назовем кнопку Toggle - Peperoni. Добавим компонент Image для объекта Toggle, для этого нажмем Add Component и в поиске наберем Image. Перетащим спрайт peperoni в свойство Source Image. Теперь установим ширину и высоту: width, height=140.

Перетащим вложенный объект Checkmark(Toggle->Background-> Checkmark) в Toggle, удалим Label и Background. Далее установим у объекта Checkmark значение свойства Image, как в предыдущем шаге и перетащим в Source Image, но в этот раз не peperoni , а peperoni_select. Далее установим высоту и ширину 140 и обнулим положение по осям. Сдвинем к правому краю и поставим якорь на middle-right, компонент rect transform. Переименуем Toggle->Toggle - Peperoni и chechmark->Image (Рис. 2).

Рис. 2 Расположение интерфейсных кнопок

Так же сделаем кнопки Toggle – Pineapple, Toggle – Mushroom. Создадим пустой объект, назовем его Toppings и положим в него кнопки, которые только что сделали (Рис. 3).

Рис. 3 Кнопки интерфейса

Создание кнопки завершения заказа.

Создадим кнопку в Panel, кликнем ПКМ UI->Button. Удалим дочерний объект Text. Переименуем Button->CompleteOrderButton, перенесем спрайт bell, установим размеры 170х170, перетащим в нижний правый угол, установим якорь на этот угол(bottom-right) (Рис. 4).

Рис. 4 Complete Order Button

Создание таймера.

Создадим пустой объект в Panel. Выставим якорь на верхний правый угол(top-right), переименуем Gameobject->Timer. Внутри создадим текст: нажмем ПКМ, UI->Text переименуем в TimerText, установим шрифт в 82 пункта, выравнивание по центру, ширина и высота поля равна 100. В компоненте Text, свойстве Text пишем 60 (Рис. 5).

Рис. 5 Timer

Создание шеф-повара. Создадим пустой объект в Panel. Установим якорь на нижний левый угол(bottom-left), перетащим в этот угол, переименуем Gameobject->Chef, установим высоту на 200 и ширину на 160 (Рис. 6).

Рис. 6 Chef

Внутри создадим картинку: нажмем ПКМ UI->Image, переведем картинку шефа в спрайт и перетащим готовый спрайт на Image(компонент Image, свойство Image Source) (Image должен быть дочерним объектом для Chef) (Рис. 7).

Рис. 7 Картинка шефа

Создание заданий от шеф-повара. Создадим внутри Panel картинку, кликнем ПКМ, UI->Image, перетащим на нее спрайт speech_bubbles, изменим размер: ширина 350 и высота 300, так же установим якорь на нижний левый угол и перетащим к повару (Рис. 8).

Рис. 8 Облако заданий

В Image создадим Text и нажмем ПКМ UI->Text, ширина 290 и высота 110; в поле Text в будущем будет текст того, какая пицца нам нужна. Также если мы хотим, чтобы текст был адаптивным, можно добавить компонент Content Size Fitter, и установить у свойств Horizontal Fit и Vertical Fit значение Unconstrained (Рис. 9).

Рис. 9 Поле для текста

Создание окна с очками за игру.

Создадим внутри Panel новую панель: нажмем ПКМ UI->Panel, изменим размер – ширина 500 и высота 200, переименуем Panel -> ScorePanel. Внутри создадим Text и 2 пустых объекта (Рис. 10).

Рис. 10 Окно с баллами

Объект Text: компонент Text свойство Text напишем «Прекрасно!», поднимем вверх окна, ширина 400, высота 70, выравнивание по центру, шрифт 50 пунктов (Рис. 11).

Рис. 11 Параметры текстового поля

Один из пустых объектов переименуем: GameObject->Score, внутри создаем объект Image. Перетащим спрайт star на Image, размер 100х100. Точно так же добавим еще 4 звезды и выстроим их в ряд (Рис. 12).

Рис. 12 Параметры для звездочек

Оставшийся из пустых объектов переименуем: GameObject -> FinalScore. Внутри создадим Button кликнем ПКМ UI->Button и Text нажмем ПКМ UI->Text. Объект Text: переименуем GameObject->FinalScore, выровняем по центру, размер шрифта 24 пункта (Рис. 13).

Рис. 13 Параметры для финального текста

Объект Button: изменим размер: ширина, высота = 200, -70. В дочернем объекте Text, в компоненте Text, в свойстве Text напишем «Новая игра». Установим размер шрифта на 16 пунктов.

Результат:

Рис. 14 UI приложения

Список использованных источников и литературы

1. Unity User Manual [Электронный ресурс] // Официальная страница Unity.– URL:https://docs.unity3d.com/Manual/index.html.

2. Официальная страница Unity (https://unity.com/ru).

3. Ben MacKinnon How to Make an AR Game Using Vuforia [Электронный ресурс] // Сайт raywenderlich. – URL: https://www.raywenderlich.com/6120-how-to-make-an-ar-game-using-vuforia.