How do I implement occluded lighting in a block-based 2D game?

Question

I want to have 2D lighting that can be blocked by in-game objects. My game has a top-down view and all game objects are described by rectangles.

Let's say I have a 10x10 world and I place a light at 1x1 and walls all around that light. I want to be able to see the light source at 1x1, but not anywhere else, because it's blocked by the walls.

I've heard of casting light rays works, but how does that really work?

Answer 1

Amit Patel has written a very nice article on 2D ray casting.

This involves casting rays to each of the vertices inside the range of the light source to build a light mesh.

All of the visual examples are interactive in the post and very easy to understand.

You don't have to limit yourself to a box either, the perimeter you trace can be any shape you like.

Answer 2

You should use raycasting algorithm, which means, you should be able to compute the intersection of ray (half-line) with any object in your scene (lines, squares, circles, triangles ....) and choose the closest intersection. You cast the ray in all directions and then "draw the light" only to the closest object.

Here is how it may look like.

Answer 3

If you know what ray casting is, then all you need to do really is hard-code it. It's not overly complex as long as you have coordinates for each vertex.

First, create a light-emanating object. Place your light at x,y coordinates.

#include <math.h>
int i = 0;
if ( sqrt( abs( light.x - vertex.x )^2 + abs( light.y - vertex.y )^2 ) <= light.radius)
{
    lightOccludingVertices[i] = vertex;
    i++;
}

//If two or more vertices are both a member of an individual wall,
//illuminate the triangular area between the light, the furthest 
//vertex on the x-axis, and the furthest vertex on the y-axis

This is not guaranteed to work for a concave polygon, but it should work just fine for any convex polygons.

This will work if your occluding objects (walls, character, flying purple people eater) are painted to the screen after applying lighting. Otherwise, half of a wall will appear significantly brighter than the other half. If your point light is equidistant from two pairs of vertices of the same wall (exactly half as high as your wall's height), apply the triangle to the two nearest vertices, rather than the two further away.

I should also mention that this method requires a dynamically-created vertex point where the edge of the light's radius meets the surface of the occluding object. This creates a minimum of 3 vertices for any occluding object and will allow for walls that extend past the radius of the light (or off the screen) to also block any light.

More information on concave and convex polygons