Flashlights and Things that Go Bump in the Night

Setting the right mood in the environment surrounding the player is very important. A very difficult and many times incorrectly-done part of this is the lighting. Depending on whether the game is 2D or 3D, and if you want dynamic lighting all play into how difficult it is. As with most every other decision, your target device (computer, console, mobile devices, etc) and your target market will heavily influence the entire process; Devices have limitations, and different styles of games need different moods and environments.

With Fixbot, we wanted to have some lighting in one of the levels. We weren't really worried about having realistic shadows or dynamic lighting - we just wanted the idea of navigating the player in the dark with something like a flashlight to be another fun gameplay element.

With this being my first major game project using Cocos2D for iPhone, I hadn't done any form of lighting with it yet. I had done lighting (both dynamic and non-dynamic) in other PC and Xbox360 projects, using different 2D engines including Microsoft's XNA and the more cross-platform SDL. Even though I had done similar lighting styles with these systems, I was having trouble figuring out how to best do the lighting in Cocos2D. I think my biggest problem was that I was still learning the underlying core of Cocos2D: while Cocos2D is very advanced, and is a wonderful engine for indie developers because it is open-source, it was doing things a little differently than I was used to. Now that I have had more time to learn it, as well as time spent on digging through forums, blogs, and finally the engine's source code itself, I have a much better understanding of it.

At first, we tried doing the lighting in OpenGL. I had my best programmer, Ian, digging through OpenGL books and rewriting shaders to work with OpenGL ES (which is what Cocos2D uses). While Ian spent a week on that with minimal success (it just wasn't performing like we needed it to), I started researching again. I was digging through blogs and forums (and again the source code) looking for methods to do simple lighting in Cocos2D. I was looking for an old-school 2D approach to the lighting - have a light sprite on the screen, and color all of the other pixels on the screen based on their distance from the light. Another method I was looking for was where you have a black (darkness) overlay covering the entire screen, and then "cut holes" in it using the light's sprite (usually based off of the sprite's alpha values).

Eventually I found the start for what I needed in order to do the second method - cutting holes in an overlay. My biggest worry going in was performance - for the lighting we wanted, we didn't just want to have the player have the only "flashlight" - we wanted objects in the environment to have lights as well. This is when I found the CCRenderTexture class in Cocos2D. It's a very powerful tool that can be used to do multiple things, including blending and masking.

So, in order to create our lighting effect, I have a CCRenderTexture that covers the screen and is black. Then, every tick, it gets updated according to whether there are lights currently visible on the screen. It's always good to narrow down how much you are doing in a tick method to help keep performance high.

My update tick works something like this:

Overall this achieves our desired lighting effect, and with a decent amount of testing it's proven to be performance effective as well. Now, our players have flashlights so that they can see the things that go bump in the night.

Read the original post here.