Depth in RPGs

A tutorial by Andrew Barber aka Chronic

So, you're making an RPG and you want your player to look like he's walking behind a bush, not on top of it.. sort of like seen in this picture below.


Secret of Mana - Squaresoft

In this tutorial i'm going to show you how to achieve this effect in Game Maker.

To demonstrate this effect i don't need to use any flashy graphics, i'm going to use simple shapes which will be enough for example purposes.


Player and Bush sprites

Once you've added your sprites to your game, you need to then set up your objects. For the player you need some sort of basic movment so you can test out things to make sure all is well. Here is what i used for my player object.

[LEFT KEY]
{
  if (place_free(x-5,y)) {
    x -= 5;
  }
}
[UP KEY]
{
  if (place_free(x,y-5)) {
    y -= 5;
    depth = -y;
  }
}
[RIGHT KEY]
{
  if (place_free(x+5,y)) {
    x += 5;
  }
}
[DOWN KEY]
{
  if (place_free(x,y+5)) {
    y += 5;
    depth = -y;
  }
}

Take notice of the extra line in the UP and DOWN keys.

For my bush object i simply used.

[CREATE EVENT] 
{
  depth = -y;
}

The depth line is what makes the effect work.. well, graphicaly anyway. It makes sure whats supposed to be on top of another object is all set correct.

You may have seen other tutorials or examples that place the depth line in a step event and are wondering why i havn't. Well, for the simple reason this is very unneeded in an RPG. If your player is standing still there is no need at all to update the depth, and because you only need to change it when the Y axis is changed, so doing it every step is pointless. Little coding tips like is what helps to keep the system requirements of your game down.

The next part can be done 2 ways, i'll show you both because you might prefere one over the other, or maybe for some reason you can't use one of the methods in your game for various reasons.

Method 1 - Mask

Yup, simple as it may sound using a mask is a way to get this effect to work. You simply need to make another sprite around half the height of your player and bush sprites (as seen below), and then apply it to both objects.


simple mask sprite

object properties

Method 2 - Bounding box

The other method is to change the bounding box of the sprite. Open up the properties or a sprite and you'll see options for the bounding box.

By changing the option to Manual you're able to enter your own values. You shouldn't need change any of the other sprites except for Top. For my sprite i've changed this to 16 because its half the height of my sprite.


Bounding Box settings

You will need to change the bounding box for all of your sprites you want this effect to happen with.

That brings me to the end of the tutorial. You can find examples of both methods covered below.

  • Method 1 - Mask
  • Method 2 - Bounding Box