My first task when I joined Dream Sloth was implementing the Prismatics effect on units and cards, and the first thing I did was investigate if there was something existing from before.
Oh, there seems to be something but it’s not great (probably why it was disabled), need to rework it.
Double Rainbow Lines 🌈
One thing about shaders you soon realize is that noise is everywhere, look at nature, almost all the stuff around us is noisy: fire, water, dirt, clouds. So, let’s base the prismatics reflections on a noisy foundation.
I started with a basic Perlin Noise implementation, and then used smoothstep() to mask it into lines, finally blended it with a moving rainbow pattern.
Nice, we are done, but not really. This implementation can be taxing, and there seems to be a simpler noise calculation available in the current project, so I’ll just use that for the base noise.
Now we are ready, onto integrating it to the actual units on the board!
Cocos Magic 🥥
Integrating the shader into the units proved to be challenging, but I solved it by blending the rainbow lines onto the existing sprites using the Blend Function for Additive Blending.
Here’s a collection of cool looking mistakes along the way.
Piksel Perfect 👾
The last thing to do now is pixelate these rainbow-y lines, this can be done by making the UV coordinates snap to match the pixel resolution we want. The function floor() is very handy for this, here’s a different example implementation using modulus.
What do you mean Cards? 🃏
Yes, the front of the cards also need the same treatment. Now that we solved it for units, it should be straightforward to port it to cards.
The difference now is that we don’t need it pixelated, and we must make the lines much larger and wider, and the effect overall much more subtle.
I thought this was GLSL not HTML 🤔
You are right, kinda. But the client also runs partly as a pure webpage, so into the HTML/CSS realm we must embark.
You can do lots of things with HTML/CSS, but unless you have a canvas and work directly with the graphics api (see webGL), you are limited by the CSS implementation of the browsers.
I initially experimented with using pre-recorded videos of the shader effect and then mix-blend-mode, but that proved to be way too expensive and slow.
After trial and error, the best approximation I came up with was an animated background consisting of a slideshow of static images. It is performant, and serves as an approximation while we are building the new client.
Conclusion 📚
This was a challenging task but also very rewarding and fun to work on. It made me familiarize with lots of different parts of the project and work on different technologies at the same time.
Part of why we are working on a new client, is to make these kind of changes much easier to implement, and be able to bring out new content faster for you.
I kept this dev log lightweight, let me know if you enjoy these and are interested in more. And if you like some more in-depth dev logs on the fine details of the process.
See ya!