Texturing sprites using (dis) placement map

Recently, picking up for the purpose of research one alien project, I came across a very curious and at the same time very simple technology. I’ll say right away that I was picking up a flash drive, but this technology can be used not only in flash, but in general - anywhere.

In short, the technology allows you to have one rendered animation and impose on it a variety of skins, thereby obtaining externally different objects.

The bottom line is that in the game I study there are a large number of animated sprites of little men (as I originally thought were pre-rendered). Men are different (dressed differently, in different colors, etc.).

But seeing the resources, I saw a very interesting thing. I saw strange looking rendered images:
')


And also, various textures of this type:



The texture is clear. But what nonsense in the first picture? Logic suggested that this was some kind of distortion texture map. At first, I was thinking about some distortions and a normal map ... But then a simple idea came to my mind - a displacement map. This is when the coordinates of the shifts are encoded in the picture. For example, in the red channel - shift on "x", and in blue - on "y".

Spreading it through the channels, I got this:



And almost immediately understood everything. It is immediately obvious that the blue channel is clearly an alpha channel.

Looking at the green channel and seeing a clear vertical gradient on it, it became apparent that the y-coordinate was encrypted in it. Well, and red could be nothing more than iksom.

Crawling “pipette” on the picture, the suspicions were confirmed by the fact that each and R and G components varied in the range 0..127, while the texture image was just 128x128 pixels in size.

Pretty quickly, I sketched code that did the following for each pixel:

color = map.getPixel(x, y);
tX = color.R;
tY = color.G;
alpha = color.B;
textureColor = texture.getPixel(tX, tY);
dest.setPixel(x, y, textureColor, alpha);


As a result, I got almost what I see in the original project. Textured phases of the animation man:



True, the mechanism is not quite displacement (in case of displacement, we are talking about relative changes in the texture mapping). Here, rather, you just need to call “placement map”. :)

You can even distribute the smoothing algorithm and the use of neighboring points on the texture - and everything will be all chocolate.

It should be noted that the flash has a built-in mechanism DisplacementMapFilter, but it did not fit, because it works with relative coordinates (as, in other matters, it is supposed to displacement). Those. in our case he would do
textureColor = texture.getPixel (x + tX, y + tY);

Total

I really liked the technology. It allows you to get a bunch of high-quality rasskazinov objects without using 3D rendering technology and at the same time have a simple change of these skins.

Already planning to use it in my project.

Question.

The only question that remains is - with what kind of software can you get such textures, and most importantly - render such distortion maps ???

I would be very grateful to the habrasoobschestvu, if someone shared knowledge.

PS

Already after publication, I realized how it is possible to get such a render even without any special plug-ins, etc .:

1. We take our model, do UV-scan.
2. Fill the UV sweep texture with a special gradient, where the R-component will correspond to the “x” coordinate, and G - to the “y” coordinate.
3. We set the B-component over the entire texture to the maximum.
4. Render the resulting thing without taking into account the light, reflections, etc., on a black background.

As a result, we obtain the desired result. X / y will be in R / G, and the alpha will fall into “B” because where our object will be transparent - the background color (black) will shine through, in the rest of the places - “B” will be taken from the texture (255).

PS: About exporting the alpha channel to blue helped me think through the xanep habrauser .