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.
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.
