Efficiently and quickly recoloring sprites?

0 favourites
From the Asset Store
A set of 10 pixel art animated magic effects with icons. 2 Fire, 2 Earth, 2 Wind, 2 Water, Portal, Explosion.
  • I'm prototyping a game where you breed monsters that can come in VAST arrays of colors. I'm trying to determine which method I'd like to use to handle recoloring monster sprites. I have like 80 palettes in mind so you can see why I'd want to use a method as concise as possible.

    The monsters are also going to have many alterable features that need to be recolored, so I'll be processing a boatload of assets. So for example these monsters can have different types of wings, so I'll need to be able to select the correct wing sprite and then apply that monster's palette to it.

    There's two major ways I'm thinking of approaching recoloring sprites:

    A) Recolor sprites in-engine with the ReplaceSolidColor effect. I only just discovered this function and tested it out with a very simple 3 color sprite. I like how that worked but I imagine my events will get very cluttered once I start using sprites with larger palettes. I'm thinking of storing color info in arrays but haven't tested it yet.

    or

    B) Recolor all sprites externally and save as pngs. In one of my earlier prototypes (with very few colors) I stored all of these images in animations and just set the animation with the color I wanted to call. The event sheet for this was simple, basically just a single action to swap out the image. That protoype worked well because I was only testing a couple palettes on a static image. I think it'll be hellish when I start adding animations AND dozens of recolors.

    Has have experience with a project that efficiently handles recolors? I could use some insight on how you handled it. I'm prepared for it to just be a lot of work but any advice on streamlining the process would be appreciated.

    I also want to note that I don't intend on using other effects like AdjustHSL or a solid color overlay. I want to replace colors with precision for quality control.

    Tagged:

  • Make them all gray scale, and color them using the color feature.

  • Make them all gray scale, and color them using the color feature.

    Thank you for your input but as stated,

    I also want to note that I don't intend on using other effects like AdjustHSL or a solid color overlay. I want to replace colors with precision for quality control.

    Yes, it is quick and efficient but the result is not as precise as I need it to be. I guess the title should have said "palette swap" instead of "recoloring," sorry it wasn't specific enough.

    I know a lot of people find threads like these when searching for their own issues, so for the benefit of future readers let me explain why the Color effect doesn't meet my needs.

      All of these use greyscale monster sprites.
    1. Color Effect: I made a yellow square over the greyscale monster and applied the Color effect to the square. If this object moves you'd have to make sure the Color effect square moves with the greyscale object and take other measures to make sure it doesn't recolor other things in the layout.
    2. Replace Color effect: Applied just to the monster. The Source color is the lightest grey color of the monster. The Replace color is the same yellow as the square mentioned above. Tolerance is set to 100. I think this one is the easiest to work with if you don't need highly specific coloring like I do.
    3. Replace Solid Color effect: This effect is used three times to replace each shade of color on the greyscale image with a hand selected shade. If you were using a base image with lots of shades of grey you'd have to go through every single one of them. Unlike the other two, if you need varying hues in your pixel art you can accomplish that. (You can see the shadows are orange, rather than a darker yellow.) If you need to change the colors within event sheets, you're going to have to make multiple events to alter the whole palette.

    If you need a quick and easy recolor, Newt wasn't far off with their answer. However, I want a greater amount of control in how my colors appear, which is why the Color effect (and also the Replace Color effect) don't suit my needs. For anyone who needs a no fuss, super simple recolor, it's still quite useful.

    There's a lot of pieces involved in palette swapping with ReplaceSolidColor especially when I'm going to have a huge number of palettes, so that's why I was wondering if anyone had some insights on efficiently swapping them.

  • You need to write your own shader, to do it correctly. I don't think there is anything simple that can do it currently.

    Sometime ago I wrote myself correct hsl changer - to 100% match google color tool hsl changes. I used it on your yellow image to test it.

    You would need something similar but with rgb etc swap. For precision, it takes a lot of time to calibrate it corretly. So output color is 100% for example 198,165,76 and not few precisions off. So you should look into it if you wanna get it easily done, and not use multiple sprites for overlay etc.

  • How about exporting out the sprite animations into layers,then pinning them together. So body, feathers, wings and misc are each a seperate game object pinned/grouped together on top of one another.

    Then each could have its own color effect.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • You could use a Drawing Canvas for precision recoloring

    Paste the creature into the drawing canvas, then loop through each pixel. Detect the pixel color, draw over it with your desired pixel color

  • Thanks for your suggestions so far everyone.

    Right now I'm trying to use Arrays to store palette colors. I loaded up the hex codes of color palettes I wanted to test.

    Here's how I was attempting to swap out colors:

    Replace00 through Replace05 are each ReplaceSolidColor effects for the 6 colors in my original sprite.

    bar_val is a slider bar that I'm currently using change palettes.

    db_color00 and db_color01 were for debugging help

    ColorHex is my array that has 5 different palettes, each six colors.

    I'm having a hard time getting the Set Effect Parameter events to read the arrays. Looks like events can't read hex codes? I've tried different ways of using rgb() (and its variants) instead but I'm running up against a wall. Replacing FFFFFF with rgbEx255(255,255,255) within the array cell, for example, does not work. Any way I can get events to read color information from an array?

  • Hey, what I suggest you do is color them manually in your pixel art editor and export them as different animations and use the animation's name to set the color, that way it's not just cheap recoloring, you get your palettes in there without a big performance hit

  • example-colorknight.netlify.app

    dropbox.com/s/nlt3iieb2zbf1lf/textScale.c3p

    Storing the rgb#s in an array would work as well, just replace the random().

    (For the problem you're having above, did you try str(array.at(x,y)) , when reading the value?

    Used a random animated sprite, just to make sure the scaling was correct instead of your pasted image.

    *Asset from: o-lobster.itch.io/simple-dungeon-crawler-16x16-pixel-pack

  • I made a crucial discovery. If I convert the hexcodes in my palettes to just decimal format (with this tool) it will correctly read my arrays, problem solved. No need for rgb() stuff.

    FromChris

    It seems like you added the wrong dropbox file? I'd still love to see the project file for the example you showed.

    Thanks for your time!

  • Hey, what I suggest you do is color them manually in your pixel art editor and export them as different animations and use the animation's name to set the color, that way it's not just cheap recoloring, you get your palettes in there without a big performance hit

    I've worked with this method and it does seem to do just fine. My concerns were that I will likely have many actual animations for these monsters and I wasn't looking forward to the complexity of having to manage animations when I have 80 palettes x at least 3 animation sets.

    It's a method I'd recommend to others especially if you're handling fewer palettes, but for my purposes I'm going to try to make my ReplaceSolidColor + arrays method work!

  • Oops! Here's the correct file. It uses layered body parts of the sprite, changing colors still within the engine.

    dropbox.com/s/fptia4doxpl47z8/colorKnight.c3p

  • seekins no no what i mean is, the editor animation is the color. using the set animation in the editor changes the color. Your character animations are driven by frame index with events. This way when you import them, you import all of the character animations in the same editor animation. This way you don't have to import a thousand different animations. I don't think there is any other way to have good performance AND keep your color theory and hue shifting. Just changing a sprite'S HSL does not look good at all.

  • eleanorjmorel

    Would you be able to upload the construct file for the project you screencapped there? I'm unclear on what exactly you're suggesting.

  • Also to follow up on my "Convert hex codes to decimal format because that's the only way I can find to store colors in arrays right now" Technique:

    So when I originally posted that I had succeeded in using arrays, I was only testing greyscale palettes...

    I added several red color palettes to my array using the same method... only for those palettes to turn out BLUE? But unlike in my previous experiments they are at least the correct shades and look correct, if it weren't for the weird hue shift.

    You can see the comparison for my "Pastel" palette. On the left is what it produced, a blue pastel palette. On the right, is what the palette should have looked like.

    And yes, I double checked that the hex codes were converted correctly. I even ran it through different decimal conversion tools to make sure it was consistent.

    At this point I kinda wanna figure this out just to better my understanding of this program. Even if I decide to go with storing them in animations as eleanorjmorel suggests, i'm dying to know why this array palette isn't working as I thought.

    Here's my file

    dropbox.com/s/vxvk6j6al3mux0e/RecolorArrayTest.c3p

    And for clarity on why I'm using saturation and value sliders: It's a monster breeding game, and the hue of the palette isn't the only factor for determining offspring palettes.

    Also don't judge the color palettes themselves lol they were quickly made just for testing purposes. they aren't very attractive right now even if they were the correct hues.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)