I'm looking to create a 2D "spotlight" effect that allows a spotlight on multiple entities. I.e., as if several sprites were holding torches. For a single entity (one spotlight), I use a technique where I overlay a gradient sprite and have the centerpoint chase that entity. This technique works fine for a single spotlight. Here's a screenshot to illustrate what I'm talking about:
Single Spotlight - Works
The problem I run into is that this technique does not extend to multiple entities. If I overlay another spotlight image I run into several problems. Here's a simulated screenshot:
Multiple Spotlights = Problems
The most obvious problem is the visible corners. This could be solved by making the spotlight image gigantic to cover the whole level, but that doesn't feel right. The second and more intractable problem is that I'm effectively multiplying the darkness with this technique. So each sprite added has the effect of darkening everybody else. Clearly I'm approaching this problem incorrectly.
There's been some discussion of blending options in the comments. Here's my current thinking. In my single spotlight example above, I use an image file that looks something like this: (I've replaced the transparency with the color green to make it easier to illustrate)
As discussed above, the problem is that alpha blending this image with another image is not going to produce the desired effect. Instead it will produce this:
That doesn't strike me as a blending options issue. The problem, it seems to me, is that that sort of image has the transparency mask and image (a black square) built in, when they should be separated.
So instead of a black image with a cut-out transparency built-in, I ought to be using transparency masks that are utilized at run time against the black square. When doing that, I still can't use a traditional white and black transparency mask or it'll run into the same problem. Here's an example, this time the white and black represent white and black:
The solution, it seems, would be to apply a transparency mask that itself utilizes transparency. Something like this: (green = transparent)
That way, multiple transparency masks could be alpha blended together and THEN used as a transparency mask against the black square. Here's an example of two of the transparency masks alpha blended together:
Anyway, that's the approach I'm working on implementing. I'll post results if this works. What I don't know (at present) is if I can use a transparency mask that itself has transparency.