Вчера в Assets Store обновился проект Space Shooter tutorial и там добавили меню. Для меня меню — это несколько отдельная тема, поэтому я решил ее рассмотреть поближе.
1. Добавляем на сцену пустой объект:
Через меню : ▶
или
в окне Иерархии: ▶
2. Переименовываем его на «Tutorial Info»
3. Добавляем в него Rect Transform:
▶ ▶
4. В нем добавляем Canvas:
▶ ▶
5. В его настройках указываем:
= и отмечаем галочкой и :
6. Добавляем Canvas Scaler и для него выбираем режим масштабирования
, для него указываем оптимальное разрешение экрана (для меня это 1920×1200). Поскольку игра представляет собой вертикальный скролл-шутер, то делаем привязку масштаба к высоте экрана, а не к ширине. Т.е. опция Match = 1
7. Добавляем Graphic Raycaster
▶ ▶
8. Осталось добавить скрипт TutorialInfo.cs. Правда пока все равно ничего работать не будет, т.к. нам необходимо создать элементы меню.
9. Для нашего Tutorial Info из пункта 2 добавляем дочерний объект Create Empty Child и называем его Background
В настройке меняем режим на «Stretch»
10. Добавляем Canvas Renderer:
▶ ▶
11. Добавляем ему пустой дочерний объект и называем его «Layout», для него также меняем режим Anchors Preset на «Stretch»
12. Добавляем компонент ▶ , для которого устанавливаем цвет #181F26FF.
13. Для объекта добавляем пустой дочерний объект и называем его «UnityLogo» и выставляем ему выравнивание на Top-Center. Устанавливаем X=-25, Y=-80, W=300, H=109
14. Добавляем и . Для последнего нужно выбрать unity-logo.png, но для начала это изображение необходимо корректно импортировать (в настройках импорта этого изображения выставляем Texture Type = Sprite (2D and UI), только после этого его можно будет выбрать).
15. Аналогичным с UnityLogo образом, добавляем дочерний объект, называем его «TitleText» и выставляем ему выравнивание . X=0, Y=-250, W=0, H=300
16. Добавляем и ▶
17. В поле Text вписываем в две строки «Space Shooter Tutorial», выравнивание ставим «по центру».
18. Horizontal Overflow меняем на Overflow
19. К «Layout» добавляем еще один дочерний объект, называем его «VisitTutorialButton» и выставляем ему выравнивание «Stretch-Top». Устанавливаем X=1, Y=-701, W=400, H=100
20. Добавляем и ▶ и потом ▶ , для нее установить цвет подсветки #6BB5FFFF, а в качестве скрипта OnClick() нужно указать объект «Tutorial Info», который необходимо предварительно сохранить как префаб, просто перетащив из окна Иерархии в окно Проекта. Для функции не забываем указать TutorialInfo.LaunchTutorial().
21. В качестве дочернего объекта VisitTutorialButton, создаем пустой объект с названием «Text» и выравниванием «Stretch-Stretch». Для него задаем X=0, Y=0, W=0, H=0.
22. Добавляем и ▶
23. В поле Text вписываем «VISIT TUTORIAL», выравнивание ставим «по центру»
24. Дублируем «VisitTutorialButton» и переименовываем ее название на «PlayGameButton», для дочернего объекта «Text» , поле «Text» меняем на «PLAY NOW»и меняем цвет шрифта на белый.
25. Теперь нужно изменить ее координаты: X=1, Y=-519, W=500, H=120
26. Для функции OnClick выбираем из списка TutorialInfo.StartGame
27. Для «PlayGameButton» добавляем дочерний объект и переименовываем его на «DarkBackground», выставляем ему выравнивание «Stretch-Stretch», со значениями X=5, Y=5, W=5, H=5.
28. Добавляем ему и с цветом #000000FF (черный).
29. Последним мы создаем чекбокс, для чего для создаем дочерний объект с названием «Toggle», выравнивание для него будет «Top-Center», а значения X=1, Y=-839, W=341, H=107
30. Добавляем к нему компонент ▶ (настраивать будем немного позже!)
31. Добавляем для новый дочерний объект, название вводим «Background», выравнивание «Top-Left», X=43.4, Y=-54.2, W=48, H=48
32. Добавляем и , в качестве «Source Image» необходимо выбрать встроенное изображение «UISprite»
33. В «Background» добавляем дочерний объект, название ставим «Checkmark», W=40, H=40, выравнивание оставляем по-умолчанию (по центру)
34. Для него добавляем и
35. Для добавляем еще один дочерний объект и называем его «Label», положение Stretch-Stretch, координаты Left=87.5, Top=0, Right=3.8, Bottom=0
36. Добавляем ему и , которому присваиваем значение «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()
40. Теперь возвращаемся к объекту «Tutorial Info» и добавляем ссылки на чекбокс «Show at Start» — необходимо просто на него перетащить нужный объект («Toggle»), а в поле «Overlay» перетаскиваем «Background»:
41. Когда все готово, можно создать новый пустой объект
42. Нажимаем на кнопку
- Windows 10: Уменьшить размер виртуальной машины WSL - 06.10.2024
- Windows 10: Событие EventID 63 в Журнале Приложений - 28.09.2024
- Android: Захват траффика - 07.09.2024