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.
Title Settings #
- 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.
Click on Add Highlight to add a user highlight.
You can add different highlights, e.g. changing the color of the combatant’s HUDs or game object, or spawning a cursor prefab on the combatant. We’ll change the HUD color (blinking the HUD’s alpha value).
- Highlight Type
Select Fade HUD Color. - 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!
