Sign in to follow this  
Spectrallic

[Tutorial] Lighting in 2D games

Recommended Posts

Hello,

 

This tutorial is ment for developers who made only 2D games so far, and like to have some cool lighting effects.

I'd like to introduce you to an awesome 'semi-2D' lighting effect for all your 2D games. The idea is to generate a normal map for your 2D texture with which you add a fake depth layer to the texture. You can then use this information to create some cool looking effects. This technique is originally used in 3D games on textures for about anything, but it does about the same in 2D. The only difference between the two is you have to adapt the rendering phase for 2D a bit to allow rendering these lights.

An example with a light:
lighting.gif 

This is basically the texture of the crate with another texture called the normal map:
CratesCombined.png 
 

The actual lighting is calculated on the GPU using this normal map as a directional vector. 

 

For the full article and an example in code (C# and HLSL), see my blogpost

You can also see this lighting effect in action in my game called Graphity. In this video, every bullet is basically rendered with a light behind it and you can see the effects on lighting the player. Of course the game comes with a range of effects including blurring the particles, as seen in the video.

 

What I'd like to know from you is, what did you think about the tutorial itself? What could be explained better etc..

Besides that I'm looking for some new topics to write a tutorial about, let me know if you think of one.

Share this post


Link to post
Share on other sites

To get reviews, comments, suggestions, etc., a better choice would be to create a gamedev article. That's more in keeping with the intent of gamedev articles vs. forum topics, particularly since you're requesting comments on something offsite.

Edited by Buckeye

Share this post


Link to post
Share on other sites

what did you think about the tutorial itself?

 

It's missing a lot of things.

  1. Rotation of sprites and how to make lighting work correctly with it (rotating normals by angle or 2x2 matrix or the compact version of it - and how such matrices should be generated).
  2. How to make sure that the textures are correct (reading normals from normal map colors).
  3. Different types of rendering, and why it matters (alpha blending doesn't work right with deferred shading).
  4. No code in the tutorial. That would make it easier to see how it works.

Share this post


Link to post
Share on other sites

1. I do however already have a tutorial online on rotations (and their matrices) so I could simply link to that from this tutorial, but definitely a good suggestion to point this out.

2. I believe by explaining how the normal maps work (saying the blue in the texture corresponds with a normal vector pointing up) you gain understanding to check this yourself?

3. This seems to me more of a topic on different rendering methods. It might be good to add a warning about transparency in the tutorial itself?

4. I have left out the code in the tutorial itself, because the full example offers all the code at once. It is commented to show which steps from the article are pursued

 

Thanks for your response, I will add a link to my other tutorial about rotational matrices to the article on the blog!

Share this post


Link to post
Share on other sites

2. I believe by explaining how the normal maps work (saying the blue in the texture corresponds with a normal vector pointing up) you gain understanding to check this yourself?


What about red/green? Those are arguably the most important colors in a normal map since Z can be reconstructed in most cases.
 

3. This seems to me more of a topic on different rendering methods. It might be good to add a warning about transparency in the tutorial itself?

 
Yes, definitely. It is misleading to introduce deferred shading as the way to render normal maps and then completely forget about the transparency issues that would be relevant to most 2D games.
 

4. I have left out the code in the tutorial itself, because the full example offers all the code at once.

 
It is a waste of the reader's time not to offer something so important instantly, instead requesting him/her to download something and try to find something in there. Remember, tutorials should be written to make people's life easier, not to host an aspiring detectives' contest. smile.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this