Disclaimer: I am neither a professional game developer nor am I a professional programmer. I doubt I am following best practices. This is just what worked for me at the time. Hopefully it works for you if you’re playing along while reading!
Version of Unity used: 2019.4.13f1 Personal
The previous posts in this series can be found under the CardConquest category on this blog. The github for the project can be found here. Zip archives for specific posts can be found here.
In this post, I am going to create a new opening “Title Screen” scene that displays to the user the name of the game and has a basic user interface to start the game or quit the game. Later, I will add on to this with an options menu and so on, but for now, only the start/quit functionality.
Creating a New Scene
In your Unity project, go into the “Scenes” directory, right click, go to “Create >,” and then select Scene.
Name the screen “TitleScreen” and hit enter. Congratulations, you now have a new scene!
Before you move onto the new scene, let’s take care of a setting in the current scene first. You will add the GamePlay scene to your “Scenes in Build,” so that when you build and run your game, the GamePlay scene will be included. Click on “File” then “Build Settings…”
In the new Build Settings window, click on “Add Open Scenes.”
You should now see “Scenes/GamePlay” in the “Scenes in Build” section.
That’s all you need to do for now. Double click on “TitleScreen” in the Scenes directory and you will open the scene you just created.
Configure the Scene
First, follow the same process you did to add GamePlay to the “Scenes in Build” in Build settings to add the new TitleScreen scene to “Scenes in Build.”
Take note of the “0” and “1” next to GamePlay and Scene. The important thing to know right now is that the scene marked as “0” will be the first scene to run when you build and run your game. GamePlay is set to 0, so if you build and run now, the game will start in the GamePlay scene.
That, unfortunately, is not what you want! you will want the game to first load the TitleScreen scene. This can be easily fixed by dragging TitleScreen to the top of the list so that it is labeled as 0.
Right now, in this stage of the game’s development, the “Scenes in Build” stuff isn’t that important, but it’s nice to get it out of the way now.
With that out of the way, you can make one change to the configuration of this scene’s camera. Select the “Main Camera” in the hierarchy and then in the Inspector window under “Camera,” set the background color to black. Everything else can be left the same.
In the “Game” view, you should now see a blank black screen.
Creating the Title Screen Interface
Now to create the TitleScreen interface that the user will see and interact with. Same as with the Esc Menu interface from the previous post, start by adding a canvas to the scene. Right click in the hierarchy, go to “UI”, then select “Canvas”
Configure the Canvas
Select the new Canvas in the hierarchy, and then look in the Inspector window to configure it. This will follow the same configuration as the Esc Menu configuration. Under “Canvas,” set the “Render Mode” to “Screen Space – Camera” and then set the “Render Camera” to the Main Camera in the scene.
The sorting layer and order in layer shouldn’t matter for this in the TitleScene since this interface will be the only thing the user can interact with in the scene.
Next, under “Canvas Scaler”, set the “UI Scale Mode” to “Scale With Screen Size.” Then, set the “Reference Resolution” to 1280×720, and then finally, make sure that the “Screen Match Mode” is set to “Match Width or Height” and set the “Match” value to 0.5.
Create the Interface – Title Text
The first thing to add in the interface will be the title text for the game. Right click on the Canvas, go to “UI,” then select “Text”
Rename the new Text object to “TitleText” to make it easier to keep track of, then select it in the hierarchy and view it in the inspector.
I wanted to position my TitleText near the top of the screen. First, in TitleText’s Rect Transform, I wanted to set the anchor to the top of the screen. To change the anchor, click on the cross-hair looking thing near the top left of the Rect Transform.
After you click on the anchor icon, it should display the “Anchor Presets” window. Select the anchor labeled “Top” on the left, and “Center” at the top.
Setting the anchor for the TitleText to “top, center” will change the Rect Transform position values to now be relative to the top and center of the screen.
The values I set for the position of TitleText were X:0, Y:-150,Z:0. I set the width to 1000 and the height to 150.
Next, configuring the text itself. I set the “text” to the title of my game, Card Conquest, but you can set it to whatever you like. I set the font to the ThaleahFat font I imported in the Esc Menu post. I set the font size to 150.
Next, I set the paragraph alignment of the text to centered and changed the color to the terminal create color I used in the Esc Menu that has an RGB value of R:51,G:255,B:0.
You should now see bright green text in your game view.
Adding Some Buttons
Like the Esc Menu (I seem to be typing that a lot…) there will be two buttons in the TitleScreen interface: Start Game and Exit Game. The functions of the buttons should be self explanatory. One starts the game and loads the GamePlay scene, while the other quits the game.
Right click on Canvas in the hierarchy, go to UI, then select Button
Rename the button to StartGameButton. Then, select StartGameButton in the hierarchy and view it in the Inspector. In the Rect Transform of StartGameButton, set the width to 300 and the height to 75. Also, make sure the position is set to 0 for everything.
Under the “Image” section of StartGameButton, make sure that “Fill Center” is unchecked.
Back in the hierarchy, expand the StartGameButton object and select its “Text” child object.
In the inspector window, under the “Text” section, set the text to “Start Game.” Set the font to TheleahFat. Then, set the font size to 50. Make sure that the alignment is centered. Finally, set the Color to the same green color as the TitleText, R:51,G:255,B:0.
You should now see your “Start Game” button
To create the “Exit Game” button, go back to the hierarchy and copy/paste the StartGameButton. After StartGameButton has been pasted, rename the new button to ExitGameButton.
To position ExitGameButton, I set it’s Pos Y value to -100.
I then just changed the text to “Exit Game.” Now, you have a title screen menu!
Title Screen Manager Script
To make it so the buttons actually do something when pressed, create a TitleScreenManager object in the scene. Right click in the hierarchy and create a new empty object.
Rename the new object to TitleScreenManager.
In the “Scripts” directory of the project, first create a new sub-directory called “TitleScreenScripts.” This is to help organize the scripts a little so you know which ones are specific to the TitleScreen scene and which ones are in GamePlay. Then, in the new TitleScreenScripts directory, create the TitleScreenManager.cs script.
Drag and drop TitleScreenManager.cs onto the TitleScreenManager object in the hierarchy. Then, open TitleScreenManager.cs in Visual Studio by double clicking it. Two new, simple functions will be created for the two buttons, StartGame and ExitGame.
StartGame will be used to load the GamePlay scene from the TitleScreen scene. To be able to load a scene, Unity Engine’s “SceneManagement” will be used. To use SceneManagement in your script, you must first add the following to the top of TitleScreenManager.cs:
using UnityEngine.SceneManagement;
The StartGame function will be very simple. It’s one line long using SceneManager.LoadScene to load the “GamePlay” scene.
public void StartGame()
{
SceneManager.LoadScene("Gameplay");
}Save TitleSceneManager.cs and go back into Unity. Select the StartGameButton in the hierarchy and then view it in the Inspector window. scroll down until you see the “On Click ()” section and then click the “+” sign. Add “TitleScreenManager” to the button, and then select the StartGame function from TitleScreenManager as the function to run when the button is clicked.
A similar process is followed for the Exit Game button. Back in TitleScreenManager.cs, create an ExitGame function with the following code:
public void ExitGame()
{
Application.Quit();
}Save TitleScreenManager.cs and then back in Unity add ExitGame to ExitGameButton’s “On Click ()” function.
Wow! You now have a Title Screen scene/menu! Lets see that video…
wowwwww……..
Next Steps
Next, I think I will start on making headway into the “gameplay” of the game, and start making game “phases” the user has to work through. Hopefully I get to it soon!