Thursday, January 5, 2012

More light part 2

Okay, so averaging the corners from the tiles surrounding one til, did not work at all. I am not even going to post pictures of it. What I will post pictures of is another method that I used to get it to look very close to what I want.

A very simple step by step description of what I do from start to end.

1. Use  Bresenham's line algorithm to calculate what tiles have light on them and calculate the light strength based on distance from the light. All tiles are lit the same, so all corners are set to the same value.

2. Then spread the light from lit tiles to unlit tiles by adding all the light from surrounding tiles and dividing by the number of tiles then adding that value to the unlit tile.

3. I do step 2 again to spread it even more.

4. I calculate the color a corner should have based on the tile that it's overlapping. For exampled corner 0 overlaps the tile that is one to the left of this one, so -1 on x axis. I add the colors of corner 3 and 2 and divide by 2, then add the color of corner 1 and 2 and divide by 2 from the tile to the left. Those 2 numbers then gets added to the original color of corner 0 and divided by 3. I do the same for the rest of the corners.

5. I repeat step 4 one more time to even out the light a bit more.

6. I then add ambient light to all tiles that have a rgb value that is less then what i have chosen for my ambient light value.

I have tested the color blending as well and with 250 random lights on my map it looks like this.

There's still a few problems with walls that do not look like I want them, but it should be fixable.

If you would like to see some code, let me know and I will try to clean it up a bit and post some of it.


  1. The lighting you have managed to get here looks great. How performance intensive is it?

    I'd love to see the code for the rendering of the light. Would you be willing to share it? Maybe as a code/extension submission on Slick2D forums?

    Great work by the way! :)

    1. Hi, I already posted the lightmap generating code on Slick2D forums. It ended up in a very large lighting thread

      My code is only suitable for isometric tiles, but could be a general tile based game with a few modifications.

  2. Thanks for the link! Out of curiosity I noticed your lightmap doesn't make use of any alpha float values. How do you render your light map?

    1. I make use of the set corner color function when drawing the images. My light map contains 4 rgb values for every tile. I just assign them to the image before I draw it.

  3. In your 4. step, the corners on the overlaping tile are the same!?
    Since there is nothing in step 3 that changes the corner colors (so all of them are equal).

    I don't understand. :(