Home Artists Posts Import Register

Content

This guide was entirely made in Pico-8! (and then pieced together with Imagemagick)

The cart and the raw source code will soon be available to download for all my patrons (1$+)!

Wanna know even more about palette swapping? Read on!

Pokemon's shiny pokemons are one very elegant example of palette swapping as a content generation tool. In Pokemon games, each pokemon species has its own appearance but each species also has a very rare version of itself, called "shiny" and that version uses the original sprites of the regular species only with a palette swap. I think the "shiny" version is slightly more powerful than the regular one but the main difference really is the palette swap.


A palette swapping shader is actually fairly easy to implement. All you need is a fragment shader that replace specific colors with other colors. Both the colors that need to be replaced and the colors that you want instead should be fed to shader in uniform arrays, or, if you're feeling fancy, in buffers.


About the pixel manipulation implementation! This is mostly an educated guess but I believe that in early Nintendo systems (eg: Gameboy Color and NES) as well as in the SDL framework's 8 bit surfaces, surfaces are actually a map of color indexes, associated with a palette. When actually drawing these surfaces, the system looks up the color for each pixel's color index in the associated palette. In this case, doing a palette swap is as simple as replacing or modifying the associated palette.

In Pico-8, I think the idea is the same except that it works also for drawing lines, circles, etc, not just sprites. It seems each color manipulated in the code is actually an index for a map which itself remaps each color to the color you set it to using the pal() function.


Using palette swaps for procedural generation is great because it lets you create a great graphic diversity at very low memory cost, as you do not have to generate a new set of sprite for every new generated instance. The only time costly step to do this is to choose and set the colors you want for each element and then forbid unwanted color combinaisons. In the GIF from above, each element of the sprite was forbidden to have the same color as any other neighboring element.


The texture animation trick can also be used to simulate lighting by simulating a normal map. Each color of the palette can represent an angle of inclinaison on the surface and then these colors can be colored swapped to the processed lightened colors from the positions of the object and of the light. However, this method can be very expensive on CPU. Prefer actual normal maps amd shaders if they are an option.


A good way to do fade-out's and fade-in's with a restricted palette is to define a map of the colors of the palette and that index them to darker versions of themselves inside the palette. Then when drawing the faded surface, you can look up the darker version of a color and then the darker version of this one and so on, to define the current intensity of the fade.

Note that fades can also be done towards other colors than black and also that this can be used to hide objects on a larger background.


In Pico-8, you can do palette swaps using the pal(cA,cB,[l]) function. After calling this function, cB will always be drawn instead of cA, until you call the function again to set cA to another color or back to cA, or that you call "pal()" which resets all the colors. The l argument is optional and '0' by default. If you set it to one, the palette swap will be done at screen level, meaning all appearances of cA will be replaced by cB on the screen at the end of the frame. 


I hope this is enough for your thirst of knowledge!

There will be more guides and tutorials in the future but if you want to see them sooner than later, you should support me! :)


Take care!

TRASEVOL_DOG

Files

Comments

Anonymous

...Okay, I have to ask. How did you actually make the graphic here?

punkcake

Slowly! The gif is actually six Pico-8 gifs put together. I worked on the six screens individually, keeping the same format and background and making sure all the animations were in sync so as to have a perfect-loop on the final gif. Everything was made with Pico-8. I might have used an external code editor though. I put the gifs together with ImageMagick. All in all it took way more time than I had anticipated!

Anonymous

I don't know if someone pointed it out to you on twitter or elsewhere : yes indeed that's how NES/DMG/GBC do their pixel color manipulation. They all have 4 possible colors in one palette (or gray shades for the DMG). On the DMG (original gameboy) you got one palette for the background and two for the sprites. On the GBColor it's actually RGB values that you can map to 8 possible palettes for background and 8 for sprites. I never worked with the NES and i don't have documentation around, but i know you got 64 fixed colors. It's really funny to work with old videogame systems if you don't mind ASM or C :)

punkcake

Oh awesome!! Thank you for the confirmation and all the extra info! :D