Гайд по UI

Система сцен

Система сцен представляет из себя набор инструментов для удобного управления и переключения UI менюшек.

Состоит она из нескольких компонентов:

• GUI manager - основной класс, отвечает за менеджмент UI менюшек. Содержит систему переключения менюшек.

• GUI conveyor - вспомогательный класс, позволяет реализовывать очереди вызовов менюшек.

• UIMenu - класс, от которого можно унаследовать свой класс и повесить его на менюшку

Использование этой системы многократно облегчает переключения между менюшками, избавляет от кучи ненужных манипуляций и парочки неприятных багов, которые могут возникнуть если этой системой не пользоваться.

UI pack из стартер пака

в стартер паке уже зарание имеются

• Start Game Menu - тут находятся все ui элементы для старта игры, по умолчанию мы используем ее для tap to start.

• GameplayMenu - менюшка, в которой должны находится все ui элементы необходимые только во время геймплея, например HP bar

• ReviveMenu - менюшка для ревайва игрока.

• EndGameLoseMenu - Вызывается в случае поражения игрока.

• EndGameWinMenu - менюшка для победы, вызывается соответственно в случае победы игрока

Между основными переключение уже реализовано, например между геймплейным меню и поражением.

GUI Manager

Открывает меню по типу, если оно не открыто

public static void Open<T>(bool select = false)

Пример:

GUIManager.Open<GameplayMenu>();

Возвращает первое меню определенного типа

public static T GetUI<T>()

Пример:

GUIManager.GetUI<StartGameMenu>();

Закрывает меню по типу, если оно открыто

public static bool Close<T>() where T

Пример:

GUIManager.Close<StartGameMenu>();

Устанавливает меню в качестве выбранного. Также отображает его поверх других активных меню

public static void Select(IUIMenu menu)

Пример:

GUIManager.Select(menu);

Возвращает текущий выбранный UI

 public static IUIMenu Selected()

Пример:

menu = GUIManager.Selected();

С помощью метода можно Open() открыть меню определенного типа , если внутрь в качестве необязательного параметра selected передать true, то меню откроется и передвинется на первый план. То же самое можно сделать с уже открытым меню через метод GUIManager.GetUI().Focus(). Также допускается создания нескольких меню с одинаковыми типами, для работы с ними есть аналогичные методы, которые работают не по типу, а по имени объекта. В менеджере присутствуют эвенты закрытия, открытия и фокус менюшек, используем их если хотим вызывать какие-нибудь методы после открытия, закрытия и фокуса менюшек Если зафокусить несколько менюшек подряд, а потом закрыть саму верхнюю, получив её через GUIManager.Selected() (или по типу, без разницы), то в качестве выбранной менюшки будет предыдущая открытая меню, т.е. её также можно будет получить через GUIManager.Selected(). Тем самым можно через этот выбор реализовать множественные всплывающие окна, как отдельные меню

GUI Conveyor

Это класс-синглтон, который поможет организовать очередь показа из разных меню. Это пригодится в конце игровой сессии, когда вам может потребоваться показать игру меню накопления бонуса, меню лотереи и меню победы, и только когда игрок просмотрел все этим меню - перезапускать сцену. Для создания очереди, вам надо вызвать метод StartConveyor и передать ему колбек, который будет вызван, когда очередь окончится. Далее необходимо с помощью метода AddMenu добавить необходимые меню, которые будут последовательно показываться. Первая меню, добавленная через AddMenu, сразу откроется. Когда закроется меню, которая будет соответствовать текущей в очереди, то автоматически откроется следующая, пока очередь не кончится. Очередь можно достраивать в любой момент, если она не кончилась. Также очередь можно вручную переместить вызовом метода MoveConveyor, или сбросить методом ResetConveyor.

Добавление нового меню в систему

1. Создаем новое меню на сцене, помещаем его в канвас к GUI Manager.

2. Создаем для него класс, который унаследован от UI Menu, можно его даже оставить пустым.

3. Цепляете класс к менюшке в канвасе. Булеву переменную IsConst ставим true(только в случае если менюшка изначально будет находится на сцене, а не спавнится)

4. Далее на сцене в GUI Manager нажимаем на кнопку Find all menus in scene

5. После этого проверяем список менюшек над кнопкой, там должна появится наша новая.

Встраивание UI элементов в меню

• Новые UI элементы надо добавлять в менюшки, если не указано обратного или того не требует их функционал.

• Все элементы должны находится в той менюшке, которая наиболее им подходит и не противоречит логике. (Было бы странно пихать таймер отсчета до конца уровня в StartGameMenu).

• Избегаем “бесхозных” UI элементов, которые просто лежат в канвасе.

• Проверяем UI по превью

Встраивание UI по превью

Для начала необходимо выставить правильное разрешение экрана в Game, это 1080x1920 (1920x1080 Portrait) . Иногда в тасках пишут другое разрешение, внимательно читаем описание и чеклист

Если необходимого нам разрешения нет - жмем на плюсик внизу выбора разрешения и задаем нужные нам параметры, например для 1080 на 1920

Далее заходим в папку Preview и находим превью для UI , который мы встраиваем. Путь до превью обычно указывают в таске, если не можете найти - пингуйте человека, который создал таску

Выставляем превью в настройках Sprite(2D and UI)

и нажимаем Apply

Далее на сцене в Canvas есть объект Preview с компонентом Image

Закидываем в компонент Image Source Image наше превью

После включаем объект Preview и правильно позиционируем спрайты. Этому еще помогает прозрачность preview. Если превью разрешения не 1080x1920 и на экране выглядит растянутым и некорректным, то выставляем разрешение в окне Game согласно превью.