Search the Community

I'm developing a project that uses png indexed sprites with 256-colors palette And I need those sprites to have different palettes, problem is that I couldn't find a way to do that in PIXI. I understand that modern hardware doesnt have a way to access the color palette and simple change it. I know I could do it by javascript, create an array with the sprite original colors and another with the new palette colors, draw the sprite to a canvas and check pixel by pixel, find what index that color belongs to and replace with the corresponding index in the other color array, then import that canvas to PIXI renderer a sprite texture. But that is CPU based and may work with one image once, but seems a bit overkill for many sprites in the screen with animations changing every tick, more than once per second. Each spritesheet can have up to 10 color palettes, so storing 10 versions of spritesheets isn't a good option too. I did a lot of research and read somewhere that I need to use fragment shaders to do that. Problem is that I have about 0 WebGL knowlegde. I think the correct method would be storing the palettes as 256x1 indexed png files, and each coordinate of the image would be a 1x1 pixel of one color, something like represented in the image (I flipped the palettes in the image). Example: Coord 1x1: red Coord 2x1: green Coord 3x1: blue I need to know how I can pass the current sprite and the alternative palette as a parameter to the shader and if it's possible that the shader find out what index the current pixel color correspond in the original palette and then replace by the color in that index of same number on the new palette that was passed as an parameter. If I got it correctly, the shader work in all the pixels of the image at the same time, so the logic would be something like this: Current working pixel coordinates (x,y) are 5x5, color of the current pixel is red, and red color index is 2 (0-255) in the original palette. Based on the that, I need to look up the index 2 of the alternative palette to find out the color it contains, that would be green. And then return it to the renderer.