Unity: Создание меню в Space Shooter tutorial

Вчера в Assets Store обновился проект Space Shooter tutorial и там добавили меню. Для меня меню — это несколько отдельная тема, поэтому я решил ее рассмотреть поближе.
1. Добавляем на сцену пустой объект:
Через меню : GameObject ▶ Create Empty (Ctrl+Shift+N )
или
в окне Иерархии: Create ▶ Create Empty
2. Переименовываем его на «Tutorial Info»
3. Добавляем в него Rect Transform:
Add Component ▶ Layout ▶ Rect Transform
4. В нем добавляем Canvas:
Add Component ▶ Layout ▶ Canvas
5. В его настройках указываем:
Render Mode = Screen Space — Overlay и отмечаем галочкой Pixel Perfect и Sort Order = 100:
Unity: Создание меню в Space Shooter tutorial
6. Добавляем Canvas Scaler и для него выбираем режим масштабирования
UI Scale Mode = Scale With Screen Size, для него указываем оптимальное разрешение экрана (для меня это 1920×1200). Поскольку игра представляет собой вертикальный скролл-шутер, то делаем привязку масштаба к высоте экрана, а не к ширине. Т.е. опция Match = 1
7. Добавляем Graphic Raycaster
Add Component ▶ Event ▶ Graphic Raycaster
8. Осталось добавить скрипт TutorialInfo.cs. Правда пока все равно ничего работать не будет, т.к. нам необходимо создать элементы меню.
9. Для нашего Tutorial Info из пункта 2 добавляем дочерний объект Create Empty Child и называем его Background
В настройке Anchor Presets меняем режим на «Stretch»
Unity: Создание меню в Space Shooter tutorial
10. Добавляем Canvas Renderer:
Add Component ▶ Rendering ▶ Canvas Renderer
11. Добавляем ему пустой дочерний объект и называем его «Layout», для него также меняем режим Anchors Preset на «Stretch»
12. Добавляем компонент UI ▶ Image, для которого устанавливаем цвет #181F26FF.
13. Для объекта Layout добавляем пустой дочерний объект и называем его «UnityLogo» и выставляем ему выравнивание на Top-Center. Устанавливаем X=-25, Y=-80, W=300, H=109
14. Добавляем Canvas Renderer и Image Script. Для последнего нужно выбрать unity-logo.png, но для начала это изображение необходимо корректно импортировать (в настройках импорта этого изображения выставляем Texture Type = Sprite (2D and UI), только после этого его можно будет выбрать).
15. Аналогичным с UnityLogo образом, добавляем дочерний объект, называем его «TitleText» и выставляем ему выравнивание Stretch-Top. X=0, Y=-250, W=0, H=300
16. Добавляем Canvas Renderer и UI ▶ Text
17. В поле Text вписываем в две строки «Space Shooter Tutorial», выравнивание ставим «по центру».
18. Horizontal Overflow меняем на Overflow
19. К «Layout» добавляем еще один дочерний объект, называем его «VisitTutorialButton» и выставляем ему выравнивание «Stretch-Top». Устанавливаем X=1, Y=-701, W=400, H=100
20. Добавляем Canvas Renderer и UI ▶ Image (Script) и потом UI ▶ Button (Script), для нее установить цвет подсветки #6BB5FFFF, а в качестве скрипта OnClick() нужно указать объект «Tutorial Info», который необходимо предварительно сохранить как префаб, просто перетащив из окна Иерархии в окно Проекта. Для функции не забываем указать TutorialInfo.LaunchTutorial().
21. В качестве дочернего объекта VisitTutorialButton, создаем пустой объект с названием «Text» и выравниванием «Stretch-Stretch». Для него задаем X=0, Y=0, W=0, H=0.
22. Добавляем Canvas Renderer и UI ▶ Text
23. В поле Text вписываем «VISIT TUTORIAL», выравнивание ставим «по центру»
24. Дублируем «VisitTutorialButton» и переименовываем ее название на «PlayGameButton», для дочернего объекта «Text» , поле «Text» меняем на «PLAY NOW»и меняем цвет шрифта на белый.
25. Теперь нужно изменить ее координаты: X=1, Y=-519, W=500, H=120
26. Для функции OnClick выбираем из списка TutorialInfo.StartGame
Unity: Создание меню в Space Shooter tutorial
27. Для «PlayGameButton» добавляем дочерний объект и переименовываем его на «DarkBackground», выставляем ему выравнивание «Stretch-Stretch», со значениями X=5, Y=5, W=5, H=5.
28. Добавляем ему Canvas Renderer и Image (Script) с цветом #000000FF (черный).
29. Последним мы создаем чекбокс, для чего для Layout создаем дочерний объект с названием «Toggle», выравнивание для него будет «Top-Center», а значения X=1, Y=-839, W=341, H=107
30. Добавляем к нему компонент UI ▶ Toggle (Script) (настраивать будем немного позже!)
31. Добавляем для Toggle новый дочерний объект, название вводим «Background», выравнивание «Top-Left», X=43.4, Y=-54.2, W=48, H=48
32. Добавляем Canvas Renderer и Image (script), в качестве «Source Image» необходимо выбрать встроенное изображение «UISprite»
33. В «Background» добавляем дочерний объект, название ставим «Checkmark», W=40, H=40, выравнивание оставляем по-умолчанию (по центру)
34. Для него добавляем Canvas Renderer и Image (Script)
35. Для Toggle добавляем еще один дочерний объект и называем его «Label», положение Stretch-Stretch, координаты Left=87.5, Top=0, Right=3.8, Bottom=0
36. Добавляем ему Canvas Renderer и Text (Script), которому присваиваем значение «Show at Start» в поле Text. Также отмечаем галочкой чекбокс «Best Fit»
37. Теперь возвращаемся к объекту Toggle и в поле «Target Graphic» указываем «Background» (который из пункта 31).
38. Отмечаем галочкой чекбокс «Is On», а в поле «Graphic» выбираем «Checkmark», созданный в п.33
39. В поле On Value Changed (Boolean) выбираем TutorialInfo.ToggleShowAtLaunch()
Unity: Создание меню в Space Shooter tutorial
40. Теперь возвращаемся к объекту «Tutorial Info» и добавляем ссылки на чекбокс «Show at Start» — необходимо просто на него перетащить нужный объект («Toggle»), а в поле «Overlay» перетаскиваем «Background»:
Unity: Создание меню в Space Shooter tutorial

41. Когда все готово, можно создать новый пустой объект Event System и добавим ему компонент Event ▶ Event System. В поле «First Selected» добавим ранее созданный объект «PlayGameButton».
42. Нажимаем на кнопку Add Default Input Modules
Unity: Создание меню в Space Shooter tutorial

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

 

DenTNT
DenTNT недавно публиковал (посмотреть все)