Shady Business

January 7, 2019 in Screenshots by Tom

Happy new year everyone!

We’ve got a couple of new things to show you today. First up is the introductory cutscene of the second player character.

We’ve already shown how the game allows a second player to control Shadow Lenna, a character with all the same abilities and stats as Lenna. Starting in 0.13, Shadow Lenna can be unlocked near the beginning of the game. Certain cutscenes have special dialogue for Shadow Lenna that you’ll only see if you’re playing co-op.

In other news I’ve scrapped the CRT shader we had before and written a new one. It’s best viewed fullscreen, so be sure to click below for the full-size version.

The same scene with the old shader can be viewed here. The difference is night and day.

There are a few effects the new shader applies:

  • Barrel distortion
  • Scanlines
  • Color bleed

Barrel distortion serves to magnify the center of the screen, making it appear like the curved surface of a CRT screen. For the curious, this can be achieved in a couple of lines of code – it’s a transformation of the position of the pixel being shaded:

Scanlines and color bleed I implemented together. It helps to look at a zoomed in section to understand how it works:

This is a composition of two layers. The base layer is a slightly darkened version of the original texture, scaled up by nearest-neighbor (i.e. without interpolation):

On top of that–and if you’ve ever seen a CRT screen from very close up, you’ll recognize this–each of the red green and blue channels is drawn as a radial gradient. Each gradient is offset by sub-pixel amounts, creating a triangular pattern of red, green and blue blobs:

As you extend the radius of those gradients, they blend and start to reproduce the original colors of the image. Extending the gradients outwards, beyond the original pixel, until they blend into neighboring pixels creates the appearance of color bleed. This can be seen around the edges of the yellow fire sprite below: red bleeds out down and left, and green bleeds out up and right.

If the gradients are squat ovals instead of perfectly round, pixel blend into each other horizontally more than they do vertically. That means the space between neighboring vertically-aligned pixels is (relatively) darker than the space between neighboring horizontally-aligned pixels, creating the illusion of scanlines.

All together, this makes for a fairly simple, efficient, single-pass CRT shader.