Tile Based game rendering

Started by
11 comments, last by EvilNando 15 years, 9 months ago
How can I render certain tiles a little bit above of the player? For example some grass tiles, I want to render them a little bit above so they barely cover the player's feet? right now I have my map rendering divided into layers layers 1,2,3 are ground & detail layers layer 3 is also actor layer and layer 4 is occlusion layer (trees,walls, etc) any advice will be greatly appreciated
Advertisement
What you could do is have a small texture the width of the grass tile that matches the grass tile, but it's a bit shorter, then you check were the player is, and if the player is in grass, than you render the smaller grass layer over the players feet to simulate the effect.
yeah probably that will do it

thanks
You could render your tiles row by row instead of simply layer by layer. In this case you'd render all the layers in a given row then move to the next row and start over. This would allow you to position things in front of one another along two axises.
Game design, development, and discussion: http://anotherearlymorning.com
And why would this be any different than drawing layer by layer?
Im not getting it could you explain this a little bit more? :)
Hmm, well I'll try to explain in two ways, here's some code showing the difference:

layer by layer, paints each row/column in layer 0, 1, 2, etc
for (int z = 0; z < num_layers; z++) {    for (int x = 0; x < grid.width; x++) {        for (int y = 0; y < grid.height; y++) {            g.draw(x * cellWidth, y * cellHeight, sprites[z][x][y]);        }    }}


cell by cell, paints each layer in a given cell completely, so cell 1, 2, etc
for (int x = 0; x < grid.width; x++) {    for (int y = 0; y < grid.height; y++) {        for (int z = 0; z < num_layers; z++) {            g.draw(x * cellWidth, y * cellHeight, sprites[z][x][y]);        }    }}


So, in the second method it's possible for something in cell[0][1] to be painted over something in cell[0][0], you see?

Imagine you have one cell w/ two layers, the first has grass, the second has a NPC. Next imagine there's a second cell which is vertically below the first. The second code snippet will render things in the following order:

1. [0][0] grass
2. [0][0] npc
3. [0][1] grass

This way it's possible for the grass painted in the second tile to cover the feet of the npc in the first tile.

Did that help?
Game design, development, and discussion: http://anotherearlymorning.com
While I did understand the technique , I still dont get why is this any different, maybe because I failed to mention that I'm free to create any number of layers I see fit. In this case the only thing needed would be to create an aditional layer above the npc layer dedicated for grass rendering.

But setting techniques asides I still cant figure out how this would work in the game. I mean if the npc isnt moving, this looks perfect, but as soon as there is some kind of movement (vertical specifically) the effect is broken.


Photobucket
You need to make the grass move where the player moves.

I'm a little worried that doing that might look like a chunk of grass is moving along with the player rather than the intended effect that the player is wading through grass.

*If* the effect does look weird, then there are two options I would first consider:

# Instead of having one occluding grass sprite, have 2 or 3, and just cycle (or randomly select) different occluding grass sprites once the player moves by a few pixels or whatever.

# Would it be possible to replace that occluding grass sprite with a mask that will cut/stencil off (i.e. make transparent) the player's legs and let the grass underneath show through?
Yeah, you are going to want to render that small chunk of grass relative to the position of the player as it moves. Then the effect should work.
ok wish me luck, Ill post a video with the results

This topic is closed to new replies.

Advertisement