Top Down Movement -

What You’ll Learn

A top-down perspective means that the player sees the world from above, as if looking straight down from the sky. It’s a popular style used in games like Zelda and Stardew Valley. In this tutorial, you’ll learn how to move a character around in this perspective using basic top down movement.

Try It Out!

Click inside the game to make sure it’s focused, then use the arrow keys to move the character around.

Planning

This tutorial is all about simple, responsive movement. Here’s the idea:

Read arrow key input.
Determine the character’s direction based on that input.
Increase the player’s movement speed in that direction.
Move the player in the correct direction.
Slow the player down when no keys are pressed.

It’s pretty straight-forward, but there’s a few clever bits. Let’s move on.

Setup

Create a new object called obj_hero.
Assign it a sprite.
Place obj_hero into a room.

Need some sprites? Grab our free Top-Down Adventure Starter Kit:

Code

To make it work, put this code into obj_hero.

obj_hero – Create Event

// Movement
movement_direction = 0;
movement_speed = 0;
movement_friction = .15;

obj_hero – Step Event

// Input
var _left = keyboard_check(vk_left);
var _right = keyboard_check(vk_right);
var _up = keyboard_check(vk_up);
var _down = keyboard_check(vk_down);
var _input_count = (_left + _right + _down + _up);

if _input_count > 0
{
	movement_speed += .5;
	movement_speed = clamp(movement_speed, 0, 1);

	var _x = (_right - _left); // -1 (left), 0 (none), 1 (right)
	var _y = (_down - _up); // -1 (up),   0 (none), 1 (down)
	movement_direction = point_direction(0,0, _x, _y);
}

// Movement
var _move_x = lengthdir_x(movement_speed, movement_direction);
var _move_y = lengthdir_y(movement_speed, movement_direction);

x += _move_x;
y += _move_y;

// Friction
if movement_speed <= movement_friction
{
	movement_speed = 0;	
}
else
	movement_speed -= movement_friction;

How’s it Work?

Create Event

We define three key variables:

movement_direction: the direction (0–360 degrees) the player will move.
movement_speed: how fast the player is moving (in pixels per frame).
movement_friction: how quickly the player slows down when not moving.

Step Event: Handle Input

We check the arrow keys using keyboard_check() and store them in local variables. These return 1 if the key is pressed, or 0 if not.

_input_count keeps track of how many arrow keys are being pressed.

if _input_count > 0
{
	movement_speed += .5;
	movement_speed = clamp(movement_speed, 0, 1);
...

If at least one arrow is being held, we increase movement_speed by .5 with each input and use a clamp() function to keep the speed between 0 and 1 to avoid going too fast.

...
	var _x = (_right - _left); // -1 (left), 0 (none), 1 (right)
	var _y = (_down - _up); // -1 (up),   0 (none), 1 (down)
	movement_direction = point_direction(0,0, _x, _y);
}

This bit allows for eight-way movement. _x figures out the horizontal direction and _y figures out the vertical. The point_direction() function uses those variables to figure out where to move based on the combination of horizontal and vertical input.

Step Event: Movement

// Movement
var _move_x = lengthdir_x(movement_speed, movement_direction);
var _move_y = lengthdir_y(movement_speed, movement_direction);

x += _move_x;
y += _move_y;

The lengthdir_x() and lengthdir_y() functions convert speed and direction into actual movement offsets. Then we simply add those to the player’s x and y position to make them move.

Run the Game

Press Run or hit F5. You should see your player moving in all directions using the arrow keys. This is your first step toward building a classic top down adventure.

Extra Credit

Want to go deeper? Try these:

How would you increase or decrease the maximum speed?
What if you wanted the player to slide more before stopping, like they’re on ice?

Experimenting is the best way to learn!

What’s Next?

Walking around is good, but what happens if you hit a wall? In the next tutorial, we’ll add collision detection so you can interact with the world around you.