Tell me more ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.
up vote 0 down vote favorite

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: http://www.saltgames.com/wp-content/uploads/2009/11/multipleLights.png

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: whilefun.com/img/games/screens/examples/2D_Lighting/… allthough I dont want the 'grid' to be so obvious, so round would be cool. – hustlerinc Jul 9 '12 at 8:27
saltgames.com/wp-content/uploads/2009/11/multipleLights.png This image represents pretty much the style I'm going for. – hustlerinc Jul 9 '12 at 22:17
This 2 steps video tut may help you on the way : youtube.com/watch?v=GI63eeaXbWs youtube.com/watch?v=4BtjcH-iLR0 – Delapouite Jul 10 '12 at 7:52

2 Answers

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? – hustlerinc 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
up vote 1 down vote

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.

Source: http://stackoverflow.com/questions/2644399/brightening-an-image-using-styles-or-javascript

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

Your Answer

 
discard

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.