Rabid Lion Games

 

2D Lighting System tutorial series

Welcome to the first in a series of blog posts that are going to walk you through the creation of a fully featured 2d lighting system to use in you games. The system focuses on creating soft lighting and shadows that can be cast by any arbitrary sprite in your scene.
For a preview of the kind of system we’ll be creating, have a look at the following video:

YouTube Preview Image

The video quality isn’t great as I only have the free version of fraps to record with, but hopefully it’s given you an idea of what we are working towards.

For those of you who are already comfortable with shaders and digging around in other people’s source code, I’ve uploaded the full source to both the lighting system and a basic sample that creates 2 different colored spotlights and lets you move them around the scene:

http://xna2dlighting.codeplex.com/

For the rest of you, in this post I’m going to set out what we’ll be covering in the rest of the series.

The series will be split into 9 (fingers crossed!) parts:

1) Introduction, and series contents.

2) Introduction to shaders and the LightBlend shader.

3) Structure of the lighting system, overview of the algorithm, and the LightRenderer class.

4) Point lights: ‘Unwrapping’ the shadow casters, and creating the occlusion map.

5) Point lights: Lighting the scene.

6) Blurring the LightMap: Creating soft shadows.

7) Spotlights: ‘Unwrapping’ the shadow casters part 2.

8) Spotlights: Lighting the scene and soft shadows.

9) Conclusion: Optimisations for the future.

I’ll try and keep each part to a manageable length, but there is a lot of material to cover, so they may be a couple of long posts along the way!

3 Responses to “2D Lighting System tutorial series: Part 1”

  1. Adman

    I checked this out briefly, and was a little confused. I didn't like the look of the "light grey on dark grey", so I changed the background color to Black. The lights, of course, all went away.

    This confused me a bit. I would have expected it to look more like this:

    http://ghostweb.nl/images/light2d.png

    What do you think?

  2. Random_Guy

    To get that effect you would need to set the minimum light to 0 and the background to white.

    I initially did it the way you said you'd expect, but then with white lights, if the light is too powerful you get a white-out around the light, which looks odd over detailed backgrounds.

  3. NightCabbage

    Hi there 🙂

    Just thought I’d post a comment saying that I’m excited to find your blog and tutorials!

    Nice work, thanks!

Leave a Reply


× nine = 18

Proudly powered by WordPress. Theme developed with WordPress Theme Generator.
Copyright © Rabid Lion Games. All rights reserved.