Gaming in Unity

05. Unity 2D Game 1 - Character

(../img/unity-5-2d-game-1-character/2d-game-1-character-header.png)

In this tutorial, we will import our first Asset and script SpriteCharacter movement!

Before you start

Download this set of assets before you begin the 2D Game guide:

Unity Assets

Step 1 - Creating Project & Importing Assets

Begin by creating a New Project using the 2D template.

Think of an image you want to use for your main character. This can be a sprite you've downloaded from online, something you've drawn in MS Paint, or even a picture you've taken. It's completely up to you.

I'm going to be using a picture of our dog, Scamp.

Right-click and go Create -> Folder to create a folder. Call it Characters. Double-click on this folder to open it.

Drag and drop the file into the Assets section of Project Window (at the bottom of the Unity editor).

(../img/unity-5-2d-game-1-character/2d-game-character-step-1.jpg)

Note that Scamp is now in the Assets section of the Editor. She has been automatically imported as a Sprite. This is because we created the Project using the 2D template. (Sprites are 2D graphic objects often used in 2D game development).

Drag the SpriteCharacter from the Project window to the Scene view. This adds the Sprite as a new GameObject to your Scene.

Click on the SpriteCharacter and you can see lots of information about it in the Inspector on the right. Move the SpriteCharacter around and see how the value of the Position property changes. Note the X and Y coordinates changing.

(../img/unity-5-2d-game-1-character/2d-game-character-step-1-2.jpg)

Change Scale to 0.25, 0.25, 0.25.

(../img/unity-5-2d-game-1-character/2d-game-character-step-1-3.jpg)

Step 2 - Writing First Script

Scripts tell GameObjects how to behave. They are a core component of making a game in Unity.

This script will add motion to our SpriteCharacter.

First, right-click in the Assets section and select Create -> Folder. Name the folder Scripts.

Double-click the Scripts folder to open it.

Right-click and click Create -> C# Script.

Name the script SpriteController.

(../img/unity-5-2d-game-1-character/2d-game-character-step-2.jpg)

Double-click on the script to open it.

This will open the script in Visual Studio. The code can be intimidating at first but don't worry, this guide will walk through what to do next.

(../img/unity-5-2d-game-1-character/2d-game-character-step-2-2.jpg)

For now, we're just going to pay attention to Start() and Update().

Unity executes the code in Start only once (when the game starts).

Unity executes the code in Update every frame, this means it runs continuously as the game runs. Games generally run at 30 or 60 frames (still images) per second. By showing all of these images at high speed, the game gives the impression of movement.

Add the following line of code to void Update () :

Vector2 position = transform.position;

This will store the position of the GameObject in a variable called position.

Now add this line of code:

position.x = position.x + 0.1f;

Here, we're accessing the X value of position and adding 0.1 to it. The 0.1f is a float variable (a number with decimal points).

The final line of code looks like this:

transform.position = position;

Now we're returning our modified position to the GameObject! This will move it to the right.

Don't forget to save! Go to the top-left and click File -> Save. You can also use Ctrl + S.

Here's how the final code should look:

(../img/unity-5-2d-game-1-character/2d-game-character-step-2-3.jpg)

Return to the Unity Editor. It may take a few seconds to compile the code.

Select SpriteCharacter in the Scene view and then drag and drop SpriteController Script onto the Inspector.

Note the Sprite Controller (Script) component at the bottom.

(../img/unity-5-2d-game-1-character/2d-game-character-step-2-4.jpg)

Now it's time to test the script out!

Press the Play button above Scene View and watch as SpriteCharacter flies off the screen.

Congratulations! You've successfully written your first C# script.

Challenge:

What happens if you put a negative value?

Can you make your SpriteCharacter move up?

Can you make it move down?

Step 3 - Controlling Sprite with Keyboard

We're now going to add code that lets you control the SpriteCharacter with your keyboard!

Double-click on SpriteController script.

We'll be working in Void Update() again.

Add the following line of code:

float horizontal = Input.GetAxis("Horizontal");

This creates a float which stores a value for player input. If you press left, it will be -1. If you press right, it will be 1.

Now we're going to modify the movement code from earlier:

position.x = position.x + 0.1f * horizontal;

This will take the player input and use it to modify the position of SpriteCharacter!

(../img/unity-5-2d-game-1-character/2d-game-character-step-3.jpg)

Save your code, return to the Unity Editor and let the code compile.

Click Play above the Scene View.

Try using the left and right arrow keys to move SpriteCharacter left and right! You can use the console at the bottom to see the value of horizontal as you press the keys.

Challenge:

Can you write code to control vertical movement with the up and down arrow keys?

Solution:

(../img/unity-5-2d-game-1-character/2d-game-character-step-3-2.jpg)

Step 4 - Decoupling Movement from Framerate & Character Rotation

Currently, movement speed depends on how fast the game's frame-rate is running. This means movement speed could be drastically different depending on which device you're using.

To fix this, we're going to add a small (but important) piece of code to your script.

Add to the position calculations the following:

* Time.deltaTime;

This makes it so Unity calculates the movement by using seconds instead of frames. Now, movement speed will be the same no matter what device your game is running on!

Change 0.1f to modify your movement speed. I've changed mine to be 5.0f.

(../img/unity-5-2d-game-1-character/2d-game-character-step-4.jpg)

Add the following to void Update() allow SpriteCharacter to rotate based on the direction they're facing:

(../img/unity-5-2d-game-1-character/2d-game-character-step-4-2.jpg)

Congratulations! Your script is now fully complete!

Created by: David Corish