LAB 7: 2D

PLATFORMER P1
INFO 4328 – Game Design
& Development (DIS/KICT)

12/6/23
INTRODUCTION
Start by creating a 2D
project.
Note that there is no
directional light in a 2D
game.

06/12/2023
ORTHOGRAPHIC CAMERAS

This type of camera is suitable for 2D games,

where you control the apparent depth of sprites
by their size and sorting layer.
A sorting layer allows you to determine which
sprites and groups of sprites draw in front of each
other. Imagine that you are setting up a stage.
If you sort the sprites from front to back properly
and choose appropriate sizes, you can give the
impression of depth.

06/12/2023
TILEMAP Import the tilemap asset
from the Asset Store (Pixel
Explore the Sprite provided.

Adventure 1 in this case)

06/12/2023
TILEMAP

To create a tilemap, in Hierarchy,

right click à 2D Object à
Tilemap à Rectangular.

Give it a name.

06/12/2023
TILEMAP
•In order to draw, we need a palette.
Order

•Open the Tile Palette Window.

Open

•Then Create New Palette.

Create

•Give it a name and hit Create.

Give

•Save it in a new folder – Palettes.

Save

06/12/2023
TILEMAP

Drag all the tiles that you want to

use to the Tile Palette window.

Save the tiles in another folder –

Tiles.

06/12/2023
TILEMAP
We can now draw with the
tile.
Choose any one and click on
the scene.
As you can see, the size of
the tile does not fit the Grid.
06/12/2023
TILEMAP
To fix this, select all the tiles in
the original sprite (by selecting
the sprite).
In the Inspector, change the pixel
per unit to size of the Slice (16
for the asset that I’m using).
To draw the same tile multiple
times, left-click the mouse and
move it around the scene.

06/12/2023
TILEMAP
• If you have a background, you can
add it to the scene (Create Empty à
Add Add Sprite Renderer component).

• If your levels are behind the

Background, change the order layer
Change of your Tilemap.

• Select the Tilemap object in

Hierarchy, change its order in layer to
Select 1.

06/12/2023
TILEMAP
You can decorate the levels with other objects as
Decorate desired.

Change the order in layer if the objects are not

Change visible.

Scale You can scale the objects to fit the scene.

06/12/2023
SLICING SPRITE

1 2 3 4 5

Select Change Click on Choose Click

•Select the •In Inspector, •Click on •In Sprite •Click Apply.
sprite. change the Sprite Editor. Editor,
Sprite Mode Press Apply choose Slice
to Multiple. when à Type à
prompted. Automatic or
Grid by Cell
Size.

06/12/2023
USING THE NEW
INPUT SYSTEM
•Open Package Manager.
Open

•Select Unity Registry.

Select

•Search for Input System, and install it.

Search

•Restart Unity when asked so that it will use the

Restart new input system instead of the old one.

06/12/2023
 Select the Sprite you want to use as the Player (choose
the one with Idle animation).

If you’re using your own Sprite, you will need to slice it.

MOVING Change the Sprite Mode to Multiple and click Apply at

the bottom of the Inspector. Note that there is

PLAYER
temporarily no tray to expand.

Click the Sprite Editor button in the Inspector; a window

pops up.

Click the Slice drop-down, set Type to Automatic, and

click Slice. Notice how the outlines are automatically
detected but are different for each frame.

06/12/2023
 •If you don’t want to use Automatic, then Set Type to Grid by
Set Cell Size and adjust the grid to fit your sprite.

MOVING Notice
•Notice that the borders are now more even.

PLAYER
•Click Apply to save the changes and close the Sprite Editor
Click (Automatic or Grid by Cell Size).

•Look at your sprite in the Project view and note that the tray
Look now contains all the individual frames, ready for animation.

06/12/2023
 MOVING
PLAYER
•Create a new folder in Assets, name it Animation.
Create

•Select all individual slices, drag them to the

Select Hierarchy.

•Save the sprites in Animation, create another

Create folder and name it Player, for better organization.

•Name the animation to Idle.

Name

•Rename the sprite in the Hierarchy to Player.

Rename

•Change the order in layer to a bigger number.

Change

06/12/2023
 Before we can move
the Player, we need
Hit play. Notice that to add a Rigidbody
the character is 2D component to it,
as well as Collider
animated. (Box/Capsule/Circle

MOVING - which ever fits your

character).

PLAYER Next, choose the

Tilemap object, and Test the collision by
add Tilemap Collider hitting play.
2D component.

06/12/2023
MOVING
PLAYER
Create a new folder – Scripts.

Inside Scripts, right-click à

Create à Input Actions.
Name it as Player Controls.

Open the file.

06/12/2023
MOVING
PLAYER
• First, create the Action Maps by clicking
Create the ‘+’.

• Name it as Ground.
Name

• Rename the New Action (in Actions) to

Rename Move.

• Add Positive/Negative Binding.

Add

• Bind the movement to the desired keys.

Bind

06/12/2023
MOVING
PLAYER
• In order to be able to control the
player using the Input Actions, we
Order need to generate the C# script.

• In the Inspector, check the

Generate C# class.
Check

• Hit Apply.
Hit

06/12/2023
MOVING
PLAYER

Optionally, you can add Once done, click on the

another binding for the Save Asset.
A and D keys.

06/12/2023
MOVING
PLAYER
• Now, create a new script –
Create PlayerMovement.

• Open the script.

Open

• Create the instance of the

Create PlayerControls object.

• Create an Awake function.

Create

06/12/2023
MOVING PLAYER

Add few other variables Then update the Awake

as shown. and Update methods
accordingly.

06/12/2023
MOVING PLAYER

We need to change some properties in our Input Actions.

Select Move and change the Action Type to Value/Pass Through (for
continuous movement), Control Type to Axis.

Add Interactions to Press à Press and Release.

Save the asset.

Add the PlayerMovement script to Player.

06/12/2023
MOVING PLAYER
You’ll notice that the
Hit Play to test. object is rotated instead
of moving linearly.

Select Player. In the Expand Constraints,

Inspector, scroll down to check Freeze Rotation
Rigidbody2D. on Z axis.

Test again.

06/12/2023