Different floor levels

[entiendoNull]

Hi there,

I have recently developed an urge to make a game... and I found Phaser - which is an incredible project!
I am not new to programming, but am mainly a PHP programmer. I've programmed quite a lot in JavaScript too... but mainly things that are website related - never games.

I figured I wanted to create a small tile based MMORPG as a hobby project. Mainly to pick up some new programming skills.
I've found quite a few of those projects that are up and running and they look great. One thing that crossed my mind though is that everything seems to be built flat on the tilemap in those games.
Below follows some examples to visualize what I mean.

Say, a house with several stories are often built like this:


The two story house is built on one floor.

The attached image files comes from a game i found called Tibia. It is also a tile based game, but with a little bit different perspective.

In the first screenshot it's shown how the house looks when the character is placed a few tiles away. It shows a two story house.

 

In the second screenshot it's shown how the house look when the character is placed next to the house.

 

In the third screenshot it's shown what that the house looks like when standing next to the house on the second floor.

I'm posting in hope to get some advice on how to achieve something like this? What is the best practise here?
I've been considering several canvases and several "maps" defining the different floor levels, but was hoping for a  more elegant solution.
I've seen that the popular "Tiled" editor got support for layers, but I haven't found anything about actual floor levels. Does this option exist in "Tiled"?

Thanks in advance!

 

 

[mattstyles]

Looks like Ultima 7.

Map formats can be a pretty involved topic. One way is to use your standard 2 dimensional structure (implementation wise this is often best done as a 1d array with helpers to transform <x,y> coordinates into an <i> coord, but thats a different discussion) but have each Tile in this map have multiple layers.

Each tile can implement several different layers, you can then choose which layers to render. For example, your tiles might constrain that each graphic is totally opaque, in this case, when you loop over your visible tiles you grab the 'highest' layer for each tile and render that. You can get more complex from here, a simple extension from this point is to allow semi-transparent (or, partially transparent) images as Tile layer sprites and then when you loop over your visible map you simply render all layers for a tile, from 'highest' to 'lowest'. You might additionally define a playerLayer variable (or similar) which then dictates which layer to render, so, if the player is on the lowest ground level then you render all ground levels, or, maybe, render all highest, if they are on layer 1 then render all layer 1 images for a tile (if they have one, you might want to fall back to black or to 'darken' a lower level sprite to denote that that layer is lower than the current layer the PC is on).

If you go for the isometric approach then you might want to offset higher layers and render all layers for a tile so that you can see parts of the lower images below the higher ones.

You could define a 3d structure for your map, but, this can get wasteful if most of your map is just a single ground tile.

You would also have to consider where in your map structure you place dynamic elements such as players and items, but thats a different concern too and is not constrained to multi-layer map structures.

[entiendoNull]

Thanks for your reply, and wow! That really does look like Ultima 7.
Okay, that makes sense. I will try to experiment a bit with all this considering your input.

Thanks a bunch