Learn how to make Games: Unity (Part 12) - Adding Main Menu UI as well as Animating the UI

Hi I'm Jerry from Bliz Studio LLC. Adding on to the game, I will look at adding on a Main Menu, buttons, using Playmaker within Unity 3D to make the UI work, and looking at the animation system to animate the UI elements. How to Make a Video Game With Unity3D and Playmaker Series: Part 1: Introduc

Part 12 of the series gives the space shooter a proper front door: a main menu with an animated title and play button, built with Unity's animation system and wired into the existing game-reset logic with one small Playmaker FSM.

Step 1 — Lay out the menu

Create a new canvas named UI - Main Menu. Add a TextMesh Pro title ("Space Spectacular"), centered, bold, split onto two lines, with a blue outline effect and a deeper face color. Below it, a UI Button restyled with a brighter color and bold white all-caps PLAY text at around 30 pt. Behind everything goes a fully opaque black panel — and note the ordering rule: within a canvas, Unity draws children top-to-bottom in the hierarchy, so the panel must sit first (above the text and button in the list) to render behind them. Finally, set the canvas sort order to 5 so the menu draws over the in-game UI canvases.

Step 2 — Animate the title and button

Open the Animation and Animator windows (the Animator is the state machine for switching between clips; you only need the Animation window today). With the menu selected, create a clip named main menu in a new Animations folder and drop the sample rate to 12 frames per second. Hit record: the title starts high with its vertex-color alpha at 0, keyframes down past its resting spot around frame 6 while fading to full alpha, then settles back up — a little overshoot bounce as it fades in. The button does the mirror image, rising from below while its image and text alphas fade in; drag its keyframes later on the timeline so it starts after the title is moving. Then turn recording off — while the red button is lit, any stray nudge becomes a keyframe.

Step 3 — Pause the game at startup

A new Main Menu UI empty under Game Managers gets an FSM whose start state deactivates everything that shouldn't run behind the menu: the enemy spawner, the rocket, and all three hearts — conveniently, the existing Reset Game FSM already lists these same Activate Game Object actions, so copy them over and flip each to deactivate. Set the global health back to 3 here too. Score and health UI can stay; the opaque menu covers them.

Step 4 — Wire the play button

Drag the button into the start state and add UI Button On Click Event, sending a play game event to a new state. That state does two things: Send Event By Name targeting the Reset Game object's FSM, firing its global game reset transition (copy-paste the event name to avoid typos) — which turns the spawner, rocket, and hearts back on — and an Activate Game Object that deactivates the main menu canvas. Reusing the reset FSM means the menu needs no duplicate turn-everything-on logic.

Step 5 — Two debugging lessons

First test: the menu animation loops forever. Select the clip in the project and uncheck Loop Time. Second: the button never animates, and its rows show yellow in the Animation window — yellow means the clip can't find the object because it was renamed after recording. Double-click the yellow path and retype the current name (start button, including the nested button/text path) and the rows turn black, reconnecting the keyframes. With both fixed, the menu fades in, PLAY resets the game, and the menu disappears — a complete start flow.