e0210ed2-64a0-5eaa-8005-304100ccdfcb:zx7pohSEomVRos4yXEpnbZ

Overview

Add a Title Canvas

Customize the title text

Add a Player Select button with proper scaling

Adjust canvas scaling mode

Create a spawn point

Create the remaining three spawn points

Configure the Game Manager

Set up the Player Selection screen

Make the Player Select button work properly

Test the game loop

Optional: More things to try

Optional: Review the GameManager script 

Next steps

Start menu and Game Manager

8.0 - Overview.mp4

8.1 - Add a Title Canvas.mp4

8.2 - Customize the title text.mp4

8.3 - Add a Player Select button with proper scaling.mp4

8.4 - Adjust canvas scaling mode.mp4

8.5 - Create a spawn point.mp4

8.6 - Create the remaining three spawn points.mp4

8.7 - Configure the Game Manager.mp4

8.8 - Set up the Player Select screen.mp4

8.9 - Make the Player Select button work properly.mp4

8.12 - Expert - Add tanks of different colors to your title screen.mp4

Create a Title screen, set up a Game Manager, and add a Player Selection screen.

Tanks

Game

 Tanks: Make a battle game for web and mobile

In this tutorial, you'll create a Title screen for your game, set up a Game Manager to handle game logic, and add a Player Selection screen where players can choose their tanks before starting a match. You’ll be able to set the spawn points for the tanks, select which tanks appear in the Player Selection screen, and how many rounds are required to win the game.

The Title screen serves as the game's main menu, providing a clear starting point for players. In this step, you'll create a Canvas to display the title. A Canvas is a type of GameObject that serves as a container for UI elements in the scene. 

Right-click in the Hierarchy window and select UI > Canvas.

Rename the new GameObject “TitleCanvas”.

2.  Frame the TitleCanvas GameObject in 2D mode for easier UI editing

In the Scene view, select the 2D toggle in the Scene view toolbar.

Note: If you don’t see the 2D toggle, you might need to expand the Scene view or enable the View Options overlay (open the Scene view’s More (⋮) menu, select Overlay Menu, and enable View Options). 

Select the TitleCanvas GameObject in the Hierarchy window, then hover over the Scene view and press F to frame it in view.

Alternatively, you can double-click the TitleCanvas GameObject in the Hierarchy window.

This will zoom you way out to reveal a giant rectangle in the scene — this is the Canvas area. 

In the Hierarchy window, right-click the TitleCanvas GameObject and select UI > Text - TextMeshPro, then rename it “TitleText”.

TextMeshPro is a Unity text rendering system that provides tools for typography and offers excellent clarity across devices. 

You should see New Text appear at the center of the Game view. 

At this stage, you have a TitleCanvas GameObject set up with a basic text element, ready for styling in the next step.

Now that you have a TitleText GameObject, you can edit it to look like an appropriate title. This includes setting the font, size, alignment, and color.

Select the TitleText GameObject in the Hierarchy window.

In the Inspector window, use the foldout (triangle) to expand the TextmeshPro - Text (UI) component. In the Text Input box, replace the default “New Text” with "TANKS!" or another title of your choosing. 

Note: If you make a longer title, it may get split onto two lines. Don’t worry, you’ll fix that soon.

Select the Font Asset picker (⊙) and select one of the available fonts. 

Set the Font Size property to something around 60.

Note: If you choose a large font, the title may get split onto two lines. Don’t worry, you’ll fix that next.

Open the Text Wrapping Mode property dropdown and select No Wrap to prevent the text from splitting into multiple lines.

Set the Alignment property to Center (Horizontal) and Middle (Vertical) to center the text on the UI element.

The default white text looks good, but if you want to change the color, use the Vertex Color property and choose a different color.

Your game now has a properly formatted title.

Next you need a button that allows players to move to the Player Selection screen. In this step, you'll create and style a new Player Select button under the title.

Right-click the TitleCanvas GameObject in the Hierarchy window, then select UI > Button - TextMeshPro.

Rename the new GameObject “PlayerSelect_Button”.

The button will appear directly on top of the title — don’t worry, you’ll fix that soon.

Use the foldout to expand the PlayerSelect_Button GameObject in the Hierarchy window and select its Text (TMP) child GameObject.

In the Inspector window, in the Text Input box, replace the default “Button” with "Player Select".

Select the Font Asset picker (⊙) and select one of the available fonts (ideally matching the title font).

Adjust the Font Size property and Vertex Color property to your preference.

Note: The text may not fit nicely on the button — you’ll fix that next. 

3.  Adjust the button size, style, and position

