Vec4 color = texture2D(uSampler, vTextureCoord) This method will allow me to upload directly to the shader the original sprite + the 512x512 palettes and swap the colors accordingly. Then:Īfter proccessing the 256 colors with this method, I now have a map with the coordinates of where each color needs to be painted for those set of sprites, I can now have 100 distinct palettes, as long as the colors are painted on those exact coordinates. My solution was to get the blue value, divide it by two, round it up (ceil) and sum it to the previous obtained X & Y coordinates. Then there's the problem of repeated colors when a color Red and Green channels are the same, since I have 3 values for rgb and only 2 for X and Y. The color (255, 120, 10) would be painted on the coordinates X: 255 Y: 120 of the 512x512 palette. The idea is to create a 512x512 png and paint 1x1 pixels of the colors based on their rgb values. I would analyse the sprite main palette (which is the same in all sprites), then create a formula to generate coordinates based on the rgb values of those colors. I'll leave a small tutorial here detailing my method, maybe it can help someone else and maybe you guys can give me hints to improve it. Thank you guys sooooo much! You're awesome! I finally did it! After xerver's second reply, I tried to come up with a way to create a texture map, but my method wasn't quite working properly, but after setting the mipmap to false on the palette texture, it worked like a charm! I've tried following examples from that link and messing a lot with the code, but no real success. I have no idea how to check for the correct indexes. It's retrieving colors from the palette, as can be seen by the purple tones at the hair area, but absolutely out of order. I've attached some images from my tests, the test sprite, the palette to be applied and the result of the above code. Var palette = new ('Content/Palettes/10.png') 'vec4 indexedColor = texture2D(Palette, color.xy) ' + 'vec4 color = texture2D(uSampler, vTextureCoord) ' + I managed to send the palette as an uniform sampler2d to my shader, but I'm getting mostly black lines now. Thanks, I did find that link in my research before, but managed to go futher looking at it again. 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:Ĭurrent 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.īased 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. 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. 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). Problem is that I have about 0 WebGL knowlegde. I did a lot of research and read somewhere that I need to use fragment shaders to do that. 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.īut 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.Įach spritesheet can have up to 10 color palettes, so storing 10 versions of spritesheets isn't a good option too. I understand that modern hardware doesnt have a way to access the color palette and simple change it. I'm developing a project that uses png indexed sprites with 256-colors paletteĪnd I need those sprites to have different palettes, problem is that I couldn't find a way to do that in PIXI.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |