Views

As LÖVE doesn't have a built-in z-ordering system, you may encounter some issues when trying to create a game that automatically draws a character in front or behind objects depending on their respective positions such as is customarily found in adventure games. This tutorial will show you how to do this in a very simplistic manner.

Note: In this tutorial, when I refer to an object being "in front" of the character I mean that it is between the character and the screen (ie: you). "Behind" means that the character is between the screen and the object.

First, we need some resources:

Alright, now that we have our resources we need some variables to contain the positions of our person and objects:

Make sure that your list of objects are ordered by their y-position. This becomes important when drawing them. For a general application, one can first use the Lua function table.sort.

Although, You must be careful not to store the index to an object directly. As the objects index will change after the sort (You may wish to make a copy for drawing purposes only)

To draw these objects, we are going to use

The object parameter specifies the image we're going to draw and the next two arguments specify where the upper left corner of the image should be drawn on the screen. We subtract by half of the width and the height of the image to place the image's bottom horizontal center at object[i]'s specified x and y coordinate.

Ok, now we are ready to draw the whole shebang, assuming that you have created some way of moving your character around the screen (or else this is just pointless as you won't see the difference). If you don't know how to do that, I suggest looking at some of our other tutorials for assistance. For simplicity I am just going to show you the entire love.draw function and then explain what happens:

First of all we draw our scene as it normally is in the back (like any potential foreground objects will always be in the front). Then I create a variable called drawn. This will tell us if the character has been drawn to ensure that he isn't re-drawn multiple times which will cause him to be in front of objects where he shouldn't be. Next I go into a for loop and iterate through all of our objects (which are ordered from furthest away to closest). Then I check if the object is supposed to be in front of our character, if it is then you should draw the character (and set the drawn variable). The reason for this is because this for loop will go through and draw the objects (which are all the same image in this case, but that doesn't have to be so) until it comes to an object which should be in front of the chracter which is when it draws the character and then continues to draw the rest of the objects. If it comes to the end of the for loop and hasn't drawn the character yet it means that the character is in front of all the objects so it draws it at the end.

That's all. Download the demo and give it a go. It may be very simple but this tutorial is only about drawing order and if you want to know how to check if the character is colliding with the object or you want the character to go where you have clicked then you're on your own (until a tutorial is made for that). If this is not straightforward enough, please feel free to comment on it on our forum.

See Also

An alternative, scalable implementation : Skip list:Drawing Order

Other languages