UI. Интерфейс

1. Интерфейс

Федорищев Л.А.

2. UI. Text

Нажмите правой
кнопкой мыши на
панели объектов сцены,
выберите пункт UI, а там
- Text

3. Текст

Нажмите на этот объект и
отредактируйте его свойства. В
частности, напишите какой-нибудь
текст (например, Кубики), выберите
цвет, установите положение на экране.
Протестируйте.

4. Программный доступ к тексту

В скриптах мы имеем доступ к объектам интерфейса, в частности, к
тексту. Для начала надо указать, что мы будем использовать для
интерфейса модули Unity UI: добавьте в начале скрипта строку:
using UnityEngine.UI
Создайте параметр-объект для нашего текста:
public Text myText
В функции Start() укажите новый текст для объекта myText
Протестируйте. Теперь вы умеете выводить информацию на эркан!

5. Картинки

Создайте новое изображение, как показано на слайде. В окне свойств
изображения выберите нужный вам цвет, либо картинку. Установите
размеры (параметры Width, Height)

6. Картинки

Чтобы создать именно картинку, а не цветной прямоугольник,
загрузите изображение в свои ассеты. Затем выберите в инспекторе
свойств для этого изображения тип Sprite (2D and UI). Теперь вы
можете перетащить его в ваш Image.

7. Картинки

8. Кнопка

Теперь создадим кнопку Button.

9. Код нажатия кнопки

В нашем любимом скрипте ProjectManager добавьте новую функцию –
функцию нажатия на нашу кнопку.
Пусть пока эта функция просто выводит какой-то текст в лог.

10. Готовим кнопку

В Unity выберите кнопку. В окне свойств в панели OnClick нажмите на
плюсик. Потом перетащите мышкой объект ProjectManager в слот, как
показано на слайде.

11. Обработчик кнопки

В выпадающем списке NoFunction выберите ProjectManager, а в
следующем выпавшем окне выберите нашу функцию, которую мы
только что написали: onMyButtonClick(). Протестируйте.

12. Счетчик

Измените функцию нажатия кнопки так, чтобы она считала, сколько
раз вы нажали на нее и выводила результат в текстовое поле myText.

13. Информационное окно

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

14. Скрытие окна

Сделайте окно невидимым с помощью галочки, показанной на слайде.

15. Показываем окно по нажатию

Добавьте в Менеджер проекта новый параметр-объект: infoWindow и
перетащите туда наше окно со сцены.
Сделаем окно видимым после нажатия на нашу первую кнопку.
Добавьте в обработчик кнопки такую строку кода:
infoWindow.SetActive(true);
Протестируйте.

16. Снова прячем окно

Сделайте теперь закрытие этого информационного окна по нажатию
на кнопку ОК в этом окне.
Для программного скрытия объекта воспользуйтесь функцией
SetActive:
infoWindow.SetActive(false);

17. Переключатель цветов

Добавьте в наше окно новую картинку – цветной квадрат. И пару
кнопок: влево и вправо. По нажатию на эти кнопки сделайте, чтобы
цвет квадрата менялся на следующий. Всего должно быть заранее
указано (в параметрах) 5 разных цветов. Изменение цветов должно
идти по кругу.

18. Grid

Создайте новый пустой объект. Назовите его Grid. Добавьте к нему
компонент Grid Layout Group. Внутрь объекта Grid добавьте 3 кнопки с
различным текстом (например, «1», «3», «25»).

19. Генерация кубиков

Сделайте новую обработку кнопки «ОК». При нажатии на эту кнопку на
сцене должно генерироваться столько кубиков, сколько было выбрано с
помощью одной из кнопок (1, 3 или 25). Кубики должны быть выбранного с
помощью нашего интерфейса цвета.