Unity Beat ’Em Up Game Tutorial – Getting Started

Making it Pretty with the Canvas Scaler

First, you need to determine the resolution and pixel per unit import settings for bg_title.

Select bg_title in the Project window and check the pixel per unit value.

For the image resolution, select the sprite (bg_title) in the Project window and check its properties at the bottom of the Inspector.

You imported bg_title at 32 pixels per unit and its dimensions are 568 x 384 pixels, so you still need to configure the canvas scaler to match these settings. Remember, this component scale’s the UI to fit the screen size.

In the Canvas Scaler component of the Canvas GameObject, change UI Scale Mode to Scale With Screen Size. Set Reference Resolution to the sprite resolution of 568 x 384.

Set Screen Match Mode to Match Width or Height, and Match Value to 0. Finally, set Reference Pixels Per Unit to 32.

Now you can fill the screen with the background image.

Select the Image GameObject. Set both PosX and PosY to 0 to center the image, and in the Image component, click Set Native Size.

There you go! Now look at the Game view and change the resolution by selecting various devices from the top-left drop-down selector. You’ll notice the image stays fullscreen because the canvas scaler now knows to maintain its size at bg_title’s resolution!

Add Text Sprites to the Title Screen

Now you have a lovely textured wall, but there are no prompts to tell players what to do next. This is a job for a text sprite!

Create two more images by right-clicking in the Hierarchy, then selecting UI\Image. Rename the first Image GameObject to TitleText by right-clicking and selecting Rename.

Drag bg_title_txt to the Image component’s Source Image.

Rename the second Image GameObject to TouchToStart and then drag bg_title_touchtostart to the Image component’s Source Image. Click the Set Native Size button on both Image components. Make sure that both TitleText and TouchToStart are children of Canvas.

Hmmm, that’s not quite right. Seems like a good time to go over repositioning things.

Select the Rect Tool on the toolbar — it allows you to change the position, rotation, scale and dimensions of 2D GameObjects.

Select TitleText and drag it around the selection box in the Scene view, then do the same with TouchToStart until you have something similar to this:

If one of the sprites “disappears” after you drag it around, check the order of GameObjects in the Hierarchy and make sure your screen matches the above screenshot.

Now you’ve got a legitimate title screen!

This is the moment you’ve been waiting for — click the Run button on the Toolbar.

What happens when the game is running? Absolutely nothing! There is nothing to run…yet.

The next task is to allow the player to start the game from the title screen.

Buttons and Scripts

In this section, you’ll create controls and points of interaction on your scene. Here’s where you’ll work with scripting for the first time.

Create a Button

Users naturally look for things to press, tap and swipe, even when you’ve made them non-essential. You should always add a button so the user has no doubts about how to start the game.

Select Image in the Hierarchy, and then click the Add Component button in the Inspector. Select UI\Button, and then on the newly created Button component, set Transition to None.

Currently, your button is merely an empty shell. You’ll change that by adding a custom script as a component to your canvas GameObject and creating a corresponding script file in the root of the Assets folder.

Select the Canvas GameObject, click Add Component and select New Script. Name it MainMenu, set the language to C Sharp and then click Create and Add.

Find it under Assets in the Project window, drag it to the Scripts folder, and then double-click the script to open it in your code editor.

Change the contents of MainMenu to match the following:

using UnityEngine;
using UnityEngine.SceneManagement;

public class MainMenu : MonoBehaviour {
  void Start() {
  //1
    Application.targetFrameRate = 60;
  }

  //2
  public void GoToGame() {
  //3
    SceneManager.LoadScene("Game");
  }
}

Save the script and take a closer look at what you did:

1. In the Start method, you changed Application.targetFrameRate to 60, which limits gameplay to 60 FPS (frames per second). It’s fast enough but helps your game avoid being a battery hog, which could easily happen if you left FPS uncapped.
2. You added a method named GoToGame() and made it public so you can call it from the button you created earlier.
3. SceneManager.LoadScene() loads another scene. In this case, a soon-to-be-created scene named “Game”.

Save, close the editor and return to Unity.

Giving the Button Something to Call

The Button component needs to call the GoToGame() method.

Select the Image in the Hierarchy. In the Button component, click the + that’s beneath the OnClick() field. Drag the Canvas GameObject to the field named None (Object). Select MainMenu\GoToGame() from the drop-down to the right.

Well, that was pretty easy! Now your button calls MainMenu.GoToGame() whenever it’s pressed!

Adding a Game Scene

Start with saving your current scene by going to File\Save Scene. Afterwards, create a new, empty scene by clicking on File\New Scene. Save this new scene and put it inside the Assets\Scenes folder. Name it Game.

Open the MainMenu scene by double-clicking the Assets\Scenes\MainMenu scene file in the Project window.

Run the game again and press anywhere on the screen.

Fail! Although you created a new scene, Unity doesn’t know whether to include it in the game or not.

To add it, navigate to File\Build Settings. Drag the two scenes from the Scenes folder to the Scenes in Build field. If needed, removed other scenes that are added and drag the scenes to show MainMenu above the Game scene. Unity always starts from the top.

Save the scene and run the game again. Click the background and there you go! You’re looking at an awe-inspiring empty scene.

You might notice an issue while clicking things in the title scene. For instance, if you click the PompaDroid Logo or the Touch to Start text, nothing happens.

It’s not really a bug, it’s just that you haven’t walked through making a transition to the game scene. Don’t blame yourself for this one! :]

Just like bouncers keep the rif-raf out of a club, your sprites currently block click events from reaching the background. Your next task is to let the click events pass through.

Uncheck Raycast Target in the Image component of both TitleText and TouchToStart to fix this.

Run again and click the text logo. It now transitions to the game scene! Bug fixed!