Racing Car Game # Day 8— Main Menu & Loading Screen

Objective: Create the Main Menu and Loading Scene

In the previous article, Racing Car Game # Day 7 — Mobile Development, we created mobile controls and got a feel what it will look like on a mobile device using the Device Simulator.

In this article, we are going to wrap up this series as I prepare my project for submission. The purpose of this project was to showcase that I can create a single project that can deploy to multiple platforms all with their own unique inputs. My weapons of choice were Windows Desktop and mobile devices. In this article we will finish up with a Main Menu and Loading screen.

Create the Main Menu

Anyone can create a main menu with a static image. We are going to make our main menu show off parts of the game with camera panning. To achieve this, we need to install Cinemachine from the Package Manager.

Next, we are going to pin the Timeline window by going to Window > Sequence > Timeline and dragging it where you can see it.

In the Hierarchy, we will create an empty game object. Rename it to Timeline and with the Timeline game object selected, in the Timeline window, click the Create button. This will add a Playable Director component to it.

In the first cut scene, we create going to create two virtual camera and smoothly transition between their positions. Create a virtual camera and rename to CM Garage. This will change our viewing area to match that of the virtual camera. I am now going to reposition the viewing of the scene view.

Create the second virtual camera, rename it. With the Timeline game object select and create a Cinemachine track.

Drag the Main camera into the slot and drag in the two virtual camera into the timeline side by side.

If you were to press play in the Timeline, you will see that it will go from one shot to the next. We are going to pan between the two cameras and to do this we need to adjust the markers shown below. Between the two cameras, at the top, click and drag to the left. Then click back on the centre line and drag to the right.

Press play now and we have a smooth panning shot.

I am going to pick two other locations and do the same.

Let’s add a fade to back to smooth out the different cut scenes. To achieve this, create a UI image, name it FadeToBlack, make it take up the full screen and change the colour to black.

We can use the Timeline to create these fade to black animations. Click on the Timeline game object, in the Timeline window, create an Animation Track.

Drag the FadeToBlack game object to the slot and an Animator component will be added to it.

Press the record button to record our key frames. Make sure the Timeline is at zero and select FadeToBlack object, right click the Color attritube and Add Key.

I am changing the timeline to display seconds instead of frames and go to half a second later.

Change the alpha to zero

Move the marker 0.5 seconds from the transition of the two camera and Add a Key to the colour, where the point where they swap over, alpha to 255 (full black) and so on.

Finally to make this loop, click on the Timeline game object and on the Playable Director change Wrap Mode to Loop.

Play and Quit Button

For the buttons, I used the standard UI Button with TextMeshPro. I removed the Source Image, adjusted the colour to black and made it slightly transparent.

Create a MainMenu script and add it to the Canvas. Type the following in the script and ensure the methods are public so we can call them from the button’s onclick event.

The Quit button will only occur on the Windows Standalone. The StartGame will load the LoadingScreen scene and the QuitGame method will quit the application.

Now all we need to do is call these from their OnClick event.

Click on the PlayButton, drag the Canvas which has the MainMenu script on it, to the OnClick slot, then choose the MainMenu > PlayGame.

Do the same for the QuitButton but choose QuitGame method.

Create a Loading Screen

Create a new scene and name it LoadingScreen.

To black out the screen, click on the camera and change the Clear Flags to Solid Color and I picked an off black, hex #171718. Does not have to be exact but I prefer not using full black or full white.

Create a UI Image and change the canvas to Scale With Screen Size with a resolution of 1920 by 1080

Back on the Image, pick the image you want to display and in my case, I ensured the aspect ratio was preserved. Lastly rename to CarImage.

Let’s now focus on the loading bar. I create a simple White square image in MS Paint. Drag it into the project and changed the Texture Type to Sprite.

Create an UI Image under the Canvas and rename it to ProgressBar and use the White Square image as its Source Image. We now get some extra options.

First let’s reposition the Progress Bar and for it to span the length of the placeholder image. Change the color as well.

Now back to those extra options, change the Image Type to Filled and the Fill Method to Horizontal. Move the Fill Amount and this is what we will modify to show the progress.

Create a new script and name it LoadLevel and type the following.

Drag this script onto the Canvas and drag the ProgressBar image onto the slot.

This will start a coroutine that will monitor the progress on a scene that is loading while this scene is running. As soon as the loading of the next scene has complete, it transitions to that scene.

Save the LoadingScreen scene and remember to add the MainMenu, LoadingScreen and Game Scene into the build in that order.

Build your game and try it out.

That wraps up this series. You can take game so much further with improving the Main Menu by adding Post Processing, depth of view and other effects, AI and multiplayer, auto-flip when upside, auto-restart when car is stuck, anti-roll to ensure the car doesn’t roll, countdown, lap tracker, etc. I know I will revisit this project. Please share your work with me in the comments so I can check it out.

If you enjoyed reading this article give me a Clap, also if you would like to see more, “Follow” me, so you may be notified of future releases. You may also send me a message if you need any help or if there is something you think I can improve.