Introduction to Unity2D: Setting up a Top-Down Character

Unity has a variety of tools for 2D games development, though if you're coming at this from a 3D perspective, you may need to redesign or reformat some of the things you've learnt.

Let's start with the user interface of Unity2D. When you create a new 2D project (I used URP not built-in renderer for more visual control) we get this interface:

By default then, we are rendering our camera orthographically, meaning that the distance between the object and camera does not determine the scale of the object.

Let's improve the camera by adding the component called 'Pixel Perfect Camera'. This allows the pixel art to be presented with clean nearest-neighbor interpolation:

Some settings I changed here include changing the Assets Pixels Per Unit to 16. This is how big I intend the tiles in my game to be (16x16).

I also changed my Reference Resolution to something appropriate for pixel art - 320x240. This is different to the games actual output; this is essentially the simulated resolution that will be upscaled to your target resolution.

Let's make a 'character', e.g. a sprite, and move it around in a top-down fashion.

In the hierarchy in the top-left of the screen, I am going to choose Create > 2D Objects > Sprites > Square.

I'm going to add a script to move this object around. Create a script and attach it. I'm going to call this 'Player'.

I'm also going to add the Rigidbody2D component and the BoxCollider2D components to the Player:

Note that I have set my gravity scale to 0. This is a classic top-down character set up.

My script is going to move my character around using the Input Axis of Horizontal and Vertical (w/s and a/d).

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Player : MonoBehaviour
{
    Rigidbody2D rb2d;
    Vector3 moveDir;
    // Start is called before the first frame update
    void Start()
    {
        rb2d = GetComponent<Rigidbody2D>();
    }

    private void Update()
    {
        moveDir = new Vector3(Input.GetAxis("Horizontal"), Input.GetAxis("Vertical"), 0);
    }

    // Update is called once per frame
    void FixedUpdate()
    {
        rb2d.velocity = moveDir;
    }
}

Note that I set my Vector3, called moveDir, in the Update() message, but I change my velocity on my rigidbody component in the FixedUpdate() message. This is generally considered best practice in physics movement, as this FixedUpdate() is when collisions and overlapping gets checked and calculated. Moving objects physically at a different speed to the physics engine can cause physics anomalies.

By adding another Sprite and adding the BoxCollider2D component, we have the basics of movement and collision:

Let's import some artwork to use as our character. Download the character images below.

As you can see here, we have a spritesheet made up of multiple characters. To use this, we will first need to split this spritesheet up into multiple sprites. First, lets import the files into Unity's asset folder by either dragging the files in or right-clicking and selecting Import New Asset.

When we import

A few settings to change here. First, we need to change the Sprite Mode from Single to Multiple. This is because the image is made up multiple sprites that we want to split up. I also recommend changing the Pixels Per Unit to the resolution of each sprite - in this case it's 16x16 so we will write 16. Finally, change the Filter Mode to Point (No Filter).

Optimised settings below:

We then need to split these sprites up now. Click on Sprite Editor in the Inspector, opening up the following window:

We next need to chop up the spritesheet to designate the individual sprites. We can do this by hitting the Slice button.

Here, change the Type to Grid by Cell Count, meaning we can specify how many columns and rows make up this sprite sheet. In this case, we can set our grid to 7x4.

Finally, hit apply in the top-right of the Sprite Editor to confirm the cuts.

You can then drag one of the sprites inside that spritesheet into the Sprite Renderer's Sprite field:

Our character will look like this:

We could easily add to our script to flip our sprite when we are moving left and right:

//In the Update() in the code above...
if (moveDir.x < 0) spriteRend.flipX = true;
if (moveDir.x > 0) spriteRend.flipX = false;