[SDL] Palette and fading effect

Pix3l

Hello everyone!

I was playing around with SDL and palette, trying to achieve a fading effect like those one in nes games (like this)
{fade effect}

I've found some posts around with some suggestion on how to achieve this effect, from various forums, but I didn't get much out of it...

As per my understanding, a palette is simply a list of colors, in a specific order maybe, and the video memory refers to them for drawing the correct one.

Fading effects seems to be achieved by simply shifting these colors positions, forward or backwards (in this case by 16 positions), so the drawing "exchange" its drawing color with the referenced one in the list, if I'm not miserunderstaing...

According to this, I wrote a simple progam to test a NES palette color set (referenced from here), with fading in and out the colors.
I draw the first 16 colors the palette as reference (or a nes screenshot in case), to see if they're going more darker or lighter, but doesn't work well as expected...

#include <SDL/SDL.h>

#define PALETTE_SIZE 64
#define ROW_SIZE 16

#ifndef MIN
#define MIN(a, b) ((a) < (b) ? (a) : (b))
#endif
#ifndef MAX
#define MAX(a, b) ((a) > (b) ? (a) : (b))
#endif

SDL_Surface *image;

//Default palette
static SDL_Color nes_palette[PALETTE_SIZE] = {
    {124,124,124}, {0,0,252}, {0,0,188}, {68,40,188}, {148,0,132}, {168,0,32}, {168,16,0}, {136,20,0},
    {80,48,0}, {0,120,0}, {0,104,0}, {0,88,0}, {0,64,88}, {0,0,0}, {0,0,0}, {0,0,0},
    {188,188,188}, {0,120,248}, {0,88,248}, {104,68,252}, {216,0,204}, {228,0,88}, {248,56,0}, {228,92,16},
    {172,124,0}, {0,184,0}, {0,168,0}, {0,168,68}, {0,136,136}, {0,0,0}, {0,0,0}, {0,0,0},
    {248,248,248}, {60,188,252}, {104,136,252}, {152,120,248}, {248,120,248}, {248,88,152}, {248,120,88}, {252,160,68},
    {248,184,0}, {184,248,24}, {88,216,84}, {88,248,152}, {0,232,216}, {120,120,120}, {0,0,0}, {0,0,0},
    {252,252,252}, {164,228,252}, {184,184,248}, {216,184,248}, {248,184,248}, {248,164,192}, {240,208,176}, {252,224,168},
    {248,216,120}, {216,248,120}, {184,248,184}, {184,248,216}, {0,252,252}, {248,216,248}, {0,0,0}, {0,0,0}
};

SDL_Color cmap[256];

void fadeIn(SDL_Surface *surface)
{
    /* Questa palette conterrà i colori di default invertiti */
    SDL_Color colors[PALETTE_SIZE];
    memset(colors, 0, PALETTE_SIZE);

    int fade = 2;

    while (fade >= 0)
    {
        for (int i = 0; i < 32; i++)
        {
            // Check if we are within the bounds of the palette
            colors[i] = nes_palette[MAX((fade*16)-16+i, 0)]; // Add colors from the end towards the beginning
        }

        // Update the surface with the new palette
        SDL_SetPalette(surface, SDL_PHYSPAL, colors, 0, 16);
        SDL_UpdateRect(surface, 0, 0, 0, 0); // Update the entire surface
        SDL_Delay(500); // Limit frame rate

        fade--;
    }
}

void fadeOut(SDL_Surface *surface)
{
    /* Fade using direct palette manipulation (best) */
    SDL_Color colors[PALETTE_SIZE];
    memcpy(&colors, nes_palette, PALETTE_SIZE * sizeof(SDL_Color));

    int i = 0;
    int fadingOut = 0;
    while(fadingOut<3)
    {
        for(i = 0; i < 32; i++)
        {
            colors[i] = nes_palette[MIN(i+16, PALETTE_SIZE)];
        }

        SDL_SetPalette(surface, SDL_PHYSPAL, colors, 0, 16);
        SDL_UpdateRect(surface, 0, 0, 0, 0); // Update the entire surface

        SDL_Delay(500); // Limit frame rate
        fadingOut++;
    }
}

