BATTLE 01 Battle Menu

In this tutorial we’ll set up the battle menu.

This tutorial is the start of the sub-series for setting up battles. The series will be interrupted by other tutorials, e.g. for setting up turn based or active time battle systems.

The battle menu can be used to select which action your players should use in battle. Learn more about battle menus in this documentation.

UI Box #

It’s time for another UI box.

UI Box Prefab #

The UI box should be scrollable (vertically), so copy one of our already existing UI boxes that do that – e.g. duplicate the UI Box Blue prefab from the initial UI setup.

Adjust the styling to your liking and place it in the lower left corner of the screen.

Make sure to have the pivot of the UI box on the bottom left corner, i.e. Pivot should be set to X=0, Y=0. We’ll need this for correct placement of sub-menus soon.

Rename your finished prefab to UI Box Blue Battle Menu.

UI Box Setup #

Navigate to UI > UI Boxes and add a new UI box.

Base Settings #

  • Name
    Set to Blue Battle Menu.
  • UI Layer
    Select Layer 1.

Unity UI #

  • UI Box Prefab
    Select UI Box Blue Battle Menu.

Override Default Settings > Schematics #

I’m also using the move from left and move to right schematics from the UI animations schematics to animate this UI box.

  • Own Schematics
    Enable this setting.
  • Before Open Schematic
    Select the UIMoveFromLeftFadeIn schematic.
  • Wait
    Enable this setting.
  • Before Close Schematic
    Select the UIMoveToRightFadeOut schematic.
  • Wait
    Enable this setting.

Battle Menu #

Navigate to UI > Battle Menus, we’ll change the Default battle menu.

Base Settings #

  • UI Box
    Select Battle Menu.
  • Show Title
    Enable this setting.
  • Text (Title Content)
    Set to: <name>

Sub-Menu Settings #

These settings control how sub-menus, e.g. showing abilities or items, are handled. We’ll use multi mode, which displays sub-menus as additional UI boxes instead of closing the previous box.

  • Use Multi Mode
    Enable this setting.
  • Multi-Box Layout
    Select Relative Offset.
  • Relative To
    Select Lower Center.
    This is where the pivot of the sub-menu UI boxes will be placed.

Options #

  • Select Last Target
    Enable this setting.
  • Remember Selection
    Enable this setting.
  • Target Sort Type
    Select Screen Position.
    This’ll sort targets based on their position on screen, from top left to bottom right corner.

Layout Settings > Content Layout #

The Content Layout settings control how the content of buttons in the battle menu is displayed. The default setup shows icon and name of content (e.g. abilities) and adds information content as additional content with the content ID info.

We’ll stick with the default setup – however, if you didn’t use a button prefab with content ID info (additional content) added as the default button prefab (UI > UI System), you need to select one here. Otherwise you wouldn’t see things like item quantities or use costs of abilities.

The default Choice Info Button you can create using the scene hierarchy context menu has such a setup. See the initial UI setup for more details.

  • Custon Input Prefab
    Select a button prefab with an additional content info.

User Highlight #

Let’s also highlight the current combatant who’s selecting actions by blinking HUDs of the combatant.

  • In Target Selection
    Disable this setting.
    We’ll not highlight the user when selecting targets, as that’d interfere with the target selection highlights.

Highlight HUD #

  • Fade HUD
    Select Blink.
  • Time
    Set to 1.
  • Interpolation
    Select Quadratic > Quadratic In + Out.
  • Fade Alpha
    Enable this setting.
  • Fade Red/Green/Blue
    Disable these settings.
  • Start Color
    Select a color with full alpha value (A=255 or 1, depending on your color picker).
  • End Color
    Select a color with half alpha value (A=127 or 0.5, depending on your color picker).

Option 0 #

Now it’s time to add the battle menu options, i.e. which actions are available.

A default option is arleady added for us, let’s change it’s setup.

  • Type
    Select Attack.
    This’ll use the combatant’s base attack.
  • Use Ability Information
    Enable this setting.
    Since some combatants have different base attacks (e.g. the wizard using Drain or a bow overriding the default attack with Shoot), we’ll use the actual name and other information of the action for the button.
    Otherwise we can define the content of the button.

Option 1 #

Click on Add Option to add a new option.

  • Type
    Select Ability.
  • Type Display
    Select Type.
    This’ll list the ability types available to the combatant directly in the base battle menu.
  • Sort By (Type Sorting)
    Select either Name or ID based on your preference.
    This handles how the ability types are sorted.
    Name sorts them by their name.
    ID sorts them by their index in the data list.
  • Sort By (List Sorting)
    Select either Name or ID based on your preference.
    This handles how the abilities are sorted.

Option 2 #

Click on Add Option to add a new option.

  • Type
    Select Item.
  • Type Display
    Select Combined.
    All items will be combined under a single button.
    You can use a sub menu to display item types, but we’ll not use that (Sub Menu setting).
  • Sort By (List Sorting)
    Select either Name or ID based on your preference.
    This handles how the items are sorted.
  • Text (Button Content)
    Set to Items.
  • Sprite
    Select icons_61.

Option 3 #

Click on Add Option to add a new option.

  • Type
    Select Equipment.
    This allows the player to change equipment during battle.
  • Sort By (List Sorting)
    Select either Name or ID based on your preference.
  • Text (Button Content)
    Set to Equipment.
  • Sprite
    Select icons_6.

Slot Content Layout #

These settings handle how the equipment slot buttons are styled.

Their default setup will show the slot’s content as a title (additional content ID title, e.g. for the default Choice Title Button setup) and the current equipment as the button’s content. We’ll stick with the default setup – if you don’t use a button with additional content title it’ll just display the current equipment’s content, which also works.

Feel free to use a button with title as the Custom Input Prefab.

Option 4 #

Click on Add Option to add a new option.

  • Type
    Select Change Member.
    This allows the player to change the current combatant for a non-battle group member.
  • Text (Button Content)
    Set to Switch.

Option 5 #

Click on Add Option to add a new option.

  • Type
    Select Escape.
    As the name suggests, this’ll use the escape command, allowing to escape the battle (after passing a chance check).
  • Text (Button Content)
    Set to Escape.

Option 6 #

Click on Add Option to add a new option.

  • Type
    Select End.
    This’ll end the combatant’s turn, doing nothing.
  • Text (Button Content)
    Set to Skip.

Save Changes #

And that’s it!

Don’t forget to save your changes by clicking on Save Settings at the bottom of the editor.

Next, we’ll finally prepare for battle!