The One Cool Shader Trick We Use Basically Everywhere in Chicory

Hi! I’m an indie game developer named Greg Lobanov, working on a painting adventure game called Chicory: A Colorful Tale in GameMaker Studio with a tiny team of talented visual and audio artists. Early on in development I stumbled semi-accidentally onto a really neat shader trick that I ended up using on basically everything in the entire game. It’s rare to come across such a nice one-size-fits-all solution, so I figured I’d share it in hopes that it’s useful to someone else.

The Trick

It’s that black oozy stuff on the left.

This is the use case I first came upon the trick for! I wanted to make a spooky black ooze that felt like it was a little bit alive and wriggling, while matching the black and white style of the game.

To briefly explain how it works…

We’ve got a black shape that fades from fully opaque to fully transparent. The shader takes that gradient and compares each pixel, one by one, against the pixels in a scrolling “blue noise” texture. If the gradient’s alpha (opaqueness) is higher than the brightness of the noise at that spot, it turns fully opaque at that spot; elsewise, it turns fully transparent. So even though our two source images have a lot of gray/partial transparency in them, the shader mixes those to produce a wriggling visual result that’s ONLY either 100% or 0% transparent.

Here is the code:

It actually samples 2 different spots on the same noise texture, scrolling in different directions, and mixes them. That’s what makes it “wriggle.”

(If this terminology is unfamiliar, no worries! I recommend this really fascinating video about scrolling noise textures in Mario Galaxy, which is a great primer on a lot of the techniques going on here.)

Other Neat Uses…

So firstly obviously I just think the effect looks neat and I ended up using it for highlighting items, screen transitions, etc. It’s become a major visual theme for the game. But it also has some cool less-obvious uses.

Making Pixels “Breathe”

You can see this is you look very closely at the edge of the sprites in the previous menu gif, but I’ve zoomed in super close to this text here so you can see it better. See how the “GAME PAUSED” letters are “swimming” a little bit? This happens because the text is actually scaled UP a fair bit to render in the game, and the aliasing around it is interacting in a cool way with the shader.

A 4K aficionado’s worst nightmare

Here’s a niiiiice close-up look at the blurry aliased pixels around the letter “o” in our game font. When rendered at a normal scale, these gray pixels help it feel softer, but scaled up like this they look atrocious. The dissolve shader eats up those half-transparent pixels and turns them into a nice wriggling animation instead. It’s great because it means we can actually store all the text assets in our game at a lower resolution, saving on memory and disk space, and also add a nice bit of life to our menus.

But that’s not all! Following from this logic, I realized we could use tricks like this to save on resolution in all kinds of places. The best example is our map screen. I wanted to give the player a map of the entire game world, and let them zoom in and pan around like all the cool AAA game maps let you do.

You know. Like this.

In practice though this can be quite a technical challenge because you need a high resolution view of the entire game world, big enough that even a tiny crop of it is big enough to take up the entire screen. At the zoom level we use in the above GIF we’d need around 6,500x4,200 pixels of map, loaded in basically at all times. But thanks to shader magic I was able to cut the map size down by about 75%.

Here’s a section of our map at its actual full resolution, with no effects:

And here it is, zoomed in and passed through our magic shader (and then ugly-compressed by a GIF export):

I really like how the shader makes elements like the water feel like it’s moving and alive. It actually looks way better than it would to make a high-resolution map texture, in my opinion!

OK Thanks!

I hope this was helpful and maybe you learned something cool you can use sometime! If you want to see more of our game you can check out our website and even sign up for our mailing list where I regularly share behind the scenes making-of details like this (usually only to our mail subscribers).