Hello! I’m going to ignore whatever happened last week and say that I’m excited because I can actually give proper screenshots now! Plus, I can actually use them to demonstrate a point – namely, the non-intuitive way my lighting system has to work.
(Oooh. Aaah. Click to make larger.)
The first screenshot is what you might see at the start of a level, and the second would be closer to the end. I’ll be focusing on the second one in my explanations, just because it demonstrates most of what I want to talk about.
When I came up with the idea for the lighting system, I knew that I wanted to implement it without causing anything to leave the 216 color pallete I mentioned way back in week 1. Those colors are called the “Web-Safe Color Palette,” and they were more useful in the early days of computing, when a web designer could only expect computers to be able to display 256 colors. But to explain what was so special about the web-safe color palette, I’ll need to go a little bit into how colors are made on your screen.
Every pixel on your computer screen is actually made up of a red, a green, and a blue LED. Those LEDs can be displayed at any intensity to simulate other colors; purple, for example, is just a mix of the red and blue lights. All colors can be described this way by setting a number equal to the brightness of each LED – usually in red, green, blue order. (0, 0, 0) means no lights are on, so black is displayed, and white is displayed when all the lights are at maximum brightness, almost always (255, 255, 255).
In the web-safe color palette, these numbers are restricted to only have one of 6 values: 0, 51, 102, 153, 204, and 255. Note that these are evenly spaced in multiples of 51. Therefore, in order to stay within the color palette, colors can only move in jumps of 51 in each component. That will be important in a minute.
My lighting system is subtractive. This means that if you were to disable the lighting entirely, everything would look like it was in the brightest light possible – in my case, the inside light of the white beam. If things aren’t in that brightest light, then the numbers that make up their original colors are subtracted from to make them darker. For example, the outer ring of light from the white beam subtracts 102 from each component. See where I’m going with this? Let’s take the light grey from the background rock texture. It has color values of (153, 153, 153). When that color is in the outer ring of light from the white beam, 102 is subtracted from each value, making it display as (51, 51, 51), which is also a color in the web-safe color palette! That means that I can remain faithful to my arbitrary goal of using only those 216 colors!
…hey, where are you going? I still haven’t even talked about how overlapping lights are dealt with! Come back!
No? Guess it’s just you and me then. Look back at the second screenshot above. It’s kind of odd how the yellow torch-light just kind of replaces the light from the red beams, right? And the white would replace both of them. This does have reasoning behind it: one, I think keeping the clean, geometric shapes looks nice, and two, it means I can stay within the 216 color palette. The logic behind what gets drawn over what is actually pretty simple – the brighter, the better. The bright white light shows up over the bright red light because the red light is adjusting the color by (0, -51, -51). I can only subtract in the lighting system, not add, so to make the light look red, I have to subtract from green and blue. Meanwhile, the white light isn’t subtracting at all, so it’s light is brighter, meaning it goes on top. The players torch adjusts by (0, 0, -51), so it goes on top of the red but behind the white, etc.
There’s only one exception to this rule, and it comes with the vines and mushrooms you can see in the second screenshot. They have their own ring of faint light around them – purple for the mushrooms, green for the vines – to help them stand out. I wanted to keep these lights distinct and circular even if they would normally be drawn over by torch or beam light. So, no matter what, their light is shown instead of any faint light that would normally be in that area. If a bright light passes through, however, it will appear over the faint light, as you would expect.
Quite the explanation this week, but for an awesome effect. I didn’t even get to touch on the water effect, which I’ll get to when I talk about designing levels with water in them. Next week, expect a discussion on sound, music, and (just maybe) a whole lot of counting to 4.