void drawBackground(SDL_Surface *surface)
{
    SDL_Color *colors = nes_palette;
    
    int i=0;
    for(i=0; i<16; i++)
    {
        Uint32 color = SDL_MapRGB(surface->format, 
            (Uint8)(colors[i].r), 
            (Uint8)(colors[i].g), 
            (Uint8)(colors[i].b));
        
        SDL_Rect rect = { i * (surface->w / ROW_SIZE), 0, surface->w / ROW_SIZE, surface->h };
        SDL_FillRect(surface, &rect, color);
    }

    SDL_UpdateRect(surface, 0, 0, 0, 0); // Update the entire surface
}

int main(int argc, char *argv[])
{
    SDL_Init(SDL_INIT_VIDEO);
    SDL_Surface *screen = SDL_SetVideoMode(640, 480, 8, SDL_SWSURFACE);

    image = SDL_LoadBMP("ninja-gaiden.bmp");

    /*
     * Set black colors
     */
    memset(cmap, 0, sizeof(cmap));

    /*
     * https://www.libsdl.org/release/SDL-1.2.15/docs/html/sdlsetpalette.html
     */
    SDL_SetPalette(screen, SDL_PHYSPAL, cmap, 0, 256);
    SDL_SetPalette(screen, SDL_PHYSPAL|SDL_LOGPAL, nes_palette, 0, PALETTE_SIZE);
    
    /*
     * Copy the colors in the logical palette
     */
    memcpy(cmap, screen->format->palette->colors, PALETTE_SIZE * sizeof(SDL_Color));

    //~ drawBackground(screen);
    SDL_BlitSurface(image, NULL, screen, NULL);
    SDL_UpdateRect(screen, 0, 0, 0, 0); // Update the entire surface
    
    //~ SDL_Delay(1000);
    //~ fadeOut(screen);

    SDL_Delay(1000); // Limit frame rate

    fadeIn(screen);
    //~ drawBackground(screen);
    
    // Use the first row for the fade effect
    //~ fadeEffect(screen, 0, 2000); // 2000 ms for fade duration

    SDL_Delay(2000); // Wait before quitting
    SDL_Quit();
    return 0;
}

The sample screenshot

Since I can't find so much exhaustive informations or examples on how to works with palette, is there any tutorial or else about?
Does anyone have any suggestion or experience with palette that want to share?

ffaf

Hey @Pix3l , great work!

I suspect palette shifting works only if you are using a specific colour set on screen. I.e. your first screenshot has livid, night-time colours, while the second one has a bright blue, yellows, whites etc.

What I am sure of is that palette shifting was done also for efficiency reasons. Since in 2025 this is a problem no more, you could specify some kind of array for each colour-fade (i.e. white becomes gray, then dark brown, then black) and similar.

Let us know how this progresses!

Pix3l

Hello ffaf & Modanung !

Yes I know that there are "modern" solutions, that involves textures and other graphical contexts, but at last, they all ending up in manipulating pixels a the most bottom level abstracting all of these aspects :)

I try to achieve this effect in the most simple low-level solution I can, keeping an eye on portability over other systems/contexts (like retro consoles).

Modern tequiniques involves the manipulation of each RGB values, by substracting/adding a specific value every cycle, achieving a fade effect like this:

    // Clamp alpha to the range [0, 255]
    if (alpha < 0) alpha = 0;
    if (alpha > 255) alpha = 255;

    // Update the palette colors based on the fade alpha
    SDL_Palette *palette = surface->format->palette;
    for (int i = 0; i < palette->ncolors; i++) {
        SDL_Color color = nes_palette[i];
        // Calculate the faded color
        palette->colors[i].r = (color.r * alpha) / 255;
        palette->colors[i].g = (color.g * alpha) / 255;
        palette->colors[i].b = (color.b * alpha) / 255;
    }

