Customize the UI

In the scene, the UI is located in the "Auto-Battle/Auto-Battle Canvas" object. The following sections will show how to customize each of the systems that compose the UI. It will not detail how to customize it in detail, but it will give some hints on how the UI works together.

Refer to the Unity manual, specifically the UI Reference, which contains explanations and examples applicable to these elements.

Shop UI

The Shop UI object contains the component of the same name. It consists of the following elements:

  • The list of items in the store.
    • The UI of the shoppable items in the store can be customized by modifying the ShopItemUI prefab, located in "Auto-Battle Framework/Prefabs/UI". It is recommended to make a duplicate of it (CTRL + D), and modify the duplicate.
    • Note that in the case of characters, the TraitStatsUI prefab, located in "Auto-Battle Framework/Prefabs/UI", is also used to display an icon and the text of a character's Trait.
    • If you want to use another default prefab for new Game Actors that you create (either the duplicate or another one), select the asset AutoBattleSettings located in "Auto-Battle Framework/Scripts/Editor/Settings", and attach it to the Default Character Shop Item UI variable of its Inspector.
  • The Buy Experience button.
  • The Refresh the shop button.
  • Bar and text of both the experience accumulated and needed to level up
  • The Timer.
  • The Currency.
  • The panel containing the text that appears when something is to be sold.

UIBars

The life and energy bars of the characters will be instantiated in this empty object.

  • The UI of the bars can be customized by modifying the UIBars prefab, located in "Auto-Battle Framework/Prefabs/UI". It is recommended to make a duplicate of it (CTRL + D), and modify the duplicate.
  • If you want to use another default prefab for new Game Characters that you create (either the duplicate or another one), select the asset AutoBattleSettings located in "Auto-Battle Framework/Scripts/Editor/Settings", and attach it to the Default Health Bar variable of its Inspector.
  • Or you can manually attach a Character Health UI prefab to the Health Bar Prefab variable of a Game Character in its Inspector.

Stage UI

Images representing a Battle State will be instantiated in this empty object.

  • If a Battle State has the Show in UI option disabled, its UI prefab needs to be EmptyImage, located in "Auto-Battle Framework/Prefabs/UI/StageImage".
  • Otherwise, any prefab with an Image component will do. Prefabs included in the package are located in "Auto-Battle Framework/Prefabs/UI/StageImage". One is called BossImage, used in a fight against a boss, and the other FightImage, used in common fights.

TraitList

This vertical list shows the player's active Traits.

  • As the first element there is a button that indicates the current number of player characters, and the maximum number of characters the player can have on the field. If you click on it, you can see the active Traits of the enemy team. If you click it again, the player's Traits are shown again.
  • The appearance of the Traits is given by the TraitUI prefab, located in "Auto-Battle Framework/Prefabs/UI".
  • If you want to use another prefab (the duplicate or another one), it is necessary to attach the prefab in the Trait UI Prefab variable of the Trait List UI component.
  • Right-clicking on a Trait will display a descriptive panel of the Trait.
  • If a Trait has too many Trait Options, it may be necessary to add more number boxes in the TraitNumbersBackground object. Simply duplicate the last of the objects inside, and add them to the Trait Numbers list of the Trait UI component.

CharactersStats UI

Panel describing a character's appearance, stats, traits, special attack description and list of equipped items.

  • To open the description of the special attack, click or hold on the image of the special attack.
  • The list of equipped items is scrollable, and you can read the description of each one if you click or hold on the item (see ItemStatsUI). In this case, the prefab EquippedItem will be used.
  • To show this panel, right click on the character. On mobile you need to drag the character onto the same cell he is in (a quick tap works).
  • To hide the panel tap outside the panel.

ItemStats UI

Panel describing a items appearance and stats modificator.

  • The list of equipped items is scrollable, and you can read the description of each one if you click or hold on the item.
  • To show this panel, right click on the character. On mobile you need to drag the character onto the same cell he is in (a quick tap works).
  • To hide the panel tap outside the panel.

Lose and Win panel

These panels are used when the game is lost or won in the test scene. If you wish to continue using them, they can be modified without any problem.