💠 UI

Naming conventions

UI elements can be categorized in a few different types.
This table is a good guideline to keep everything clear and organized:

Of course when having lots of UI elements, create clearly define sub-folders inside of the type folders.

Screens

Screens are full screen UI canvases that do not have transparent backgrounds, so they are made to be the only thing visible to the user.

Postfix the asset name with *Screen to indicate it is a full screen element:

• HomeScreen
• GuildScreen
• LevelSelectScreen

Popups

Popups are transparent overlays on top of other screens or the game. Examples are a settings popup, pause menu or player profile popups.

Name the assets ending in *Popup so its easy to find when searching:

• SettingsPopup
• PausePopup
• PlayerProfilePopup

Buttons

Buttons can be in all shapes and sizes, but in general what defines them are Button Components on the root. These can be used to make variations of buttons throughout the application.

Same as the rest, postfix them with *Button.

• RoundButton
• SquareButton
• LargeButton

Elements

Elements is basically everything inside a screen which is not a button, but should be saved as a prefab for reusability.
There is no overall guideline as this can be anything specific to your application. Some examples could be:

• CharacterIcon
• TopBar
• CurrencyContainer
• Background
• WeaponInventoryElement
• CharacterContainer

Screen layering

To set the ordering of screens, use the Order in Layer on any Canvas component.
When multiple screens get spawned which have the same order, the one that is spawned last will be visible on top.

Screen transitions

When any component is found in a spawned GameObject implementing IFlowObjectTransitioner, the object is transitioned in automatically. Make sure the node also has a Destroy Objects flow action as well to make the out transition work when exiting the node.