UI

The TBE runtime UI features healthbars, castbars, damage numbers, buttons, tooltip and others. It currently uses UGUI only.

The documentation for UI is a work in progress and incomplete.
The UI is an extremely important part of any game/app as it dictates its look and feel and user experience. As games/apps are highly individual, almost all games will not be satisfied with any premade UI.

UI meta

  • The architecture of the TBE UI is such that the UI observes for data changes via publish subscribe (observe). See also R3. When using ReactiveProgramming thoroughly, the UI will always be current, without any update logic and nothing that has to happen every frame.

  • In TBE, a maximum of one unit can be selected at the same time. This is the selected unit and is held in the ScenePlayerContext. It is a ReactiveProperty and can be observed.

  • pressing shift and right-clicking an item can swap it into an appropriate, visible, different inventory.

Unit UI

uiHoneti

This image shows the default unit UI when using the HONETi skin

You can see:

  • (1) attackPanel

    • this panel is for debugging purposes and shows the cooldown of the currently equipped weapon.

  • (2) equipPanel

  • (3) charPanel

    • The charPanel is layed out such that there is space for three Attributes

  • (4) inventoryPanel

  • (5) castPanel

You cannot see:

  • castProgressBar

    • This bar is only shown when the unit casts an ability whose Channel Time is greater than zero.

  • buffsPanel

    • This panel only has content when the unit has at least one buff that is not hidden.

Customizing

You can find the aforementioned elements under unit-ui in the game-view prefab. The game-view prefab is at [TBE-root]/Resources/tbe/ui.

Also see SelectedUnitUiManager

Skinning

Search for TbeDefaultUiSkinSettings. You can make a copy of this file and put it into your own project, then reference your copy from the TbeSystemManager.

Also see the HONETi skin.

List of UI prefabs

A list of all UI prefabs that come with TBE can be found under [TBE-root]/runtime/ui/prefabs/UiPrefabsList.

There you also have buttons to:

  • Bake Skin

    • Use this button to hardwire your skin into the prefabs. This is mandatory for production-ready performance.

  • Disable Skinning

    • Disables applying the skin when components get loaded at runtime. This goes along with a baked skin. After you press this, skinning will be disabled until you press enable.

  • Enable Skinning

    • Enables applying the skin when components get loaded at runtime. It is a huge performance overhead to have skinning enabled. Use this only while developing UI components.