RexColorReplace: artifacts in changing skin colors
dtturcotte opened this issue · comments
I am trying to change skin tones on a sprite's image using your rexColorReplace: see here
The top of the head, and the face, both have a unified color pixel across their respective regions, but there seems to be discolored "outlines" around the head and face for epsilons 0.1 and 0.25 respectively. How can I remove those artifacts?
If I change the epsilons higher (0.4, 0.4) the colors are completely off from the ones I want to swap in:
![Screen Shot 2024-06-19 at 11 53 36 AM](https://private-user-images.githubusercontent.com/4550049/341139145-9f4bb87a-7ecb-4c7c-ab63-7fcd49ba67f4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxMzI3NzQsIm5iZiI6MTcyMDEzMjQ3NCwicGF0aCI6Ii80NTUwMDQ5LzM0MTEzOTE0NS05ZjRiYjg3YS03ZWNiLTRjN2MtYWI2My03ZmNkNDliYTY3ZjQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDRUMjIzNDM0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MjJiNDkwODU1MDk4M2FhZTIxM2ZhMmY0YmYzNDFkNjZiMTg5YTg4MTYwM2EwMmYxY2JjMDFhMWI4ZjI5MGI2NCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.Njme30KAEXkUpMa2gKZKtTXHljt6aVN2EoPe7nA-V6o)
Desired output (this was manually done in Photoshop):
![Screen Shot 2024-06-19 at 1 16 34 PM](https://private-user-images.githubusercontent.com/4550049/341158798-22869839-b240-42b1-aafe-49cd63f461af.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxMzI3NzQsIm5iZiI6MTcyMDEzMjQ3NCwicGF0aCI6Ii80NTUwMDQ5LzM0MTE1ODc5OC0yMjg2OTgzOS1iMjQwLTQyYjEtYWFmZS00OWNkNjNmNDYxYWYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDRUMjIzNDM0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9N2RhNjU3NTBhOTZlY2UzOWVhY2YwMTUxM2U3OGM4YWUxY2ZkMDZiYzMwMzg4Yjg5YTlmYmY4ZDc0NWE3MjNmOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.9o4ng1TQXKkJRK7XfZpaiQHh2gINzCrqC15Id2CSQ9A)
How about setting pixelArt: true
in game config?
@rexrainbow I have some non-pixel art items in my game, and setting pixelArt: true
pixelates the splash images, etc and makes it look terrible.
Any other suggestions? Do you know if Aseprite exports images with semi-transparent pixels? Because, if I open one of the images exported from Aseprite in Photoshop, and use the wand tool to select pixels of a certain region, it won't select all of the pixels in the supposed matching color region.
In Aseprite, if I use the wand tool to select the darker top head region, it selects all matching colors as expected:
![Screen Shot 2024-06-20 at 12 50 14 PM](https://private-user-images.githubusercontent.com/4550049/341497632-b692e1f0-2f1c-4d96-96ae-b26e61fd36b4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxMzI3NzQsIm5iZiI6MTcyMDEzMjQ3NCwicGF0aCI6Ii80NTUwMDQ5LzM0MTQ5NzYzMi1iNjkyZTFmMC0yZjFjLTRkOTYtOTZhZS1iMjZlNjFmZDM2YjQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDRUMjIzNDM0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MmU2NWQwM2FjYTg1NzBlMWRkMWVmZDEyNjgyMTI1YjVjMWUwMDEzYjdlZmZmMTQ2MzcwYmRhNTExOTljYTdhNCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.i1SoYscv08YmpgwaVCL1E0qeuk76r_zLU7WZFvIJjSA)
However, if I open the image in Photoshop and select the same region, it appears there are some "semi-transparent" pixels. Perhaps this is throwing off the rexColorReplace?
![Screen Shot 2024-06-20 at 12 50 19 PM](https://private-user-images.githubusercontent.com/4550049/341498068-11f9e026-68fa-400b-bfd3-7ee1fe508037.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxMzI3NzQsIm5iZiI6MTcyMDEzMjQ3NCwicGF0aCI6Ii80NTUwMDQ5LzM0MTQ5ODA2OC0xMWY5ZTAyNi02OGZhLTQwMGItYmZkMy03ZWUxZmU1MDgwMzcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDRUMjIzNDM0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NWZkYzQ0YzNlYjg0MGRhMGQ4ODkxNWU3OTdiYzg0MTE2NzM2MTJmOTAxNzMxN2E4ZTIwZTczYjdlMTk5OTQzNSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.NWOnEhaK9n6pM_qF7C8oSTJAJuYTdc6p4BzYowEiTnQ)
From source code of phase engine, you can set a texture to antialias render mode. (Demo, line 15).
this.textures.get('face').setFilter(1)
@rexrainbow This is looking awesome!!!
I use a TexturePacker atlas, so anyway to do something like the following?
this.textures.getFrame(textureKey, framePath).setFilter(1);
It seems texture based (whole image source). so I guess no possible for dedicate frame.