I've always been a super math nerd, especially when it comes to color math. I used to say "Math is my paintbrush". While working as an FX artist I used math to shape and sculpt procedural textures like clouds or fire or water to great effect.
And so this week while creating the character customizer, I found out that the color picker I'd come to know so well wasn't a standard thing available in Unity, I had to make one from scratch. I thought today I'd share what that looks like and we can finish by going back to an old friend, the Mana Flare.
UVs are Magical
For the uninitiated, a UV is simply a color gradient that goes from 0-1 in two directions. If you imagine coloring a sheet of paper and wrapping it around your arm, a UV is just that square sheet of paper.
They come in many flavors, and i've written in the past about how to use that information in very clever ways, but for today's trick we're just going to reference the most common two: standard (square) and polar (circular). Both have two axis - x and y; radius and angle.
Our character color picker needs a hue ring, so let's start there. The easiest way to make a ring is to grab a circle and subtract a smaller circle from it. The "Step" function just says:
- "True past this number" - 1, white
- "False before that number" - 0, black
The radius value feeds our Step. Once the subtraction is done we end up with a white ring and now we can leverage the V value, If we simply tell V to drive a Hue Rotation, we end up with a perfect rainbow that loops back on where we started. Multiply these two together, and we're home!
The next thing we need is a Saturation Value triangle, which is my interface of choice because it gives the most freedom in the smallest space. Here we're going to leverage a standard UV layout.
Using that same Step function, we can get clever and use the U and V value together to drive the Step rather than a constant value. If we just did U and V straight, we'd get a perfect diagonal line, but we need to make a triangle, so we can divide by 2 to give us some breathing room. Use that same trick on the opposite side and the bottom, multiply them all together again and we get a triangle.
For the color we actually already have everything we need. V - left to right, multiplied by our color gives us a clean gradient there, and U bottom to top is already just a black and white gradient. Linear blend between the two and it maps perfectly to our triangle.
My favorite part about this is its literally all just math, no textures, just numbers, which means its super fast, but also just really clean and elegant. Definitely took me by surprise that there wasn't a built in widget for this, but also it was fun to create one from scratch. Plus I get the benefit of rotating the hue wheel to match the elemental layout of the game. Small touch, but worth it.
Making a Mana Flare
Mana Flare is really just a natural extension of the lines of thought above. It's true that I use textures for the flare itself, but only for the parts in motion. The sphere look, the flat pool, the radial lines all use the same techniques from above to create the shape for the textures to flow inside of.
I won't go into all the super mathy details, but you can recognize a lot of the techniques even from this simple split-shot. There are radial glows, some squashed more than others, there are rings with textures flowing through them. The main ball is a circle with a fresnel edge (basically just whiter at the edge), and then the surface is another squashed circle.
The only real tricky bit there is making the ellipse scale appropriately with the Y height to complete the illusion. There's even a simple Above/Below Step function determining whether the mana liquid is visible, but the ellipse neatly hides the transition so you never see the hard edge.
State of the Build
The v0.5 update is nearing completion. You can play the latest version of it in the Experimental branch right now! I'm probably going to let it bake for a week or so to find extra bugs and bits of polish here and there, but with it comes the largest Performance improvements to date, Character Customization, Achievements, a new Tutorial, and a slew of quality of life improvements.
Lots more to do, and so back to the Lab! 🌿
~CyanAvatar