The Versatility of Shaders for Mundane Chores


In  the 0.1.0 update, I finally got dual-bunny interactions working, and to do that I used a shader trick to avoid having to perfectly align pairs of sprites, but to explain that, let's talk briefly about how the different color bunnies work in the first place.  Godot has a tint feature:

It's called "Modulate" but all CanvasItem objects can use it!

What it does is it multiplies every pixel in an image by the color as specified.  Works pretty well, but when I designed my bunnies, I wanted to be able to make them *brighter* than they appeared in the original pixel data.  So instead of this method, each bunny object has a simple shader like this one applied to it:


As you can see, it works exactly the same as the modulate function, but with a very subtle difference: I didn't tell the engine that input_color was a color, I just called it a 3-element vector.  What this means is that Godot won't "clamp" the color inputs to values between 0 and 1.0, meaning I can multiply the values by *more than one* and make brightly-colored bunnies.  (If you slide all the sliders in the bunny builder to max, you'll notice the bunny gets pretty washed out, but the intended use of the feature is just to go a smidge above 1.0 to make bright colors "pop".)

So two points here: first, shaders can be used in surprisingly understated ways, and second, they're actually pretty easy in Godot.  (PlayWithFurcifer has a great intro!)  Now, let's look at something trickier: Suppose I have this PNG:


And I want to color the two bunnies independently of each other.  Well, if you watched PlayWithFurcifer's video, you know that shaders are code executed on every pixel of the image, so we just need to somehow turn a conditional statement (color with A or with B) into an image.  No problem, just paint both bunnies different colors, and I mean just blow out the color completely:


This is pretty trivial if you have layers in your drawing program, just paint over the sprite sheet at 40% opacity then crank it back up for export...

Now you write a shader that takes as its inputs TWO images:


In theory, you can use any colors you like, and use a conditional statement to test for it, but I saved some code by explicitly mixing by the green and blue channels.  Now in theory, I could also have carefully separated the two bunnies in the image and made two different PNGs, and then layered them after applying shaders to get the same effect, but consider what I gain this way: I only make the animations once, I don't have to keep track of drawings on different layers, and I don't have to flip back and forth between them to make sure I have the layering right.  It also means that if I add more partners or special colored or alternatively-shaded layers, I don't keep adding new pictures, just new colors to the already existing mask image. 

Get Bunny Boink Terrarium

Leave a comment

Log in with itch.io to leave a comment.