You may be familiar with Vanden's and Corva's "icon packs", which provided new texture files for the game to use as Power icons. Vanden's goal was to keep icons up-to-date with meaningful symbology (that's a word now), and Corva's was to stylize the icons to make them more interesting to look at. Both of them, however, did their thing by using tech developed by yours truly. (-:
In their simplest form, Power icons consist of three main elements: a background, an overlay, and a border. In order to make new Power icons, each of those elements will need to be isolated in a way that will enable it to be used for new purposes.
We can start with the icons for Luminous Aura, the Peacebringer secondary Power Set. It has a wide variety of symbols and, most importantly, a larger span of hues on the background than most Power Set icons do:
Using select pixels from the icons as they were given to us in the game, there's actually enough color information to reconstruct the entire background without any border or overlays:
Fortunately, the colors in Luminous Aura follow the same general brightness convention as typical icons: the purple is mathematically darker than the blue. Sorting the colors by magnitude (you can use the distance formula on RGB channels) and interpreting the indexes as greyscale, we get a general colorizable pixel pattern for icon backgrounds:
The means by which we can use this pattern are fairly simple: take an existing icon from the game, delete any pixels that definitely don't belong to the icon's background, and match up the remaining colors with indexes in a palette according to this greyscale pattern. That is to say, if a given pixel in a Power icon lines up with a pattern pixel of value, let's say, 123, then we know what palette index 123 looks like for that Power icon.
Clear as mud? Let's try an example.
The Fortunata Training icons have a purple background and, as will be useful later, greyscale overlays. Here's Telekinetic Blast:
Not all of those pixels belong to the purple background, of course. It still has the single-target border and Knockback overlay. Soooo, we'll just take a hole puncher after those:
And now we can match these up with the greyscale pixel pattern. Remember: the exact value of a pixel in the pattern directly corresponds with the index in a 256-color palette. Using the available colors of this hole-punched Fortunata icon, we get the following partial palette:
The left-most color, which happens to be black, is palette index 0, and the right-most color is index 255. And as you can see, even with the border and Knockback overlay blasted to bits, there's still quite a few colors left in the image. There's also quite a few holes. But those can be filled in using some simple
linear interpolation:
In a perfect world, our work would be done. But this isn't an exact science. If you look carefully, you'll notice the gradient isn't as graceful as it could be: there are some "bumps" where colors don't transition smoothly as you progress from left to right. In some cases, the gradient actually has darker spots to the right of lighter spots, which ain't supposed to happen.
So something needs to be done. What we can do is take that gradient and use it to make a
new gradient, but with fewer nodes. Fewer nodes necessarily means fewer bumps, so it's just a matter of picking how many nodes and where to put them. This also isn't an exact science, but the algorithm I came up with takes a number of nodes and selects the positions such that the resulting gradient is as close to the original as possible:
In this case, the resulting palette is defined with 10 nodes, compared to however many the original had. It's very close to the original, but minus the bumps.
Now our work with this palette is done. We can apply it to the greyscale pixel pattern from before and produce what is, more or less, a Fortunata Training icon's background:
Now comes the fun part.
The tricky task with processing these Power icons is how, exactly, to peel off the overlays so that they can be used with different palettes. To do that, we need to understand how the overlays were glued on in the first place. This is done using a simple image processing technique called
alpha blending. The formula for alpha blending is as follows:
Result = Foreground * Alpha + Background * (1 - Alpha)
Where Foreground is each of the individual red, green and blue channels of the foreground color, Background are the RGB channels (again, individually) of the background color, and Alpha is a number from 0 to 1, where 0 means the Foreground color is transparent and 1 means it's opaque.
In the case of Telekinetic Blast, we know both Background (generated above) and Result (the original icon). We don't know either Foreground or Alpha, though. And since you can't solve for two variables in a single equation, that means that this--once again--is not an exact science.
We do have a relatively small set of values that each could possibly be, though. Alpha is going to be in the range of 0 / 255 through 255 / 255, and Foreground is greyscale for both the border as well as the Knockback overlay. What we can do is try every combination of Alpha and Foreground (256 ^ 2, or 65,536 combinations) and see which one is the closest match to the pixel in the original icon. This technique is known as
brute force.
The result of brute forcing (brute smashing?) the Telekinetic Blast icon is as follows:
This is useful for two reasons: it gives us both a border and an overlay. In particular, though, it gives us an overlay. The two components can be disjoined with some simple image editing:
It isn't just greyscale that you can do this with. As long as you know all 256 of the potential values of Foreground in the blending equation, you can peel off an overlay from any icon (or, at least, icons where the overlays use a different palette than the background).
But what if you don't have the foreground palette? Well, funnily enough,
that can be determined by using a known overlay pattern. For instance, we have the pixels for Knockback, so let's use that on Fire Control, where Bonfire uses the Knockback overlay:
Fire Control's background palette is orange, and the foreground palette is a medium blue. So how do we turn that blue into a gradient? Well, it's alpha blending again. Here's the formula again so you don't have to scroll up:
Result = Foreground * Alpha + Background * (1 - Alpha)
In this case, we have more information. We know Result (the original Bonfire icon), Alpha (provided by the Knockback overlay) and Background (generated above). Solving for Foreground just takes a little algebra:
Foreground = (Result - Background * (1 - Alpha)) / Alpha
Since you can't divide by zero, any Alpha of 0 will have an undefined color. You can make this anything you want, be it your favorite color, random noise, the official tartan design of Clan McDuck... But typically, it's just set to black. Here's the output of this
un-blending operation on Bonfire's overlay:
As it turns out, we can use the Knockback pixel pattern in exactly the same way we used the background pixel pattern, allowing us to convert this into a palette. It's the same deal: the value of a pixel in the greyscale image represents the index of the color in its respective palette:
Oops, that doesn't look quite right. Some of the orange from the background slipped in because, surprise surprise, this isn't an exact science. The easiest solution might be to just pick off the orange nodes manually, but I prefer an more automated approach. This is still experimental, but I made a node-removal filter that checks the hue of colors, discarding them if they exceed a certain threshold:
Ah, that's better. The foreground palettes aren't as delicate as the background palettes, and can be accurately expressed with fewer nodes. In this case, I'm using 5 nodes.
Remember the process by which we peeled off the Knockback overlay in the first place? Well, we can do that now with other icons in Fire Control, since we have the foreground palette. Here's Ring of Fire's Immobilize overlay:
And coming full-circle, we can take that Immobilize overlay to
yet another Power Set, like Impale from Spines:
At this point, we can hop around from Power Set to Power Set, peeling off overlays and borders, and generating palettes. A good 99% of all icon resources can be reverse-engineered in this fashion, which is exactly what I did all those years ago when I wrote a program to generate custom Power icons...
And the rest, as they say, is history. (-:
