Hello!

In today’s post we’re talking about our new lighting system, how it works, and ending with a fun set of images showing off all of the previous lighting systems Comet’s had! I hope you enjoy!

New Light

When you look at almost any screenshot of Comet, you see Stella on screen.

So it was important to put a lot of time into making her look great.

I’m still blown away by how much detail Maria (Sprite & key artist)  was able to put into Stella’s sprite work given the size and colour limits.

The other major visual that is on screen for most of the game is Stella’s lamp, or more specifically, the shape you cut out of the darkness with your lamp.

There are 5 shapes it comes in, which are designed with the game's puzzle systems in mind.

If you didn’t read our previous dev log: Comet Dev: Hard Mode, it’s worth going back to. We go into a lot more detail about all of the visual layers in the game and how we pull it off.

All of this is building up to say, our lighting system just got a big update!

This was our lighting system last week.

Lights flicker, which was already a big upgrade to help make them feel alive.

But check this out!

Jan continues to be a wizard who is engineering impressive visuals that still perform well on device. 

So, how did we get here?

I was struggling to sleep one night a few weeks back, as we had some new people playtesting Comet and there’s a puzzle at the end of Chapter 2 - basically the “boss” of Chapter 2 - that really requires the player to understand the shape of the lamp as it sits over water.

The issue is, unless you have really great spatial reasoning, it’s hard to know where the outline of your lamp is when it’s over the water.

When the light mask cuts though the dark layer, the water is black! There are no white details to show off the shape.

So I started thinking about a system to detect where the player’s lamp is over the water and how we might show the outline of the shape.

Soon after, Jan said hold my beer and came up with something real that also delivered on an idea people in the Playdate Squad Discord have told a few times over the years:

1. A jagged edge to the light makes it feel a little more organic and charismatic
2. We should have a system to draw some extra sparkles just outside the light’s edge on the dark layer. 

The result feels like a big jump in quality to the lighting system we’ve seen on screen in the past.

Making it Sparkle!

The logic behind the sparkle is no rocket science. It is sparkle science. Or perhaps, pixel science. The sparkles themselves are just white pixels we draw around the lights when everything else is rendered.

In the background, we still have the light shapes that we used earlier. By blurring them, we get the nicely dithered lights, and by collecting all of the pixels that are on the sharp border between light and darkness, we prepare a list of pixels that will sparkle. (We drop every other pixel to prevent lines from forming.)

original light shape, pixels filled with spark potential,
blurred mask, and detection pixels

We need to make sure that some pixels are always lit, because that’s how we check if Stella is in the light or darkness. This was simple at first, but now we just delete one pixel in each tile that is supposed to be lit. We even found that we don’t always test the same pixel. A potential bug fixed for free.

At first we were collecting the light pixels on the inner border of the light, but we switched to the outer border — the first dark pixels instead of the last reach of light. Why? 

When Stella comes close to another source of light, the two lights overlap. And it’s very nice to see the sparkling border merge, too. The lights are punching a hole through the dark layer (aka behaving as a mask for the dark layer), so after drawing the lights and before drawing the sparkles, we check if each of the pixels where we want to place a sparkle is transparent. This wouldn’t work for the pixels on the inner edge of the light, as these are all already transparent after the lights get drawn.

Without overlap detection

With overlap detection

We draw the sparkles on top of everything, just before the frame of the game is displayed to the player. Well, there’s one more thing we draw after it — the closing-in circle of fear. That’s for another time, though.

A Walk Down Lighting Lane

Let’s take a look at the history of our lighting system to see how far we’ve come!

1. The first proof of concept

The year was 2022, nobody had a Playdate yet, and I had a dream.

I soon realised I was doing entirely too much for the little ol’ Pulp engine to handle.

2. Hard baked tiles

This version moved from 0 FPS to 8 FPS. Impressive progress!

3. You shouldn’t use frames like that

With some clever Pulp thinking, Drew (Programming lead) helped make the first functional lighting system for Comet!

You can see the first time we started drawing special art for the dark layer.

4. The light doesn’t revolve around you

Drew once again worked his magic, allowing the light to truly be in the world, attached to the lamp and not just attached to the player. 

This felt really impressive for Pulp.

5. Don’t cut yourself on that corner

Now we have static lights in the world, and rounded corners. 

We’re amazing, is there nothing we can’t make Pulp do?

6. Starting over

Well we got our answer. We couldn’t make Pulp do what we needed for Comet, so the game got rebooted into Lua and the lighting system was remade ANEW

I mean, this just feels like cheating at this point. 

7. It works for real now

Lots of time went by with dozens of little updates, but here’s a gif of the lighting system getting back up to feature parity with Pulp’s system and running at full speed.

Not too shabby.

8. Fixing the edge cases

The lighting and camera work nicely at the edge of levels now

Which isn’t always a given 😅

8B. Not quite lighting

But the dark layer is starting to roughen up a little.

9. Light it up

You can now create new light bubbles in the world.

How’s that for some permanence?

9B. Not quite lighting again

This is the point where Stella’s fear of the dark came online for the first time.

It’s feeling real.

10. This isn’t even my final form.

And the last image for today is from September 2024.

The lights flicker now, which went a long long way to making them feel less static.

Each step on this journey felt hard earned and if it had stopped here, I would have been super happy with it.

To have something this nice, written in Lua, and running on the playdate at 30 FPS is the result of lots of clever thinking.

And now its gone… to 11.

11. Enjoy a brief look at chapter 3.

To come full circle, the lighting is on screen all the time and it’s looking better than ever.

We’re keen to hear what you guys think about the new lighting system. There are some knobs we can still tweak to play with the dithering effect so it might change a little more.

And if you haven’t already, please wishlist Comet on the Playdate Catalog!