Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Main Menu Stylization | Fundamentals of UI
Unity for Beginners

bookMain Menu Stylization

Swipe to show menu

Stylizing the Main Menu and Adding Interactive Player Preview

Once your main menu works functionally, it's time to make it visually appealing and interactive.

Custom Fonts and UI Styling

  • select your UI Text elements (buttons, labels, titles);
  • assign custom fonts and vibrant colours;
  • move interactive elements (buttons, dropdowns) to the bottom of the Hierarchy to ensure they aren't covered by other UI or background elements.

Adding Backgrounds and Animated Player

  • add background, floor, or decorative sprites as UI images to give depth;
  • copy the player GameObject from the game scene to the menu for animation preview;
  • remove unnecessary components (e.g. Rigidbody2D, PlayerController) so the player is static but animated.

Change the Canvas type from Overlay -> Screen Space - Camera and assign your main camera.

This allows the player and background to render properly in front of each other.

Buttons and Dropdown Styling

  • apply a custom sprite to button backgrounds;
  • adjust text and button dimensions to match the visual style.

Displaying Highscore in Menu

  • add UI -> TextMeshPro - Text elements: one writing "Highscore:" and one for the highscore value;
  • reference the PlayerPrefs highscore value in the menu Canvas;
  • optionally scale it (e.g. highScore * 10) for emphasis.

Extra Touch: Quick Menu Access

In the Level scene, you can let the player return to the main menu by checking for Escape key input:

void Update()
{
   if (Input.GetKeyDown(KeyCode.Escape))
   {
       SceneManager.LoadScene("MainMenu");
   }
}

1. How can you display the animated player in the main menu so that it appears animated but does not move or respond to gameplay scripts

?

2. Why do you change the Canvas type from Overlay to Screen Space – Camera in the main menu?

3. You notice that dropdowns or buttons sometimes get covered by other UI elements in the menu. What’s the simplest way to fix this?

question mark

How can you display the animated player in the main menu so that it appears animated but does not move or respond to gameplay scripts ?

Select the correct answer

question mark

Why do you change the Canvas type from Overlay to Screen Space – Camera in the main menu?

Select the correct answer

question mark

You notice that dropdowns or buttons sometimes get covered by other UI elements in the menu. What’s the simplest way to fix this?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 6. Chapter 3

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Section 6. Chapter 3
some-alt