# How can I achieve smooth shading / glow from one tile to another?

I've been working on a tile-based game in which some areas may be lit (currently seen), some may be black (never seen) and some may be dark (previously seen, but not currently seen).

Looking at the absolutely wonderful Pixel Dungeon that has a similar scheme, it has an effect where the dark/black tiles sort of "bleed" into lighter tiles (image from the game's Tumblr):

Look at 1 above - the area beyond the wall is dark, the wall itself it lit, but the darkness "glows" and creates a nice transition to light. There's also a slightly different "glow" from black tiles to light tiles, as seen at 2 - it's darker (you can't even see the edge of the wall).

I'd be delighted to implement something similar, and if I just want the effect as seen at 1 and 2 I can just create appropriate overlays, something like: for shade-from-dark and for shade-from-black.

It's not that simple, however:

• For locations such as 3 I need black-to-dark shading.
• For locations such as 4 I need shading from 2 dark sides and two lit sides.
• For locations such as 5 I need shading from 2 black sides, 1 dark side and one lit side.
• For locations such as 6 I need shading from 1 black corner, 1 dark... hold on a minute, this gets insane!

So I'm looking for some saner solution to achieve this lovely effect.

So far I've had these ideas:

1. Generating textures at run-time given the "light status" of the 9 surrounding tile of the tile (and cache these textures).
2. Applying a shader when drawing these tiles to interpolate the shading required at each pixel from the surrounding tiles, using either bilinear or bicubic interpolation.
3. Changing the "dark" and "black" textures to actually be larger than a tile - containing the texture + bleed into adjacent tiles, something like:

And then let these textures overlay each other (but that's a lot of blending).

4. Byte56 suggests suggests setting the color per vertex for the underlying tile and it will blend with the texture, but that does not seem accurate enough - for example a dark tile surrounded by black tiles will be completely black, which isn't good. And what if in all the corners are black tiles and on all the sides are lit sides? I guess I could model this accurately by having 9 vertices for each tile instead of 4.

I'd be happy for some input about these proposals as well as any other ideas for achieving this.

I'm using Libgdx and Java, but I have a feeling an answer will not really depend on the framework being used.

• Usually this is just setting the color for the quad used for rendering the tile on. Black makes the texture black, white makes it show the original texture. You can set these colors per vertex, allowing for smoother transitions. No textures needed for lighting. – MichaelHouse Jun 1 '13 at 13:13
• @Byte56 that's a good suggestion though a bit problematic (I'll actually need 9 vertices to model this accurately, I believe) - updated the question to add it as another alternative. If you think that's nevertheless the best option, or that 4 vertices are enough, please do add an answer below. – Oak Jun 2 '13 at 10:21