Efficient 2D Tile based lighting system

Question

What is the most efficient way to do lighting for a tile based engine in Java?
Would it be putting a black background behind the tiles and changing the tiles' alpha?
Or putting a black foreground and changing alpha of that? Or anything else?

This is an example of the kind of lighting I want:

Answer 1

There are many ways to achieve this. Take some time before making your final decision. I will briefly sum up some techiques you could choose to use and provide some code in the end.

---

Hard Lighting

If you want to create a hard-edge lighting effect (like your example image), some approaches come to my mind:

Quick and dirty (as you suggested)

• Use a black background
• Set the tiles' alpha values according to their darkness value

A problem is, that you can neither make a tile brighter than it was before (highlights) nor change the color of the light. Both of these are aspects which usually make lighting in games look good.

A second set of tiles

• Use a second set of (black/colored) tiles
• Lay these over the main tiles
• Set the new tiles' alpha value depending on how strong the new color should be there.

This approach has the same effect as the first one with the advantage, that you now may color the overlay tile in another color than black, which allows for both colored lights and doing highlights.

Example:

Even though it is easy, a problem is, that this is indeed a very inefficent way. (Two rendered tiles per tile, constant recoloring, many render operations etc.)

---

More Efficient Approaches (Hard and/or Soft Lighting)

When looking at your example, I imagine the light always comes from a specific source tile (character, torch, etc.)

• For every type of light (big torch, small torch, character lighting) you create an image that represents the specific lighting behaviour relative to the source tile (light mask). Maybe something like this for a torch (white being alpha):

• For every tile which is a light source, you render this image at the position of the source as an overlay.
• To add a bit of light color, you can use e.g. 10% opaque orange instead of full alpha.

Results

Adding soft light

Soft light is no big deal now, just use more detail in light mask compared to the tiles. By using only 15% alpha in the usually black region you can add a low sight effect when a tile is not lit:

You may even easily achieve more complex lighting forms (cones etc.) just by changing the mask image.

Multiple light sources

When combining multiple light sources, this approach leads to a problem: Drawing two masks, which intersect each other, might cancel themselves out:

What we want to have is that they add their lights instead of subtracting them. Avoiding the problem:

• Invert all light masks (with alpha being dark areas, opaque being light ones)
• Render all these light masks into a temporary image which has the same dimensions as the viewport
• Invert and render the new image (as if it was the only light mask) over the whole scenery.

This would result in something similar to this:

Code for the mask invert method

Assuming you render all the tiles in a BufferedImage first, I'll provide some guidance code which resembles the last shown method (only grayscale support).

Multiple light masks for e.g. a torch and a player can be combined like this:

public BufferedImage combineMasks(BufferedImage[] images)
{
    // create the new image, canvas size is the max. of all image sizes
    int w, h;

    for (BufferedImage img : images)
    {
        w = img.getWidth() > w ? img.getWidth() : w;
        h = img.getHeight() > h ? img.getHeight() : h;
    }

    BufferedImage combined = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);

    // paint all images, preserving the alpha channels
    Graphics g = combined.getGraphics();

    for (BufferedImage img : images)
        g.drawImage(img, 0, 0, null);

    return combined;
}

The final mask is created and applied with this method:

public void applyGrayscaleMaskToAlpha(BufferedImage image, BufferedImage mask)
{
    int width = image.getWidth();
    int height = image.getHeight();

    int[] imagePixels = image.getRGB(0, 0, width, height, null, 0, width);
    int[] maskPixels = mask.getRGB(0, 0, width, height, null, 0, width);

    for (int i = 0; i < imagePixels.length; i++)
    {
        int color = imagePixels[i] & 0x00ffffff; // Mask preexisting alpha

        // get alpha from color int
        // be careful, an alpha mask works the other way round, so we have to subtract this from 255
        int alpha = (maskPixels[i] >> 24) & 0xff;
        imagePixels[i] = color | alpha;
    }

    image.setRGB(0, 0, width, height, imagePixels, 0, width);
}

As noted, this is a primitive example. Implementing color blending might be a bit more work.