In this tutorial we’ll set up the UI system and some UI prefabs for our inputs (buttons, etc.).

Everyone hates setting up UI, it’s always kind of a drag. So, let’s make this as quick as possible.

The UI setup will be split into multiple tutorials to keep them short and focused on certain topics. We’ll start with the initial UI system setup in this tutorial, afterwards set up UI boxes and finally set up flying texts. At a later time we’ll also add a battle HUD to show information of our player.

For now we’ll set up:

• UI system in the editor
• TextMesh Pro in Unity
• UI environment scene (for prefab editing)
• some input prefabs
• UI layers
• UI animation schematics

For more details on the initial UI system setup, check out this tutorial.

Let’s get to it!

Initial UI System Setup #

This is usually one of the first things you do in a new project – changing the project’s UI system, setting up TextMesh pro and adding a scene for editing UI prefabs.

You can learn more about UI systems in this documentation.

Changing the UI System #

First, we change the project’s UI system. We’ll use the Unity UI module – this UI system uses game objects with UI components to display UI content, i.e. we’ll mainly use prefabs for this.

For now, we’ll just change the UI system of the project.

Open the editor and navigate to UI > UI System and change the following settings.

Changing the UI system will prompt a confirmation dialogue:

In some cases it can happen that showing this confirmation dialogue causes an error (mostly on Mac OS) – if that’s the case, disable the Show Confirmation Dialog option above the UI System Type setting. This’ll immediately change the UI system instead of showing the confirmation dialogue.

Save Changes #

That’s it for now in the editor.

Save the changes using the Save Settings button at the bottom of the editor.

Also, with the UI system set up, the screen fades of our scene changes will now work.

TextMesh Pro Setup #

Make sure TextMesh Pro (TMP for short) is imported in your project (e.g. via the Unity Package Manager). For more details on using TMP, check out this tutorial.

Import Essential Resources #

Import the TMP essential resources via the Unity menu: Window > TextMeshPro > Import TMP Essential Resources

Depending on your Unity/TMP version this might also be located somewhere else.

Default Font and Sprites #

The tutorial assets include a font and sprites to use, but we’ll need to let TMP know about it and set it up as our default font and sprites.

Select the TMP Settings asset, which should be located in Assets/TextMesh Pro/Resources/. You can change TMP’s settings in the inspector.

UI Enviroment Scene #

When editing UI prefabs, Unity will use a canvas that is most likely not matching the canvas used in your game. This can lead to your prefab’s position and size not matching the in-game’s position and size.

To solve this issue, set up a UI Environment scene with a correctly set up canvas matching your Default Screen Size.

Creating the scene #

After setting your Default Screen Size (or after changing it) in the Makinom editor, create a new scene using the Unity menu: File > New Scene

E.g. use the Empty scene to create a completely empty scene.

Use the scene hierarchy’s context menu to create a canvas with the correct setup: Makinom > UI > Canvas

This’ll create a Canvas with the same set up as it’d be in the running game (when not using a canvas prefab), i.e. it’ll use a Canvas Scaler to scale content to different resolutions and aspect ratios.

Creating Makinom/ORK UI via the context menu will make sure it’s placed on a canvas that fits the UI setup of your project, using the same canvas setup as you just created.

Save the scene somewhere in your project, e.g. as UI Environment Scene.

Using it for prefabs #

Use the Unity menu to open the project settings: Edit > Project Settings…

Select the Editor tab and change the following setting.

Close the project settings.

Now, when editing a UI prefab, e.g. a UI box or an input prefab, they’ll use this scene and it’s canvas, making sure that their placement and size remains correct.

Input Prefabs #

With our initial UI system setup finished, we can now get to setting up prefabs for our inputs – i.e. buttons, toggles, sliders, text fields, etc.

While we only use buttons in this tutorial series, you should always set up all different input variants to have them available when needed. Learn more about this in the initial UI setup tutorial.

We’ll create our UI prefabs in the UI Environment Scene we set up – but remember to also remove the created game objects from the Canvas afterwards to not have it part of our prefab scene.

We can create ready-to-use input setups using the scene hierarchy’s context menu: Makinom > UI Box > Input (Button) has different variants for creating buttons, Makinom > UI Box > Input (Value) has variants for creating value inputs

Button #

Button prefabs are used to create buttons/choices in menus or choice dialogues.

Inputs can display multiple content, we’ll use this for the button to display the regular content (e.g. name and icon of an item) and an information content (e.g. quantity of the item) separately. This is done via additional content, which is identified by it’s content ID – which is used in other places to set the content that’s displayed (e.g. in a battle menu).

Create a new button with info content using the context menu: Makinom > UI Box > Input (Button) > Choice Info Button

This creates a button with the additional content for our information added – it uses the content ID info. This is all already set up for us, so we don’t have to worry about it.

