Rendering Order/Tilemaps

[casarock]

Hi, 

 

I've played around with tilemaps and I faced some overlapping/Collison issues. What I want to achieve is a RPG-Style Map where some elements could be overlapped (e.g. trees, a bush or a house) and some of them should overlap the character.

 

My first Idea is to render in a specific order and give the characters a z-Index to track when I have to paint them at rendering.

 

Now my question: Could I overwrite/manipulate the render method to keep track when and what is being rendered? Maybe tile-wise or at least tile layer/player-wise.

 

Thank you in advance!

 

Carsten

[rich]

Do the tiles need to be sorted on z-depth? I.e. if the player moves down the screen should he start standing in front of tiles that were previously in front of him?

 

The reason I ask is because it's actually quite a lot more complex than you'd expect once you introduce WebGL and the way Pixi batches up sprites for rendering. If you don't need to use WebGL and are happy to run purely in canvas then you could override the Pixi render methods to do a custom display order.

[casarock]

Just a quick example:

 

- Your character ist bigger than one tile size.

- You've got a huge tree in your map.

 

=> You have to be able to walk behind, but the stock of the tree should be walkable. (collision, no problem).

=> You have to be able to walk in front of the tree with overlapping parts of characters body.

 

We've tried to use a collison box a bit smaller and with an offset, but we need to manipulate z-ordering at least for the character to be able to walk behind and in front of a "tree" 

 

Actually we do not aim at webGL.

[rich]

Right, makes sense. You can't do this with just a tilemap. The tree-tops would need to be Sprites that are ordered correctly in line with the Player sprite.

[casarock]

Thanks so far!

 

Just a last maybe simple question: How do I take care of z-ordering of sprites? E.g: I want to take care which object has to be rendered in which order (acording my scene-graph)

 

[rich]

I would put them in a Group and then use the Group.swapChildren() function to move them into the order you require. I've been meaning to add a Group.sort method but haven't had time yet - but essentially you could make a custom sort and then swapChildren could be used to organise them in the display list.

[casarock]

Thank you for your support and tips! I think I could work with your suggested solution(s).

[rich]

Please try it out and if it works (or doesn't!) share the result here and I'll take a look. It's entirely possible that Phaser isn't the best choice for your specific game. I'd like it to be of course, but I have to be pragmatic about this