Как правильно создавать верхнее меню (жизни монеты) игрока?

Question

[Евгений Иванов]

Речь идет о таком меню

Пусть в нашем меню нам нужен только текст.

1) Создаю игрока - Player240x280 (240x280 - его размер). Делаю префабом.
Создаю внутри него Canvas - MenuText.


И сразу непонятно - игрок 240x280, Canvas по размеру камеры, на сцене всё выглядит совершенно не так.

2) Теперь мне надо переместить текст, чтобы он был на экране в левом верхнем углу.
Что сейчас происходит на сцене, почему канвас огромный, игрок маленький, а текст большой - непонятно.

Перехожу на сцену и выставляю у Canvas
Render Mode - Screen Space Camera
Scale With Screen Size
1920x1080
Match Height

Теперь, на моем разрешении 1920x1080 я настраиваю размер и положение текста. На любых других разрешениях всё должно автоматически масштабироваться относительно высоты экрана.

Всё хорошо, в чем вопрос?

Проблема 1
Открываю документацию.
Screen Space Overlay: Используется для создания интерфейсных элементов, которые должны быть всегда видимыми и находиться на верхнем слое.
Screen Space Camera: Используется для создания интерфейсных элементов, которые должны быть отображены в определенной части сцены.
Я использовал Screen Space Camera, когда надо было Screen Space Overlay.
Но при Screen Space Overlay

Что сейчас происходит на сцене, почему канвас огромный, игрок маленький, а текст большой - непонятно.

Проблема 2
Камера. Канвас дочерний элемент игрока, камера нет, просто камера на сцене. Чтобы использовать у канваса Screen Space Camera, надо постоянно не забывать перетаскивать камеру в поле.
Логично создать камеру, как дочерний объект игрока, на одном уровне иерархии с канвас, всё там настроить и будет универсальный префаб игрока.
Проблема - если игрок типа Spine Object (анимация Spine), то он не может содержать Sprite Renderer.
Его код поворота

if  (horizontalInput < 0) transform.localScale = new Vector2(-1f, 1f);
if  (horizontalInput > 0) transform.localScale = new Vector2(1f, 1f);

что повернет и и камеру и канвас и текст на нем (будет справа задом наперед).

Итого
Режим Screen Space Overlay - непонятно что на сцене, невозможно ничего редактировать.
Режим Screen Space Camera - всё редактируется, есть проблемы с вложенной камерой.

Можно - установить Screen Space Camera, настроить положение текста, размер и т.д., потом переключить в Screen Space Overlay. Всё будет работать. Но это как то не нормально.

Как правильно создавать верхнее меню (жизни монеты) игрока?

Answer 1

[Мимокрокодил]

Если простым языком, опция Render Mode используется следующим образом:
1) Overlay - стандартный вариант, когда у вас одна камера на все задачи;
2) Camera - показать специфический интерфейс для определённой камеры;
3) World - вообще отвязать от камер, сделав объектом сцены.

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

Далее размер зоны Canvas-а на сцене. В режиме Overlay он огромен неспроста - он имеет размер экрана. Например, если эран 2960:1440, то и канвас будет иметь такой размер, почти 3к в ширину и 1.5к в высоту. Но на камеру он будет накладываться так, чтобы вложиться в её границы. Единственное неудобство в том, что чисто визуально сложно представить, как это дело будет выглядеть в игре. Чтобы каждый раз не прыгать в плеймод, можно просто вкладку Game расположить где-нибудь рядом. Ну или делать как мои знакомые. Заметил среди знакомых тренд, что они в простых гиперказуалках просто ставят режим Render Mode - Camera и сразу так работают. Сценический размер и положение канваса подстраиваются под камеру и им удобно.

Касательно масштабирования, обычно разработчики выбирают эталонное разрешение экрана, которое указывают в Canvas Scaler (рядом с Canvas на одном объекте). Там опция - UI Scale Mode, режим Scale With Screen Size. А ползунком ниже указывают как именно интерфейс будет зависеть от ширины и высоты. Затем нужно перейти во вкладку Game и там слева вверху есть выпадающий список с размерами экрана. Нужно выбрать или создать и выбрать то же самое разрешение.

Если вы хотите, чтобы определённый объект был привязан, например, к левому верхнему краю экрана, этот объект обязательно должен иметь RectTransform. В компоненте вы можете заметить вот такую фичу:

Открываем, согласно подсказке жмём Shift+Alt и нажимаем на левый верхний квадрат:

Осталось только в самой компоненте задать такие Pos X / Pos Y, чтобы вам нравились отступы от левого и верхнего краёв экрана.

Делать основной канвас дочерним игроку - плохая практика. Максимум на уровне префаба и сразу вытащить из игрока при спавне, но и это хз зачем, если её можно сразу поставить на сцену и не мучаться. Если у вас много сцен с таким канвасом, то просто сделайте сам канвас префабом и меняйте его содержимое не для конкретной сцены, а на уровне префаба. Собственно, так обычно и делают, разве что у вас всего 1 сцена игры, на которой вы спавните префаб нужного уровня.

Осталось лишь придумать как привязать этот интерфейс к игроку на уровне скрипта. Много кто использует для этого синглтон, кто-то при спавне игрока просто ищет специфический скрипт на сцене и сохраняет на него ссылку. Это реально неплохие варианты.