A NES color palette (as below) is generated through YPbPr algorithm, so the previous technique involving RGB will not generate the correct shades for each colors.

The most simple for me, is to have a pre calculated colors list and switch their position in the array, like a lot of people around various forum describes the NES originally do.

The main problem for me now is to understand better how palette really works under SDL and Linux, since there's not a lot of information or examples about around the web...

I will keep this thread updated whenever I will figure out something
Thanks everyone for your reply!

Modanung

Maybe a more "modern" - straightforward - way to achieve this effect would be using LUTs. That is using the RGB values of the original colour as 3D coordinates for reading a texture containing the desired colours at those coordinates. The standard approach would be a little wasteful when working with palettes, but it should work.

Modanung

Pix3l Then I guess you'd want your images to be indexed. In GIMP you can change an image's mode to indexed under Image -> Mode.

Pix3l

Modanung Yes, something like this, an 8-bit indexed surface

Pix3l

Just a small update on the matter.
With the help of an SDL contributor (@Guldoman), I updated the code with some minor changes:

//gcc palette.c -o palette -lSDL

#include <SDL/SDL.h>

#define WIDTH 320
#define HEIGHT 200
#define PALETTE_SIZE 64
#define COLOR_ROWS 16

//Default palette
static SDL_Color nes_palette[PALETTE_SIZE] = {
    //3
    {124,124,124}, {0,0,252}, {0,0,188}, {68,40,188}, {148,0,132}, {168,0,32}, {168,16,0}, {136,20,0},
    {80,48,0}, {0,120,0}, {0,104,0}, {0,88,0}, {0,64,88}, {0,0,0}, {0,0,0}, {0,0,0},
    //2
    {188,188,188}, {0,120,248}, {0,88,248}, {104,68,252}, {216,0,204}, {228,0,88}, {248,56,0}, {228,92,16},
    {172,124,0}, {0,184,0}, {0,168,0}, {0,168,68}, {0,136,136}, {0,0,0}, {0,0,0}, {0,0,0},
    //1
    {248,248,248}, {60,188,252}, {104,136,252}, {152,120,248}, {248,120,248}, {248,88,152}, {248,120,88}, {252,160,68},
    {248,184,0}, {184,248,24}, {88,216,84}, {88,248,152}, {0,232,216}, {120,120,120}, {0,0,0}, {0,0,0},
    //0
    {252,252,252}, {164,228,252}, {184,184,248}, {216,184,248}, {248,184,248}, {248,164,192}, {240,208,176}, {252,224,168},
    {248,216,120}, {216,248,120}, {184,248,184}, {184,248,216}, {0,252,252}, {248,216,248}, {0,0,0}, {0,0,0}
};

// Smile pixel representation
int smile[16][16] = {
    {0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0},
    {0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0},
    {0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0},
    {0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0},
    {1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1},
    {1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1},
    {1,1,0,0,1,1,0,0,0,0,1,1,0,0,1,1},
    {1,1,0,1,1,1,0,0,0,0,1,1,0,0,1,1},
    {1,1,0,0,1,1,0,0,0,0,1,1,0,0,1,1},
    {1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1},
    {1,1,0,0,1,1,1,1,1,1,1,1,0,0,1,1},
    {1,1,0,0,0,1,1,1,1,1,1,0,0,1,1,0},
    {0,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0},
    {0,0,1,1,1,0,0,0,0,0,0,1,1,1,0,0},
    {0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0},
    {0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0},
};