Select the PlayerSelect_Button GameObject in the Hierarchy window.

In the Inspector window, increase the Width and Height properties of the Rect Transform component to fit the text.

Tip: You can click and drag the property name to the right or left to increase or decrease the value. 

Decrease the Pos Y property value to position the button appropriately below the title.

If you want, choose a new color for the button background with the Color property of the Image component.

You can also change the text color with the Vertex Color property in the Text (TMP) child GameObject.

Your Title screen now has a Player Select button, but it doesn’t work yet. You’ll add that functionality a bit later. 

Your Title screen may look perfect in your Game view right now, but if someone is using a large or high resolution screen, the text may appear very small. In this step, you’ll set the canvas to scale with the screen size so that the text keeps its proportions relative to the screen, rather than maintaining a constant pixel size.

1.  Preview your game at different resolutions 

In the Game view, open the Aspect Ratio dropdown, which is probably set to Free Aspect. It could also be set to another resolution (for example, Full HD), or another aspect ratio (for example, 16:9)

Test different screen resolutions and aspect ratios in the Game view and notice how the text gets very small at higher resolutions. 

When you’re done testing, select Free Aspect, which allows you to freely resize the Game view window to any dimensions.

2.  Set the Canvas to scale with screen size

In the Hierarchy window, select the TitleCanvas GameObject.

Use the foldout to expand the Canvas Scaler component and set the UI Scale Mode property to Scale With Screen Size. 

If the text suddenly becomes too large, you can increase the Reference Resolution property  X and Y values to reduce the relative text size to your liking. 

3.  Retest your Title screen at different resolutions 

In the Game view, open the Aspect Ratio dropdown to test different screen resolutions.

Notice how the text stays the same relative size even at higher resolutions. 

When you’re done testing, select Free Aspect. 

The TitleCanvas GameObject is now set to scale relative to the size of the screen the game is played on, ensuring that the text and button will increase in size as the screen does.

To determine where the tanks appear at the start of a game and which direction they’ll face, you need to define spawn points in the scene. In this step, you’ll add your first spawn point.

In the Scene view, select the 2D toggle to return to 3D mode.

In the Hierarchy window, double-click the Level[Theme] GameObject to frame it in view.

On the Scene gizmo, select the green Y-axis handle to get into a top-down view 

Tip: Select the cube at the center of the Scene gizmo to get into orthographic mode, which removes perspective and makes it easier to move things around on the ground. 

In the Hierarchy window, locate all tank GameObjects and deactivate them by disabling the checkbox at the top of the Inspector window. You don’t need them in the scene anymore. 

Right-click the Hierarchy window and select Create Empty.

Rename the new GameObject “SpawnPoint1”.

In the Inspector window, open the Transform component’s More (⋮) menu select Reset to set its position to X = 0, Y = 0, and Z = 0.

From the Tool overlay in the Scene view, select the Transform tool.

This tool combines the Move, Rotate, and Scale tools, allowing you to visualize the object’s rotation as you move it. 

Toggle Tool Handle Rotation dropdown located at the top of the Scene view and select Local — this will allow you to visualize which direction the spawn point is facing. 

Use the Move handles to place the SpawnPoint1 GameObject in a good starting location. 

Tip: The best position for a tank is in the corner of the scene, giving players a bit of space at the start of each battle. 

Use the Rotate handles to ensure the SpawnPoint1 GameObject faces inward toward the center of the battlefield.

Tip: The blue handle of the Transform tool in the Scene view indicates the forward-facing direction when you’re using Local coordinates.

Your first spawn point out of four is now set up in the scene.

To support up to four players, you need to create four spawn points where tanks will appear at the start of the game.

In the Hierarchy window, select the SpawnPoint1 GameObject, then press Ctrl+D (macOS: Cmd+D) three times to create three duplicates.

Rename the duplicates “SpawnPoint2”, “SpawnPoint3”, and “SpawnPoint4”.

Move each spawn point along the X-Z plane to spread them out across each corner of the battlefield.

Rotate each spawn point so they face inward toward the center of the arena.

3.  Organize the spawn points under a parent GameObject

Multi-select all four spawn point GameObjects (hold Shift or Ctrl (macOS: Cmd) and select each spawn point GameObject in the Hierarchy window).

In the Hierarchy window, right-click the selected spawn point GameObjects and select Create Empty Parent.

Rename the new parent GameObject “Spawn Points”.

4.  Adjust the scene view for better visibility

Hold Shift and select the center cube of the Scene gizmo to switch to an angled perspective.

5.  Add visual tags for better identification

Select all four spawn points in the Hierarchy window.

