• Welcome to Final Fantasy Hacktics. Please login or sign up.

[UTILITY] Win32 Sprite Remixer (preview)

Started by lirmont, December 21, 2013, 09:50:52 pm


December 21, 2013, 09:50:52 pm Last Edit: December 22, 2013, 06:47:55 pm by lirmont
As I explained over in the proposal thread, this is a utility that lets you mix and match a lot of the information related to sprites. Everyone will get a chance to play around with it during the relaunch of the Tethical kickstarter, but I wanted to show off some of the features that made it into the program. In this post, I discuss using it as a no-nonsense way to replace colors.


The Base Image (for reference)

This is the standard FFT chocobo sprite (minus the parts I didn't bother to include in the format document, like the portrait).

End Points & Intersections Mode

A color replacement method where the program calculates and exposes where color ramps end and where those color ramps intersect. This mode gives the most control (without forcing you to micromanage all the colors).

End Points Mode

A color replacement mode where just the end points of color ramps are exposed by the program. This essentially lets the user set dark and light values, and the program figures out the middle values.

Intersections Mode

A color replacement mode where only the intersections of color ramps are exposed. This mode lets the user set a minimal number of colors in order to recolor the sprite. It's not suitable for every image, and it relies heavily on perception-corrected hue shifts.

A black chocobo accomplished with 3 reference colors.


Understanding the Underlying Color Technology

When the program loads an image, first it removes all the parts that aren't requested by the user. Then it iterates over the image's pixels, storing unique colors. In other words, if the user is only concerned with the arms of a sprite, the program is only going to consider the colors that the arms use (as opposed to, say, the portrait). That's important, because the program can mix and match other sprites (in effect, remixing them). This color-specific example doesn't do that, but hopefully you get the idea.

From Unique Colors to Color Relationships

Step one is to get all the unique colors in a given part of the image, but just having all the colors in the sub-image isn't enough to simplify anything. Imagine if the program presented you with all 16 unique colors of a sprite. You'd have to set all of them, just as though you were doing it in a graphics editing program. I mean, imagine if the sprite had 160 unique colors or 1600 unique colors. So, to simplify that, the program goes about figuring out how the unique colors are related. Once it's got the colors laid out into color ramps, then we have a lot of interesting information at our disposal. Obviously, it's an easy thought to set out to replace the two colors at the edge of any given color ramp. That's the end points color replacement method.

End Points and the Codominant Pair Color Relationship

If we consider two colors in a pair, how are they related? In the codominant pair, it treats both ends of the color ramp as significant. In other words, we walk directly from the starting color to the ending color over a perceptual color space, and the program lets you set those two colors separately. Because both of the colors are significant, there's no extra information needed to make color choices.

Intersections and the Major-Minor Pair Color Relationship

Where intersections are concerned, if one intersection goes to another intersection, the relationship is a codominant relationship (where the colors at each intersection are significant). If the intersection goes towards an end point, the relationship is a major-minor relationship, where the change in hue and lightness are used in tandem to morph the significant color at each step (creating a new color at each point until you have a replacement for all the insignificant colors contained in the ramp). Effectively, you get a perceptually correct hue shift (based on the original colors).

Filling in the Gaps with Minor-Minor Pair Color Relationships

When two insignificant colors wind up next to each other in a color replacement method, they are put into a minor minor pair. It's exactly like the codominant pair relationship, but it happens after all the other more important pairs are set (and its values are set implicitly by other things in the color map).

Putting it all Together

So, behind the scenes, the program does a lot of complicated color analysis. However, that's exactly where you want the work to be done. Because it does all that analysis, you can set a couple of colors (check out the charcoal chocobo) and get a pretty good result in the intersections mode (with effectively no knowledge of color). You can also get a very controlled result with the "End Points & Intersections" mode. It requires a bit more knowledge of colors, but you can use the suggested color lightness (in association with the color select dialog) to gauge what might be an acceptable color (re: you can pick a color at random and set the lightness to the right range).


That is really quite nifty, and I look forward to playing around with it. :o
  • Modding version: PSX
* Angel should quit being a lazy bitch
<@Elric> I agree to that as well

nyanyame nyanyajuu nyanyado no nyarabide nyakunyaku inyanyaku nyanyahan nyanyadai nyannyaku nyarabete nyaganyagame
At the end of the day, are we not all trapped inside lemons?


  • Modding version: PSX


Alright, here's a sneak preview of how this program's algorithm works on a legitimate piece of pixel art, using pieces from Lijj's impressive catalog of awesomeness: World of Ruin.

And then the Bomb Lord: Bomb Lord

It should be noted that the current version doesn't recognize the key color in the kind of shift the bomb lord uses as a significant color (the saturated orange that pivots the dark color towards the highlight color). I may have to adjust some things based on that.


You should be posting about this at Pixeljoint.com and wayofthepixel.net

I feel that folks would be quite excited about this.
Current Projects:


I was going to say that.

Pretty impressive.
Now everyone sit down, relax and have a good damned cup of tea.
Then go out into the forest and see the stars.

Then come back and realize it's pointless to be so worked up over what's meant to be our hobby.
That should be my motto here, holy s


@Cheetah: I hadn't thought of that. Once I get it to a release point, I'll do that.

@mobius: Thanks!


Sprite Remixer Early Demonstration

If you skim through the video, there are 4 sections: Choto's Flan, Icons (@14:50), Lijj's Pixel Art (@21:00), and Icons again (@40:00). Otherwise, head over to youtube and view it in HD (and probably fullscreen). Thanks.


Goddammit Lirmont, I'll never understand how you do what you do, but this is awesome stuff!!
  • Modding version: PSX
<@Angel> Teach a man to fish and he'll open up a fishery to compete against yours.

Journey of the Five Youtube ChannelThe Lion War Current Status
Jot5 Leader :: Eventer :: OtherTLW Leader :: Eventer :: Other


This is crazy. I would really recommend posting what you have at one of the two pixel sites right now. I think you would get a ton of useful feedback. What you did with that piece of Lijj's is amazing.
Current Projects:


January 12, 2014, 10:09:40 pm #9 Last Edit: January 13, 2014, 11:23:47 am by lirmont
Alright, I'll go do that on pixeljoint (since that sticky topic about color helped spawn these features anyway). In the meantime, maybe help me figure out what kind of color controls these things should devolve to for in-game use (where you do the process I do in the video for your own character during customization). I was thinking of having two bars, one for lightness and one for hue. However, that wouldn't let you desaturate colors like I do in the video. I thought about just porting the color select tool to the game engine, but I kind of feel like that misses the point of it being a game context. Thanks.


pixeljoint post: Work in Progress Color Replacement Tool


Proposed In-Game Context Color Picker

So then this type of color selector would make use of a gamepad like left-right of a left analog stick for hue (the bright colors), up-down for lightness (the vertical bar), and then up-down of the right analog stick for saturation (the bar going into the screen). For mouse interaction, you'd click along any of the 3 bars.


Holy shit.. I've been missing out. [frantically begins reading]
Very tasteful color edits Lirmont! That WoR looks pretty psychaedelic.
  • Modding version: PSX


Color Nexus (Generic 3d Color Control)

Just gotta port over the color replacement stuff now, but the cool color picker works. I thought about doing a video of it without the color replacement (how it is now), but it just wouldn't make sense (because the flan would stay blue). It's a neat control, though. There's a bar for hue. There's a bar for saturation. There's a bar for lightness. The python library I'm using for the color is wonky for the perceptual color space, so I will probably also need to fix that (re: it accepts values way outside of 0 to 100 for lightness).