Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I would like to know how to best achieve lighting effects with 2D.

I guess the only way is to make sprites of the area to be lit in specific colors? Say I have a streetlamp, and around this place sprites to make it appear lit?

Is there a better way?

Edit: Found a good screenshot of what I'm looking for:

share|improve this question
What kind of lighting effects do you want? Post images of the effects you want so we can help you better. – knight666 Jul 9 '12 at 7:21
Had some trouble finding good examples, but here's pretty much what I'm thinking:… allthough I dont want the 'grid' to be so obvious, so round would be cool. – justanotherhobbyist Jul 9 '12 at 8:27 This image represents pretty much the style I'm going for. – justanotherhobbyist Jul 9 '12 at 22:17
This 2 steps video tut may help you on the way : – Delapouite Jul 10 '12 at 7:52
up vote 1 down vote accepted

If you are using Canvas, you may use a radial gradient:

  1. create a radial gradient from a light color on the center, to a transparent color on the end see createRadialGradient
  2. use globalCompositeOperation="lighter" is the trick to add color components and make the light effect
  3. draw the created gradient on top of the image you want to light

This is basically one of the tip I used to implement illuminated.js, in case you want to see some real usage and code.

share|improve this answer
It looks awesome, but when I'm moving objects around it is very choppy, is this due to your setInterval settings being rarely updated or performance issues? Will it run smoothly in a game with all the extra functions that comes with it? – justanotherhobbyist Jul 9 '12 at 22:05
An alternative is to use precomputed "light circle" images that you just blend onto the scene at the desired position. Radial gradients, mostly transparent, with a white or pale yellow coloring work well. Getting it to look nice might require experimenting with the gradients a bit, as a simple linear falloff will not look right. – Sean Middleditch Jul 10 '12 at 0:30

Step 1: Set the background to black.

Step 2: Calculate how much light is the tile getting (how far is it from light source(s), etc.).

Step 3: Lower the opacity of the image by a value according to what you calculated in Step 2.


share|improve this answer
This would result in lighted tiles though right? Because I don't want the grid to be obvious. – justanotherhobbyist Jul 9 '12 at 22:15

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.