Introducing the Shader Series
There’s a lot to love about the Corona SDK. It’s a powerful, fluid, and flexible platform, richly featured and yet super accessible to power coders and casual programmers alike. As with any platform, though, it’s only a matter of time before you start combing the docs for that one feature you desperately need, but doesn’t seem to be available.
Corona, for example, has a powerful transition library built-in. It works a treat for the standard stuff you’d want to animate: movement along the x or y axis, alpha opacity, scale and size and rotation, etc. But what if you want to animate the color of a shape? Say, from green to red, to indicate some kind of alarm status?
You’re not out of luck, but the answer might not be obvious.
We toyed with a few plugins we found, but most of them seemed buggy or just didn’t produce the effect we wanted. Shaders, meanwhile, seemed both intimidating and unhelpful, but it turns out that they’re 1) arguably the best solution and 2) pretty easy to use when you jump over the mental hurdle.
In Corona-speak, you need a custom shader effect. It operates like a standard Fill Effect, of which Corona has many, but with a perk: you get to define the fill effect using a shader. Why would you do this? Well, you get to tell everyone that you’re using shaders. That’s always a perk. But it surely can’t be a coincidence that Corona’s transition library allows you to (easily!) transition a shape’s fill effect.
By combining shader effects and the standard transitions you’re already using, smoothly animating a shape’s fill color from green to red becomes simple. And that’s just the tip of the iceberg — shader effects can bring all sorts of juice and charm to your art. We use them liberally in our games to create a lot of cool effects that would otherwise only be possible with a dedicated artist on staff.
We’ll be covering both some sample shaders and how we use them in a new series here on the blog. Very cleverly, it’s titled the Shader Series. Ready to get started?
Get the code (and some sage advice) on that color transition right here.
