Creating a Main Menu Mock-Up in Unity 2021 URP

We’ll put together a quick Main Menu mock-up UI in this article using the assets from previous articles.

Scene Overview
In our scene, we’ll need to add the Canvas, several UI images, a TMP_Text element, and some TMP_Button elements.

When you add your first Text Mesh Pro element, you will most likely see the above dialog.

Click the “Import TMP Essentials” button and close the “TMP Importer” window.

We only need to anchor two elements in this scene, the “MainMenu” empty game object that parents our elements and the “X” element which exists outside of the “MainMenu” parenting structure.

Anchor the “X” element to the top right corner of the scene and adjust it’s Rect Transform position values as needed.

Anchor the MainMenu empty parent element to the center of the screen.

Add a UI image and name it “Title”.
Then add a “Button — Text Mesh Pro” as a child element of the Title element.

On the Text element settings, type in “Main Menu” for the Text Input field and check the “Auto Size” box.
This will force the font size to fit the boundaries of your text element.

Also, set the alignment to be center vertically and horizontally and add the Underlay feature on the material.

Create the Text Mesh Pro Button UI elements and assign your desired sprites to each one.

Delete the Text child element for each button since we will be using symbols instead.

Resize and reposition your buttons as needed.

Sometimes the sprites or images we have to work with aren’t “correct” out of the box.
The arrows from the asset I’m using are horizontal, but I want them to be vertical.

A simple modification to the Z rotation value on the Rect Transform for each button will solve this minor issue.

And that’s it, you have a simple Main Menu mock-up!

Remember, a mock-up is just the visual aspects of the UI.

You’ll need to do some work in code to bring these elements to life.