When we first started making Regina Cemetery Tours – The Game we knew a top-down style game. However, the game is not exactly top-down. It actually has a slight angle to it. This makes the game more aesthetically pleasing, and a little closer to the time period we were looking for. For example, The Legend of Zelda (1986) and Pokemon: Red (1996) both have a slight angle to the “camera”. In both games, however, there’s no ability to go “behind” something, like a tree, building, person, etc. Our game has that.
(Images from The Legend of Zelda (1986) and Pokemon: Red (1996))
This was changed in later versions of the above-mentioned games, and it gave the games a more “3D”-like feel to them. The character can go behind trees or buildings and still be seen by the camera. (I know Pokemon Generation 3 did this, but I swear Generation 2 did it too.)
(Credit: Pokemon: Ruby (2002))
This was one of the most challenging parts of developing the game.
In modern games, elements (trees, buildings, barrels, etc) are 3D objects. You move a 3D character around these objects. Every modern game has this. Our game is browser-based, so we could do 3D objects, but it would make development time much harder. For example, a simple square in a 3D space has six sides (5 if you don’t count the bottom), while a square in the 2D space only has one side.
With only 2-D elements, it can be difficult to program a 3D game. Thankfully, one of the “languages” we used to make the game has a “fake” 3D ability to it. (It has a “real” one too, but see above why we didn’t use it.) This ability — or style — is called z-index. It works by manipulating 2D elements in a 3D space. It can be used to stack elements on top of each other, such as pop-up boxes, alerts, drop-down menus, etc.
(Credit to CSSTricks.com.)
Adding z-index to an element is easy, but the challenge is how to add z-index to other elements around the character. If the trees, buildings, people, etc around a character have a z-index of 10 (arbitrary number) and the character has the z-index of 20, they’ll always be above everything else, like so:
To fix this from happening, we changed the z-index of elements below the character’s x-axis to be higher than the character. This means elements “below” the character appear “above” the character, while the elements above the character remain the same. We don’t have the change elements on the same x-axis since those are neither above nor below the character.
This works good for the character, but it has some issues when it comes to the ghosts in the game. The ghosts are on the same z-index as everything else in the game and are manipulated by the same x-axis-to-z-index settings as everything else. This often has an undesirable effect, though, as ghosts below the character often get their head “clipped” off by other elements, while ghosts above the character often have their feet overtop of the elements. We partially solved this by fading out the feet of the ghosts, but we weren’t able to solve the first issue.
To fix this issue we would have to program a script to check the positioning of the ghosts and then manipulate the z-index of the elements around it, and then undo that change as they walk. It would be possible, but as the ghosts only exists for 30 steps at a time — and there can be upwards to 100 ghosts in the game at any time, it would be a big payload for only a small aesthetic change.
In a few instances, we had to make specific z-index changes, like when an NPC is standing between two graves, or when the character has to walk under something, like the Cross of Sacrifice. These instances are few and far between but each helps with the illusion of Regina Cemetery Tours begin a 3D-game.