MENU 01 UI Boxes

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.

Sitemap
Categories
Search

© 2015 Gaming is Love e.U.

Disclosure: This site may contain affiliate links, which means I may receive a commission if you click a link and purchase something that I have recommended. While clicking these links won’t cost you any money, they will help me fund my development projects while recommending great assets!