Sign in to follow this  

Does Anyone know of any 2D lighting techniques?

Recommended Posts

MylesEvans    151
I want to implement 2d lighting in my game. I know there are multiple cases of people doing so, yet I cannot seem to find any tutorials/articles on how to do so.

Share this post

Link to post
Share on other sites
spek    1240
Depending on how realistic you want it, I'd say 2D lighting isn't much different than 3D. For very simple pointlights you can simply render a quad with a white circle drawn on it. Enable additive blending and apply a color to modulate the color. Then verything behind the white circle will bright up. Cheap, and simple. However, this does not produce shadows or per-pixel effects such as normalMapping or specular hightlights. For more advanced effects, a (point)light could be defined as

- origin (where the light comes from)
- direction vector (for spotlights)
- radius (for circular light spots), (or an angle for spotlights)
- diffuse color (RGB)
- specular color (RGB)
- Maybe an ambient color that adds to a wider circle / area for indirect light simulation

In order to make per pixel-lighting work (eventually with normalMaps), you need to think of a 3D scene. Even though the scene might be flat, the layers and lights still have an X, Y(height) and Z(depth) position. Now for each pixel affected by a light, compute the diffuse, eventually specular, and eventually ambient colors. In case there are 3 lights on your screen, you can render the contents 3 times. Each time with different light parameters applied for the shader (position, radius, colors, ...). Now the shader looks the same as you would use in a 3D scene:
float attenuation = 1 - saturate(distanceBetweenPixelAndLight / lightMaxRange); // Simple linear fall-off
float3 diffuse = saturate( dot( pixelNormal, lightVectorToPixel ) ) * lightDiffuseColor.rgb * attenuation;

float4 albedo = tex2D( albedoTex, uv ); // Get the texture of the sprite, platform, or whatever you are rendering
resultColor.rgb = albedo * diffuse;
// .. And maybe add some more effects such as ambient or specular
resultColor.a = albedo.a; // In case the texture contains an alpha mask for transparency
To get some better performance (with many lights), you can also think about using a deferred rendering engine, or try to find out which parts of the screen are affected by which lights, rather than simply drawing the whole thing again for each light.

This does not give shadows yet. If you want to project foreground objects to the background, you can make use of depthMaps / Variance ShadowMapping like 3D games do. Although there are probably faster methods that can make good use of the fact the game is 2D... depends on where the lights are placed, and how complex the scenery is, I guess. What depthMaps do is rendering the scene from the lights point of view. Then when rendering, the depth values from the map and the current distance between pixel and light can tell whether a pixel was occluded by something else or not.

Some other thing. To make flat sprites (characters for example) look "3D", you need to make very good normalMaps for them. This can be hard though, normalMaps only help giving the illusion of depth a bit. Find a good balance between using dynamic lighting and pre-baked lighting (drawn into the texture of the character / object).

Good luck,

Share this post

Link to post
Share on other sites
haegarr    7372
Notice please that it is possible to re-consruct a volume for a sprite. The "camera" is usually fixed (even if for some effect a slight camera rotation is possible to e.g. simulate speed). Assume, for example, a dimetric top view. Then it is possible to define a height map, i.e. an image where for each pixel of the sprite a height value is stored. Later on, during rendering, the fragment position together with an origin can be used to compute a ray. This ray, together with the height information, can further be used to re-construct a 3D position. The effect that is possible with such a method is e.g. visualized in [url=""]this video[/url] starting at approx. 2:50 min (but don't look the avatars in that video; they are as flat as ... well, sprites ;))

The problem is how to get such a height map. However, you have the same problem with a normal map, too. The best way is to use a 3D modeling package and to compute the color, normal, and height (or perhaps depth, dependent on the camera orientation) maps in 3D.

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