September 28, 2009

Bamf: DevLog 3 — Lighting

Alright, now that we can figure out where shadows would be, we can make lights. 2D games usually do not have lighting calculated by the game; they just have art, which is all hand crafted to look good.

Castlevania: Aria of Sorrow. The blue glow means he's a vampire.

Hand crafted art is good, but it's time consuming and it's hard for the game to figure out how much light is present at a given spot, which we'll need to do later to let the game decide whether enemies can see you or not. Analyzing images to figure out what they are is difficult for a computer. Humans are so good at it that we don't even realize how complex a task it is.

So we're going to take an approach to lighting that's more like how 3D games handle it. We'll just have all our art drawn as if it were brightly lit from every direction, and then place light objects in the level. Anywhere that's not within a certain distance of these lights, or is covered up by a shadow as calculated by our shadow system, will be drawn on the screen very dark. Or more specifically, shadows will be drawn over everything.

Quake 2, the same scene rendered without shadows, and with.  I really could have showed you an example using Bamf screenshots, now that I think about it.

So here's what we have to start with. We have all our black blocks placed around the screen to be the level itself, these are the solid objects. Then a prepainted background image is drawn on the screen. This painting is drawn as if everything were brightly lit and there are very few shadows drawn into it- just enough to show details. Now we want to tell the game we want lights at certain spots, and have it figure out what areas of the screen should be dark, based on that.

Hey, a house. Designed by a man who hated privacy.

To do this, we'll use a similar process as we did for the Line of Sight vision: Draw black shadows over the screen streaming away from each solid object. Except we only want lights to light up a certain radius, and we want more than one light, so shadows have to be able to be erased by other lights.

So we'll change our tactic slightly, and use surfaces. So far we've only been drawing things onto the screen, but you can draw things to your own images and then draw those images to the screen (or to each other, which we'll use in a minute.) Game Maker refers to these extra images as surfaces.

So we make a new image for each light. Start out filling it entirely with black, then draw a white circle centered on where the light is coming from- the light object.

A very realistic light.

Then draw black shadows for any solid objects that are close enough...

It's not a coincidence that it looks like a pie.

And now you have sort of a graph of what's lit up and what's not. In Bamf, here's what the shadow surface looks like for a typical light:

This is also an example of things I have not explained in this post. Find out what for only an extra $59.95.

Once you have one of these surfaces for each light, you can blend them together into one surface. Colored lights will even properly add together to make new colors, because of how Game Maker (and computers in general) record color information:

I could have put the two colored lights closer together to get some bright yellow instead of a slight area of brown, but what would be the fun in that?

And once you have that, you can blend it with your actual game art to darken it:

The man who lives here also hates being able to see what he's doing, I guess.

So what's the benefit of going through all this trouble instead of just painting the level with shadows like this?

First, you can draw the shadows on *top* of the graphics, so the player or enemies that are in dark areas will be covered up by the shadow; they'll be dark.

Second, it's very easy for the game to look at the shadow surface and measure how bright a certain spot is, because now it doesn't have to worry about, for example, whether it's dark because it's a black object, or whether it's actually a dark spot.

Thirdly, it makes it easy to make the game look nice. Even just some blocks on a white background can look spiffy with some good lighting placement:

Not demonstrated in this example: Good lighting placement.

Next post: Advanced lighting.

No comments:

Post a Comment