Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I was playing around on RPG JS and Browser Quest, and the player, when moving, can give the effect of walking behind the trees or houses etc, so the player effectively disappears while it is "behind" the object.

How is this effect created?

I am building and RPG using javascript and canvas at the moment, and would love to try and implement this into the game. I am working on A* movement for my character.

share|improve this question

1 Answer 1

up vote 2 down vote accepted

That's layer rendering techniques. The idea is to overlap images that gives it the illusion of depth. For instance, consider a static looking map array that look like this:

[1][1][1][1][1][1][1][1][1]    [1] = Map Boundaries
[1][ ][ ][ ][ ][ ][ ][ ][1]    [P] = Player
[1][ ][P][ ][H][H][H][H][1]    [H] = House or any solid tile that the player cannot
[1][ ][ ][ ][H][H][H][H][1]          get through.
[1][ ][ ][ ][H][H][H][H][1]
[1][ ][ ][ ][H][H][H][H][1]
[1][ ][ ][ ][ ][ ][ ][ ][1]
[1][ ][ ][ ][ ][ ][ ][ ][1]
[1][1][1][1][1][1][1][1][1]

If the computer were to use this map and draw exactly what it reads, the problem we will encounter is that the player will be on top of the house if the player decides to move two tiles to the right.

[1][1][1][1][1][1][1][1][1]    // The player is on top of the house
[1][ ][ ][ ][ ][ ][ ][ ][1]    
[1][ ][ ][ ][P][H][H][H][1]    
[1][ ][ ][ ][H][H][H][H][1]    
[1][ ][ ][ ][H][H][H][H][1]
[1][ ][ ][ ][H][H][H][H][1]
[1][ ][ ][ ][ ][ ][ ][ ][1]
[1][ ][ ][ ][ ][ ][ ][ ][1]
[1][1][1][1][1][1][1][1][1]

But of course, we want the player to be behind the house, after all it only makes sense that a player will be behind the house and not on top. But that cannot be accomplish using one map (actually yes you can, but for simplicity we use two maps to demonstrate the layering in effect). So instead, we instruct the computer to render our images by separating the map into different layers. Foreground, Midground and Background

Background is the images that the player will walk on. Midground is where the NPC, player or anything that moves will be on. Foreground is the tiles that you want to overlap your character to give it the look of depth.

[1][1][1][1][1][1][1][1][1]    // Background where all solid and static tiles are.
[1][ ][ ][ ][ ][ ][ ][ ][1]    // Tiles that the player cannot freely move through.
[1][ ][ ][ ][ ][ ][ ][ ][1]    // Notice the top line of the house is missing.
[1][ ][ ][ ][H][H][H][H][1]    
[1][ ][ ][ ][H][H][H][H][1]
[1][ ][ ][ ][H][H][H][H][1]
[1][ ][ ][ ][ ][ ][ ][ ][1]
[1][ ][ ][ ][ ][ ][ ][ ][1]
[1][1][1][1][1][1][1][1][1]


[ ][ ][ ][ ][ ][ ][ ][ ][ ]    // Midground where your NPC and players are.
[ ][ ][ ][ ][ ][ ][ ][ ][ ]    // N = NPC
[ ][ ][ ][ ][ ][ ][ ][ ][ ]    // I am playing the NPC right behind the house
[ ][ ][P][ ][ ][ ][N][ ][ ]     
[ ][ ][ ][ ][ ][ ][ ][ ][ ] 
[ ][ ][ ][ ][ ][ ][ ][ ][ ] 
[ ][ ][ ][ ][ ][ ][ ][ ][ ] 
[ ][ ][ ][ ][ ][ ][ ][ ][ ] 
[ ][ ][ ][ ][ ][ ][ ][ ][ ] 


[ ][ ][ ][ ][ ][ ][ ][ ][ ]    // Foreground where your players can walk underneath
[ ][ ][ ][ ][ ][ ][ ][ ][ ]    
[ ][ ][ ][ ][H][H][H][H][ ]    
[ ][ ][ ][ ][ ][ ][ ][ ][ ]     
[ ][ ][ ][ ][ ][ ][ ][ ][ ] 
[ ][ ][ ][ ][ ][ ][ ][ ][ ] 
[ ][ ][ ][ ][ ][ ][ ][ ][ ] 
[ ][ ][ ][ ][ ][ ][ ][ ][ ] 
[ ][ ][ ][ ][ ][ ][ ][ ][ ] 

The final render of the map would look like:

[1][1][1][1][1][1][1][1][1]    // When all three layers is put together.
[1][ ][ ][ ][ ][ ][ ][ ][1]    // NPC had been overdrawn by the foreground.
[1][ ][P][ ][H][H][H][H][1]    // But the NPC is still there conceptually, you will
[1][ ][ ][ ][H][H][H][H][1]    // need other codes to tell it that the NPC is there.
[1][ ][ ][ ][H][H][H][H][1]
[1][ ][ ][ ][H][H][H][H][1]
[1][ ][ ][ ][ ][ ][ ][ ][1]
[1][ ][ ][ ][ ][ ][ ][ ][1]
[1][1][1][1][1][1][1][1][1]

That's how I have done it in any 2D games, hope this helps.

share|improve this answer
    
Thats a great explanation thankyou! I have a single 2d array showing my tile map atm, if i were to implement a system like you have explained in javascript, how would i do it? also are there any tutorials on how to achieve this with javascript? Is there a particular name for this convention, Thankyou! –  Tom Burman Jan 6 '13 at 18:41
    
You might want to create three arrays that represents the foreground, midground and background, all of type array. In your draw call, you basically draw each array one after another. So, Foreground array will get drawn, then Midground, then Background. Not the most efficient way of doing it, but it will get you the results you want. I am not too sure if there are terminology for this, but all 2D application call this type of thing layer. –  Frankie Law Jan 6 '13 at 18:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.