In this tutorial we’ll set up UI boxes for our menu screens.
This tutorial is the start of the sub-series for setting up menu screens.
Menu screens are used to manage inventory, abilities, the player group and more. Learn more about menu screens in this documentation.
Before we’ll get to setting up the actual menu screens, we’ll need to set up some UI boxes we’ll use. We’ll set up the following UI boxes:
- small content fitting in the top left
- small content fitting in the top right
- small content fitting in the bottom left.
- large scrollable in the center
- large scrollable in the center, with tabs
- scrollable in the top half of the screen
- scrollable in the bottom half of the screen
We’ll also set up a UI background that’ll be displayed with our menu screens – we’ll just display a semi-transparent black color.
Additionally, we’ll set up 3 new input keys for calling our menu and selecting next/previous tabs or combatants in our menu screens.
Prefabs Setup #
We’ll start with setting up the UI background and UI box prefabs.
UI Background #
As usual, we can easily set this up using the scene hierarchy context menu: Makinom > UI > Background (Sprite)
This’ll create a UI background a bit larger than the canvas, we just need to adjust the Image component.
Image #
- Source Image
Select the White_16x16 sprite. - Color
Select a black color with about 4/5 filled alpha value (e.g. A=200 or 0.78, depending on the color picker).
The result should look like this:
Create a prefab out of the Background game object, e.g. name it Menu Background.
We’ll handle the background setup for our menu screens (i.e. using the prefab) in a later tutorial
Top Left Fit #
Duplicate your UI Box Blue Center Fit prefab, open it for editing and change the following settings (in this order).
Rect Transform #
Use the top left anchor presets.
- Pivot
Set to X=0, Y=1. - Pos X
Set to 200. - Pos Y
Set to -200. - Width
Set to 400.
Should already be the width.
The result should look like this:
Rename the new prefab, e.g. to UI Box Blue Top Left Fit.
Bottom Left Fit #
Duplicate your UI Box Blue Center Fit prefab, open it for editing and change the following settings (in this order).
Rect Transform #
Use the bottom left anchor presets.
- Pivot
Set to X=0, Y=0. - Pos X
Set to 200. - Pos Y
Set to 200. - Width
Set to 400.
The result should look like this:
Rename the new prefab, e.g. to UI Box Blue Bottom Left Fit.
Top Right Fit #
Duplicate your UI Box Blue Center Fit prefab, open it for editing and change the following settings (in this order).
Rect Transform #
Use the top right anchor presets.
- Pivot
Set to X=1, Y=1. - Pos X
Set to -200. - Pos Y
Set to -200. - Width
Set to 400.
The result should look like this:
Rename the new prefab, e.g. to UI Box Blue Top Right Fit.
Center Scroll #
Duplicate your UI Box Blue Battle Menu prefab, open it for editing and change the following settings (in this order).
Rect Transform #
Use the middle center anchor presets.
- Pivot
Set to X=0.5, Y=0.5. - Pos X
Set to 0. - Pos Y
Set to 0. - Width
Set to 720. - Height
Set to 680.
The result should look like this:
Rename the new prefab, e.g. to UI Box Blue Menu Center Scroll.
Tab Center Scroll #
Duplicate your UI Box Blue Menu Center Scroll prefab and open it for editing.
Use the scene hierarchy context menu on the root UI Box game object and add a scrollable tab area to the top: Makinom > UI Box > Tab > Add Tabs Top (Scroll Horizontal)
This’ll add child object where our tabs will be added to – they’re scrollable horizontally (without displaying a scrollbar). The area is added to the top of the UI box, moving the scroll rect down a bit. We’ll adjust the positioning a bit, making the tab area higher.
Tabs Rect Transform #
Select the UI Box > Tabs child object (should already be selected by creating it).
- Height
Set to 70.
Content Scroll Rect Transform #
Select the UI Box > Scroll View child object.
- Top
Set to 70.
The result should look like this:
Rename the new prefab, e.g. to UI Box Blue Menu Tab Center Scroll.
Top Scroll #
Duplicate your UI Box Blue Menu Center Scroll prefab, open it for editing and change the following settings (in this order).
Rect Transform #
Use the middle center anchor presets.
- Pivot
Set to X=0.5, Y=0. - Pos Y
Set to 0. - Height
Set to 340.
The result should look like this:
Rename the new prefab, e.g. to UI Box Blue Menu Top Scroll.
Bottom Scroll #
Duplicate your UI Box Blue Menu Center Scroll prefab, open it for editing and change the following settings (in this order).
Rect Transform #
Use the middle center anchor presets.
- Pivot
Set to X=0.5, Y=1. - Pos Y
Set to 0. - Height
Set to 340.
The result should look like this:
Rename the new prefab, e.g. to UI Box Blue Menu Bottom Scroll.
That’s it for the prefabs.
Input Keys #
Open the Makinom editor and navigate to Base/Control > Input Keys, we’ll add 2 new input keys.
Menu #
This input key will be used to open our main/overview menu screen.
- Name
Set to Menu.
Input ID Setting 0 #
- Input Origin
Select Key Code. - Positive Key
Select F1.
Next #
This input key will be used to change to the next tab or combatant in our menu screens.
- Name
Set to Next.
Input ID Setting 0 #
- Input Origin
Select Key Code. - Positive Key
Select E.
Previous #
This input key will be used to change to the previous tab or combatant in our menu screens.
- Name
Set to Previous.
Input ID Setting 0 #
- Input Origin
Select Key Code. - Positive Key
Select Q.
UI Setup #
Now we’ll handle the rest of the UI setup.
UI Boxes General Settings #
Navigate to UI > UI Boxes > General Settings, we’ll now set up tab controls and audio.
Default Controls > Tab Settings #
- Loop
Enable this setting. - Next Tab Key
Select Next. - Previous Tab Key
Select Previous.
Default Audio Settings #
- Tab Change
Select switch37.
Now, we’ll add multiple new UI boxes, so navigate to UI > UI Boxes.
UI Box Top Left Fit #
Add a new UI box.
Base Settings #
- Name
Set to Blue Top Left Fit. - UI Layer
Select Layer 1.
Unity UI #
- UI Box Prefab
Select UI Box Blue Top Left Fit.
Override Default Settings > Schematics #
I’m also using the move from left and move to left 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 UIMoveToLeftFadeOut schematic. - Wait
Enable this setting.
UI Box Bottom Left Fit #
Copy the Blue Top Left Fit box and change the following settings.
Base Settings #
- Name
Set to Blue Bottom Left Fit.
Unity UI #
- UI Box Prefab
Select UI Box Blue Bottom Left Fit.
UI Box Top Right Fit #
Copy the Blue Top Left Fit box and change the following settings.
Base Settings #
- Name
Set to Blue Top Right Fit.
Unity UI #
- UI Box Prefab
Select UI Box Blue Top Right Fit.
Override Default Settings > Schematics #
I’m changing to the move from right and move to right schematics from the UI animations schematics to animate this UI box.
- Before Open Schematic
Select the UIMoveFromRightFadeIn schematic. - Before Close Schematic
Select the UIMoveToRightFadeOut schematic.
UI Box Menu Center Scroll #
Copy the Blue Top Right Fit box and change the following settings.
Base Settings #
- Name
Set to Blue Menu Center Scroll.
Unity UI #
- UI Box Prefab
Select UI Box Blue Menu Center Scroll.
Override Default Settings > Schematics #
I’ll use the default schematics
- Own Schematics
Disable this setting.
UI Box Menu Tab Center Scroll #
Copy the Blue Menu Center Scroll box and change the following settings.
Base Settings #
- Name
Set to Blue Menu Tab Center Scroll.
Unity UI #
- UI Box Prefab
Select UI Box Blue Menu Tab Center Scroll.
UI Box Menu Top Scroll #
Copy the Blue Top Right Fit box and change the following settings.
Base Settings #
- Name
Set to Blue Menu Top Scroll.
Unity UI #
- UI Box Prefab
Select UI Box Blue Menu Top Scroll.
Override Default Settings > Schematics #
I’m changing to the move from above and move to above schematics from the UI animations schematics to animate this UI box.
- Before Open Schematic
Select the UIMoveFromAboveFadeIn schematic. - Before Close Schematic
Select the UIMoveToAboveFadeOut schematic.
UI Box Menu Bottom Scroll #
Copy the Blue Menu Top Scroll box and change the following settings.
Base Settings #
- Name
Set to Blue Menu Bottom Scroll.
Unity UI #
- UI Box Prefab
Select UI Box Blue Menu Bottom Scroll.
Override Default Settings > Schematics #
I’m changing to the move from below and move to below schematics from the UI animations schematics to animate this UI box.
- Before Open Schematic
Select the UIMoveFromBelowFadeIn schematic. - Before Close Schematic
Select the UIMoveToBelowFadeOut schematic.
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 set up template HUDs we’ll use for displaying combatant information in our menu screens.