In the Inspector window, open the Select Icon dropdown (the small hollow cube icon next to the GameObject’s name)  and change the icon to a colored name tag.

Note: Visual tags are only visible in the Scene view and might not appear unless your view is zoomed in. Double-click any spawn point GameObject in the Hierarchy window to quickly zoom in on it and see its tag.


Now your game has four nicely placed spawn points that are organized in the Hierarchy window and easily visible in the Scene view with visual tags.

Typically, a Game Manager controls a game’s overall flow. In this game, the Game Manager will control camera behavior, tank spawning, and round progression. In this step, you'll create the Game Manager and configure it with the appropriate variable references.

In the Hierarchy window, right-click and select Create Empty, then rename it “GameManager”.

In the Inspector window, open the Transform component’s More (⋮) menu and select Reset

Note: The exact position of the GameManager GameObject doesn’t affect gameplay, but resetting GameObjects like this to X = 0, Y = 0, and Z = 0 keeps the Hierarchy window organized and consistent.

Select the GameManager GameObject in the Hierarchy window. 

In the Inspector window, select Add Component, search for “Game Manager” and select it.

3.  Assign the CameraRig to the Game Manager

Drag the CameraRig GameObject from the Hierarchy window onto the Game Manager (Script) component’s Camera Control property box in the Inspector window.

Note: The GameManager script will use this reference to adjust the camera’s position and zoom at the beginning of each round.

4.  Assign tank prefabs to the Game Manager

In the Tank Prefabs section of the Game Manager (Script) component, drag and drop each of your tank prefab variants from the Project window (_Tanks > Prefabs > Tanks) into the Tanks Prefabs property boxes.

Note: You can repeat tank prefabs if needed. If you only have two tank variants, you can repeat them (for example, Tank 1, Tank 1, Tank 2, Tank 2), but if you have four tank variants, assign one to each slot.

5.  Assign spawn points to the Game Manager

In the Spawn Points section of the Game Manager (Script) component, select the Add (+) button four times to create four Spawn Point properties, then drag and drop each of the four spawn points GameObjects you created in the previous step into the Spawn Point property boxes.

The Game Manager GameObject is now set up to control the game flow, camera behavior, and player spawning.

The Player Selection screen will allow players to choose their tanks, assign control to player one, two, or computer, and initiate the game. In this step, you'll add the Menus prefab and connect it to the Game Manager GameObject.

In the Project window, open the _Tanks > Prefabs > UI folders, then click and drag the Menus prefab into the Hierarchy window.

In the Inspector window, set the Transform component’s Position Y property to 50 or above so that it’s above and out of the way of your level. 

2.  Understand the Menus prefab’s UI structure

Switch back to 2D mode in the Scene view (use the 2D toggle) and double-click on the Menus GameObject in the Hierarchy window to frame it in view. 

Use the foldout (triangle) to expand the Menus GameObject in the Hierarchy window and explore its child GameObject structure.

Unlike the TitleCanvas, the Menus prefab has its own camera, which will overlay on top of the existing main camera.

In the Hierarchy window, select the GameUICanvas GameObject.

In the Inspector window, select the Game UI Handler (Script) component’s  Game Manager property picker (⊙) and select the GameManager GameObject.

Note: The GameUIHandler script controls the player setup menu, allowing players to add tanks, choose controls, and start the game. It also communicates with the Game Manager GameObject to pass player selections.

Select the Play button and verify that tanks appear in four different colors and can be assigned to P1 (player 1), P2 (player 2), Computer, or Off by selecting them.

Try playing the game to see how it works!

Note: The Title screen and Player Selection screen currently both appear on top of each other — you’ll fix that in the next step.

Your Player Selection screen is now functional, allowing players to choose their tanks and configure settings before starting the game. 

The final step is to add functionality so that selecting the Player Select button hides the Title screen and activates the Player Selection screen.

1.  Set the Menus GameObject to be inactive by default

In the Hierarchy window, select the Menus GameObject, then in the Inspector window, disable the Is Active checkbox to disable it.

This ensures the Player Selection screen doesn’t appear when the game starts.

2.  Locate the OnClick() function for the Player Select button

In the Hierarchy window, use the foldout to expand the TitleCanvas GameObject, then select the PlayerSelect_Button GameObject. 

In the Inspector window, use the foldout (triangle) to expand the Button component and locate the On Click () section, where you'll define what happens when the button is selected.

3.  Set the Menus GameObject to activate when selected

Under the On Click () section, select the Add to the list (+) button.

Click and drag the Menus GameObject from the Hierarchy window into the On Click () property box.