void fade(SDL_Surface *surface)
{
    int row = 0;
    for (int i = PALETTE_SIZE - COLOR_ROWS; i >= 0; i -= COLOR_ROWS) 
    {
        // Ensure we are only setting up to 16 colors at a time
        SDL_SetPalette(surface, SDL_LOGPAL, &nes_palette[i], 0, COLOR_ROWS);
        
        for(int k=0; k<COLOR_ROWS; k++)
        {
            printf("%d %d %d\n", surface->format->palette->colors[i+k].r, surface->format->palette->colors[i+k].g, surface->format->palette->colors[i+k].b);
        }

        SDL_Flip(surface); // Update the screen
        SDL_Delay(1000); // Delay to control the speed of the shade effect
    }
    
    // Finally, set to all black
    SDL_Color black_palette[COLOR_ROWS];
    memset(black_palette, 0, sizeof(SDL_Color) * COLOR_ROWS);
    SDL_SetPalette(surface, SDL_LOGPAL, black_palette, 0, COLOR_ROWS);
    SDL_Flip(surface);
    SDL_Delay(200); // Final delay before exiting
}

int main(int argc, char *argv[])
{
    SDL_Init(SDL_INIT_VIDEO);
    SDL_Surface *screen = SDL_SetVideoMode(WIDTH, HEIGHT, 8, SDL_SWSURFACE);

    // Set initial palette to palette 3
    SDL_SetPalette(screen, SDL_LOGPAL, &nes_palette[PALETTE_SIZE-COLOR_ROWS], 0, COLOR_ROWS);
    
    // Draw the background
    //~ SDL_FillRect(screen, NULL, 4); // Index 4 is our "background" in *each* palette
    SDL_FillRect(screen, NULL, (int)SDL_MapRGB(screen->format, 248,184,248));

    Uint8 *pixels = (Uint8 *) screen->pixels;
    int smile_x = (WIDTH - 16) / 2;
    int smile_y = (HEIGHT - 16) / 2;

    //~ SDL_Surface *image = SDL_LoadBMP("ninja-gaiden.bmp");
    //~ SDL_BlitSurface(image, NULL, screen, NULL);
    
    for (int y = 0; y < 16; y++) {
        for (int x = 0; x < 16; x++) {
            if (smile[y][x] == 1) {
                // Set smile pixel color to yellow
                pixels[(smile_y + y) * WIDTH + (smile_x + x)] = 9; // Index 9 is our "foreground" color in each palette
            }
        }
    }
    
    SDL_Flip(screen);
    SDL_Delay(1000);

    fade(screen);

    SDL_Delay(2000); // Wait before quitting
    SDL_Quit();
    return 0;
}

Essentially, the main changes is in the use of SDL_SetPalette.
According to the documentation, the third parameter expects a pointer to a color list, followed by the fist color index and the number of colors to follow.
I intended the "firstcolor" argument as the color position index inside the colors list (nes_palette), but seems more to be a further color indexing procedure.

So, switching the arguments as follow, has do the trick:

SDL_SetPalette(screen, SDL_LOGPAL, &nes_palette[PALETTE_SIZE-COLOR_ROWS], 0, COLOR_ROWS);

And updated the fade cycle as well

    for (int i = PALETTE_SIZE - COLOR_ROWS; i >= 0; i -= COLOR_ROWS) 
    {
        // Ensure we are only setting up to 16 colors at a time
        SDL_SetPalette(surface, SDL_LOGPAL, &nes_palette[i], 0, COLOR_ROWS);
        
        for(int k=0; k<COLOR_ROWS; k++)
        {
            printf("%d %d %d\n", surface->format->palette->colors[i+k].r, surface->format->palette->colors[i+k].g, surface->format->palette->colors[i+k].b);
        }

        SDL_Flip(surface); // Update the screen
        SDL_Delay(1000); // Delay to control the speed of the shade effect
    }

Pointing to the first color we want to use from the array, and sets the firstcolor parameter to 0, along with the number of colors available after, seems to works right.

{fadein}

I also found this interesting project, with a set of cool palette effects, that seems to use a similar approach to mine
amroibrahim/PaletteCycling