Tutorial: Title Screen - CodingDino/Dino-Unity-Toolkit GitHub Wiki

In this tutorial, you will learn how to create a simple title screen which changes to a level when a button is clicked. We'll accomplish this by creating a new scene for our title, adding text for the title itself, and adding a button that will take the player to the first level of the game.

This tutorial already assumes you have a level created in a scene. In the example, we'll call this scene "Level1", but yours can be called anything you want.

Before we start, let's clearly state our goal behaviour:

When the player clicks the "Play" button, take them to the level screen.

Setup

First, create a new scene for your game by going to File > New Scene. Make sure to save any changes you had to the scene that was already open!

Now that your new scene has been created, go ahead and save it by going to File > Save Scene. Make sure to use a Scenes folder to keep all your scenes tidy and in one place! Call your new scene something like "Title".

Now you have your new Scene, but it is empty. We will be using Unity's UI system to create our title screen, so let's add a UI element. Go to GameObject > UI > Text to add a text object to contain your game's title. This will create a Canvas GameObject to hold the UI, and a Text GameObject for your title. Rename the Text GameObject to say "Title" and change the text field from "New Text" to the title of your game. You may want to change the position, size, colour, or font of your title to suit your idea of your title screen.

If you have an image for your title instead of text, you can do the same as the above instructions, but instead create a GameObject > UI > Image and drag your image into the sprite slot for the Image component.

Let's add a Play button. Create a new button by selecting GameObject > UI > Button. This will create a button with a simple default button graphic and some text. Rename your button to be called something more specific, like "PlayButton".

There will be a text object inside your button that contains the label for the button. Rename it to be something more specific like "PlayButtonLabel", and change the text displayed to "Play".

Action

We now have a title screen with a title displayed on it, and a button, but we don't have any behaviour. If you run the game, clicking the button does nothing. Looking back at our original goal, we see our Action is the second half:

... take them to the level screen.

We want to change to the level screen - aka, our "Level1" scene. To do this, we need a SceneAction. Select your PlayButton and add the SceneAction component. We'll use ActionLoadScene() to perform our action, but as always, this can't be performed without an Activator to trigger it.

Activator

The first part of our goal above describes the Activator for our Action:

When the player clicks the "Play" button...

In this case, the Activator is built in to Unity - it's the button itself. If you click on the PlayButton GameObject, you'll see it has a Button component. This has an "OnClick()" section - this is where you can add your Action, which will be performed when the button is clicked. Click the plus sign and drag in your PlayButton, then find the SceneAction in the dropdown and choose ActionLoadScene. Finally, type your scene's name ("Level1" in our example) into the box.

Remember that if you haven't already, you will need to add your Level1 scene to the build settings. You should add your new Title scene as well! To do this, open the build settings with File > Build Settings and drag the scenes into the build scene list in the popup window.

Test and Expand

Run the Title scene and try the button - it should now take you to your Level1 scene!

You can use this same technique to create a "How to play" scene - add another button in your Title to take you to the "How to play" scene, then add a button in "How to play" to take you back to the title.

Alternate Versions

You can alter this tutorial to change how the title screen works:

  • Add multiple buttons that take you to different levels or other scenes (such as a "How to play" scene). To do this, simply copy the GameObject button and change the text on it.
  • Make it so you can click anywhere to take you to the level, not just on the button. To do this, stretch the button so it takes up the entire screen and make the image transparent. Alternatively, you can use the key button technique below and set up a key button for the mouse click (default is "Fire1").
  • Make it so you can press a keyboard or gamepad button instead of clicking. To do this, add an InputButtonActivator to your button and set it to change the scene when a button is pressed.