Open the No Function dropdown and select GameObject > SetActive (bool) and enable the checkbox.

Selecting the button should now activate the Player Selection screen.

4.  Disable the TitleCanvas when the button is selected

Click and drag TitleCanvas GameObject from the Hierarchy window into the On Click () property box.

Open the No Function dropdown and select GameObject > SetActive and disable the checkbox.

Selecting the button should now deactivate the Title screen.

Enter Play mode and verify that selecting the Player Select button hides the Title screen and displays the Player Selection screen.

Your PlayerSelect_Button GameObject is now fully functional, allowing players to transition from the Title screen to the Player Selection screen.

With all the core elements in place, it's time to test the game loop, from selecting tanks to playing rounds.

Select the Play button and run through the game loop.

Verify that you can select players, start the game, and play a round.

In the Hierarchy window, select the GameManager GameObject and modify the following properties in the Game Manager component to your liking:

Num Rounds To Win: Adjust how many rounds are required to win.

Start Delay: Change the countdown before a round begins.

End Delay: Modify the pause after a round ends.

If your mountains are being cut off in the camera, you need to move the Main Camera GameObject back and away from the ground along its local Z-axis.

If your tanks don’t seem to be updated with your latest settings, it’s possible you made edits to the tank GameObjects rather than to the prefab. 

In the Hierarchy window, select the tank GameObject you want to edit, then at the top of the Inspector window, open the Overrides dropdown and select Apply All.

If there are other issues, try to figure out the answer in Unity Discussions, a search engine, or AI chatbot. 

Your game loop is now almost complete, allowing players to play matches with multiple rounds.

Try these optional activities to challenge yourself, build your skills, and improve your project.

Each challenge is tagged as Easy, Medium, or Expert difficulty so that you know what to expect. You can complete one, all, or none of them — it’s totally up to you. If you’re not interested in doing these challenges, mark this step as complete and proceed to the next tutorial. 

To make the game more fun and fair, test different tank matchups and adjust the settings for balance.

Play rounds with different tank combinations: test AI vs. AI, player vs. player, and mixed battles.

Try a 1v1 local multiplayer match with a friend to see how well the game handles direct competition.

Consider the following balance factors in your game design:

Speed vs. Power: Should faster tanks have weaker weapons?

Health vs. Damage: Do some tanks feel too strong or weak?

Fun Factor: Are rounds too fast or too slow? Does every match feel exciting?

Experimenting with balance helps make the game more competitive and enjoyable for all players.

Custom fonts can give your game a unique look. Try importing a new font for use in your title, buttons, or UI elements.

Browse free fonts at Google Fonts or other open-source font sites.

Follow Unity’s TextMeshPro guide to create a TMP Font Asset.

Apply your new font to UI elements, such as the Title screen or Player Select button.

Expert: Add tanks of different colors to your title screen

Adding a couple of tanks to your title screen will give it some color, some excitement, and also convey more information to the user what the game is all about. These title screen tanks would just be there for show and not actually be interactive. However, you don’t actually want those inactive tanks to show up in the game, so you’ll need to proceed carefully and make sure they’re disabled when the player goes to the Player Selection screen. 

Drag a couple of tanks from the _Tanks > Art > Models > Tanks folder into the scene, then position them nicely around the title text. 

Since the color of the tanks is set with code through the GameUIHandler and GameManager scripts, you’ll need to manually create and assign new materials to these show tanks. 

If you expand the Tank_[Type]_Model GameObject in the Hierarchy window, browse through the various tank parts and look for any Mesh Renderer component that uses the TankColor material. This is the material you’ll need to swap out for a new material of a different color if you want.

To make the tanks disappear when the Player Select button is selected, create a new empty parent GameObject for your tanks and use the same technique you did earlier to set that GameObject as inactive when the button is selected. 

Note: You might need to do some experimenting with the position of the tanks, since the camera will zoom in to a new position after you enter Play mode.

This step is entirely optional, but if you’re curious to understand how the GameManager script works, you can find it in the _Tanks > Scripts > Managers folder and open it in an IDE or text editor. The code is thoroughly commented, which helps as you read through it.

Start menu and Game Manager

1. Overview

2. Add a Title Canvas

3. Customize the title text

4. Add a Player Select button with proper scaling

5. Adjust canvas scaling mode

6. Create a spawn point

7. Create the remaining three spawn points

8. Configure the Game Manager

9. Set up the Player Selection screen

10. Make the Player Select button work properly

11. Test the game loop

12. Optional: More things to try

13. Optional: Review the GameManager script

14. Next steps

Complete this tutorial