Lighting a Falling Sand Game | Slow Rush Studios

Someone on the internet said this game was ugly, which brought a tiny lil tear to my eye.

(I mean, they weren't wrong, but still - be nice to strangers, you know?)

So I spiced things up with some fancy lighting.

Lighting Matters

Last time, I asked my inner circle of advisors - that's you; please draw those robes tight and keep your faces cloaked in shadow - how to make this game prettier.

And one awesome person¹ made this mockup for me:

Screenshot of game as it was a few weeks ago — Unlit Starting Point

Mockup showing what this game could look like with lighting — Lighting Mockup

The game, before and after magically adding lighting in Photoshop.

That was all the excuse I needed to put my business paperwork to the side and switch to hacking up some cool lighting instead.

Radiance Cascades

Except it turns out that "lighting" is one of the hardest problems in computer graphics: a perfect lighting system needs to handle tons of different colored & variously sized lights, cast soft shadows, stop light leaking through objects - and run without melting down your computer.

There are tons of different techniques each with their own tradeoffs,² which is frankly a bit daunting when you're making your first game in a homegrown engine. ³

I chose a newish technique called Radiance Cascades, which is cool because it lets each individual pixel emit or block light:

My Radiance Cascades prototype, running at about 130 frames per second (in Firefox, on an 8-year-old discrete graphics card); has some artifacts to sort out but it looks cool already.

Under the covers, it... nah, you know what?

For once, I'll spare you the gory details - let's just say it was a tricky couple of weeks and leave it at that. ⁴

Lighting in Action

On to the cool part! Here's the first cut of lighting integrated into the game:

Attempt one at integrating the lighting into the game (backgrounds turned off). I redid the fire to make it look way cooler too.

I think that looks really cool, but if you look closely you can see even the sand and wood are emitting light, which isn't right.

Here only some pixels emit light:

Fire, poison, gas (and water) emit light, but terrain doesn't: now you can actually see some dark shadows.

This way I can make some levels that are super dark, where you have to carefully light things up!

So I made bullets emit a bit of light too:

The gun's muzzle flash and bullets themselves each emit some light (and the credit pickups from killing an enemy emit a bit of light too).

Work in Progress

So now the game has some cool lighting, but there's still lots to do:

Performance is good even on a 8-year-old graphics card, but my CPU's integrated graphics and the playable web build struggle.
If you look closely at isolated light-emitting pixels,⁵ you can see some smudgy lighting artifacts that flicker as the camera moves; gotta fix that.
I'd like to integrate a bloom effect, which makes brighter lights stand out more.
I gotta figure out how to blend the lighting better with in-game characters so they don't get so washed out (and with backgrounds too). ⁶

And, of course, I wanna play with darkening the inside of terrain too, just because it looks pretty cool in the mockup above.

Question for you: what 2D game has the best lighting? Let me know so I can ~~blatantly copy~~ be inspired by them.

Playable web build‎

Try out the lighting in action here! I've kept the background turned off so the lighting is more obvious.

Press F8 to turn lighting off or on; note that lighting seems to perform poorly on Firefox specifically.

Press F1 for help, including to see keyboard/mouse controls. Mobile devices probably won't work! By playing you agree to our Privacy Policy and Terms of Service.

Who is making their own game called Frostliner - check it out!

slembcke's series on 2D lighting techniques is a fun lightning tour.

Okay technically I use Macroquad as a super-duper lightweight engine, but it doesn't have a "enable sick lighting" checkbox; Macroquad just helps me draw textures and load shaders and such.

⁴

If you would like to read the gory details of Radiance Cascades, I recommend Jason's tutorials (part 1, part 2) and Xor & Yaazarai's Gamemaker-oriented series (one, two, three).

My implementation is closely based on the latter series. (And I am also indebted to XZIL for helping figure out a workaround for a weird hardware-specific shader-versioning issue that neither of us really understand).

⁵

Such as in the 2nd last clip, at the end there's a single green gas particle that floats towards the right top - you can see a bunch of flickering around it.

⁶

At the moment I just add the radiance's color to each pixel's color, but that has some weird effects like making near-black pixels in characters go bright green thanks to lighting emitted by green flammable-gas pixels.

And black bits of backgrounds get really bright, while colored bits don't.

I think I probably need to have some sort of ambient/skybox lighting, and do some multiplicative blending, and something-something-HDR? I dunno, I'm figuring this out as I go along - but if you're reading this and thinking "duh just do ____" then don't be a stranger!