Image #

Let’s change the look of the button, this is done in the Image component of the root Choice Info Button game object.

Layout Element #

The button comes with a Layout Element component to set a minimum height for the button. We’ll increase that.

TextMeshPro – Text (UI) #

And we’ll change the font color of the content and info texts to white.

This is done on the TextMeshPro – Text (UI) components on the Choice Info Button > Main Content > Text child object (for the main content) and the Choice Info Button > Info Content > Text child object (for the info content).

Create Prefab #

Create a prefab out of the Choice Info Button game object by dragging it into the project view.

Remove the game object from the canvas.

Tab Button (Optional) #

While we don’t use this (or the other input prefabs) for this tutorial series, I’d recommend setting them up anyway.

The tab button prefab can e.g. be used by inventory menus to display different item types as tabs.

Create a new tab button using the context menu: Makinom > UI Box > Tab > Tab Button

Like with the regular button, we’ll change the sprite, layout and font color.

Image #

Layout Element #

Horizontal Layout Group #

We’ll increase the padding.

TextMeshPro – Text (UI) #

This time the component is found on the Tab Button > Text child object.

Create Prefab #

Create a prefab out of the Tab Button game object by dragging it into the project view.

Remove the game object from the canvas.

Toggle (Optional) #

Create a new toggle using the context menu: Makinom > UI Box > Input (Value) > Toggle

We don’t need to make any changes – so just create a prefab out of the Toggle game object by dragging it into the project view.

Remove the game object from the canvas.

Text Input (Optional) #

Create a new text input using the context menu: Makinom > UI Box > Input (Value) > Text Input

We don’t need to make any changes – so just create a prefab out of the Text Input game object by dragging it into the project view.

Remove the game object from the canvas.

Int Slider (Optional) #

Create a new toggle using the context menu: Makinom > UI Box > Input (Value) > Int Slider with Value

Similar to the info button, this slider input will show the value using an additional content. However, this time, it uses the content ID value.

We don’t need to make any changes – so just create a prefab out of the Int Slider game object by dragging it into the project view.

Remove the game object from the canvas.

Float Slider (Optional) #

Create a new toggle using the context menu: Makinom > UI Box > Input (Value) > Float Slider with Value

We don’t need to make any changes – so just create a prefab out of the Int Slider game object by dragging it into the project view.

Remove the game object from the canvas.

UI System Setup (continued) #

Back to the editor – we’ll now use the input prefabs we created as the default UI prefabs and set up UI layers.

UI System Prefabs #

Open the editor and navigate to UI > UI System.

Default UI Prefabs #

UI Layers #

UI layers are used to order your UI content (e.g. UI boxes and HUDs), a higher layer (in the list) will display it’s content above a lower layer. You can learn more about them in this Makinom documentation.

A new project comes with 3 layers set up:

• Flying Texts
• Layer 1
• Screen Fader

The Flying Texts layer is set up to display flying texts (e.g. for damage numbers, etc., we’ll set them up later). The Screen Fader layer is set up to, well, fade the screen (e.g. fading to black on scene changes).

Navigate to UI > UI Layers, we’ll add 2 new layers, one to display menu backgrounds and one to display HUDs.

Background Layer #

Move the new layer between Flying Texts and Layer 1 (i.e. it should have the ID/index 1).

HUD Layer #

Move the new layer between Layer 1 and Screen Fader (i.e. it should have the ID/index 3).

Save Changes #

And that’s it for the settings.

Save the changes using the Save Settings button at the bottom of the editor.

UI Animation Schematics #

We’ll create a two very simple schematics to fade in and fade out UI boxes and HUDs.

When animating UI using schematics, you have access to the UI (UI box, HUD or flying text) using local selected data via the selected key ui. Selected data, in short, allows you to store any content into data lists and access them in different nodes in schematics. E.g. this can be a list of game objects, an ability of a combatant or a combatant (or multiple combatants). You can learn more about selected data in this Makinom documentation.

You can also check out more detailed tutorials with different setups and downloadable schematics for open/close animations and moving flying texts.

Fade In Schematic #

Navigate to Schematics.

Change UI Color #

Add Node > UI > Change UI Color

This node is used to set or fade the color of UI elements (e.g. flying texts, UI boxes or HUDs).

We’ll do a short fade in (alpha value).

And that’s it for the schematic. Click on Save Schematic to save it, e.g. as UIFadeIn.

Remember to keep your schematics organized, e.g. I’m storing it in a sub-folder: Assets/Schematics/UI/

Fade Out Schematic #

The same as for fade in, just with reversed colors.

Change UI Color #

Add Node > UI > Change UI Color

And that’s it for the schematic. Click on Save Schematic to save it, e.g. as UIFadeOut.

 

Next, we’ll set up the UI boxes.