VBfx / Tile tutorial / Multi layers


Only having one single layer is getting quite boring - nothing could ever be drawn over the actors so you couldn't ever walk behind a tree or house. To solve this problem you can a additional layer to your map and draw it over the actors. The drawing queue would then look like this:


This all sounds quite nice but it doesn't look good to just put blocks over the player. Whenever you're drawing something over the scene it needs to be shaped correctly, which means you have to use transparency. So the second layer is going to be masked. If you're not familiar with BitBlt masking please read this tutorial first:


Now all you have to do is adding another Data() property to the map, in the example I renamed them to Floor() and Roof() which sounds more logical to me. You can chose by yourself but remember to replace any occurrence in your code. Another problem is the mask you need for each picture, in the sample I extended the tBitmap Type with a Mask property and added a function to create the masks.

Again you have to extend the Draw function here or better said: Copy it. As shown in the drawing queue above you'll need to draw the actors between the two layers so you need to have 3 different calls for draw the graphics. Of course you could also add a parameter to the function and call it twice, once for the floor and once for the roof, but this would eat (a little) performance and blow up the code there. But this is quite a thing you have to decide for your own.

Sample code

In the sample code you'll find below I added all things mentioned above. Also I added smooth camera movement so you don't have to change the Draw function again. The map is loaded from a file I prepared for you and the editor was extended by a layer selection box. Note that you can even set grass tiles on the roof layer, this would result in flying grass blocks but you won't see any difference until there are actors to walk behind it. You can however see the transparency wherever a big rock covers up another tile.

Level design

When designing levels you should always try not to use the transparent layer. Just because it slows down your graphics engine alot. Well actually there are many tricks you can use in tile engines and here's one I want you to know. The picture below shows you a forest scene from the excellent SuperNES game Secret of Mana:

Secret of Mana

In this game you ca walk a little behind the trees and the stone. But there are quite a lot of trees that would slow down everything! In this case we only use the transparent layer where we really need it. In the next illustration the transparent tiles are colored red:

Secret of Mana

As you can see there are only 58 out of 224 transparent tiles on the screen. Well it would be easier to handle the trees as one object instead of splitting up the transparent parts but you should always try to save performance by using using non-transparent tiles wherever possible. Oh, by the way: Wonder why the trees on top are transparent as well? That's because we don't want to have tiles for any background the trees may be in front of. In this situation we invest some performance to save loads of work and time to create thousands of tiles. It's worth it!

Other tutorials