Outfit Colors on Website do not Match In-Game

[AntumDeluge]

🐞 Describe the bug

Outfit colors displayed on entity sprites on website are different than in-game. It appears to be a problem with the light/dark levels.

(left: in-game, right: website)

In addition, if lightness level is at darkest custom color for that layer isn't shown.

It is possible that it could be related to games.stendhal.server.entity.Outfit.getData called by some db dumps.

[kiheru]

The coloring done by the website is only an approximation of the actual client colors . The actual blending mode is Stendhal specific, and the website just tries to do something vaguely similar using what the php ImageMagick can do (see imageprocessing.php). The result is usually okayish, but at extremes it can be badly off.

To properly match the game coloring the website would need to implement the actual algorithm (see TrueColorComposer in Blend.java or 'trueColor' filter in sprites.js)

[AntumDeluge]

Thank you for the information @kiheru, I will look into that.

[AntumDeluge]

Beyond my understanding at the moment: https://sourceforge.net/p/arianne/stendhal-website/ci/cdde0d7ec5c8822cc8cebd3d57be92da1c909bd3/tree/scripts/imageprocessing.php#l53

Un-assigning myself in case someone else wants to fix it.

[kiheru]

The current php code would need a rewrite to do similar pixel level manipulation as the java and js code does. As of it is now, it does not look similar because it does not do the same thing, but uses existing whole image operations for somewhat similar effect. The issue is that the existing operations can't be used to perfectly reproduce the coloring. There are also some adjustments for oddities of the existing operations (buggy saturation calculation, broken alpha channel handling (html specification has the same flaw)), making the code more complicated. So the correct thing to do is to mostly forget about the current code.

Basically, what is needed is a port of the existing code to php. It already does most of the RGB->HSL color space transformation to get the S and L parts of the adjustment color. What is still needed is the H component, the inverse transform, and the TrueColor algorithm itself, and applying it to all pixels of the image.

[kiheru]

The other option would be doing the coloring in JS on the browser (and displaying a warning if the user has JS or html canvas disabled).