SGDK. Fade-in and Fade-out transitions.


In this tutorial, we will create a beautiful Fade-in and Fade-out transition in SGDK.

The transition itself looks amazing.

First, download the picture from MEGA.

And import it as a resource, called img. About the import of images, I spoke in the SGDK lesson. Create an image.

Before we write the code, let’s talk about CRAM.

What is CRAM.

  • CRAM is a memory capable of storing 4 palettes of 16 colors, so total is 64 colors. In practice, less is available, because 1 color from each palette set to transparency.
  • Each element of the palette takes 2 bytes, where, 9 bits are allocated for color.
  • This means, in one palette, you only can use 16 colors, from 512 color palette. (2^9 = 512)

More about CRAM

Write the code.

Rewrite this code to your main.c

#include <genesis.h>
#include "resources.h"

int main()
    u16 palette_full [64] ;
    memcpy(&palette_full [0] , img.palette->data, 16 * 2);
    PAL_setPaletteColors(0,palette_black, DMA);
VDP_drawImage(BG_A, &img, 0, 0);
PAL_fadeIn(0, 63, palette_full, 100, FALSE);
    PAL_fadeOut(0, 63, 100, FALSE);
    return (0);

Let’s break it down.

u16 palette_full [64] ;

First, create an array in which we will store all the palettes. The type is u16, 16-bit or 2-byte number, exactly as much you need for 1 element of the palette. The number of elements is 64,this is enough to fit all 4 palettes.

memcpy(&palette_full [0] , img.palette->data, 16 * 2);

Memcpy function – copies a block of data from one variable to another. Its syntax is as follows.

memcpy(where_copy, where_copy, how many_copied_in_bytes);

So here.

memcpy(&palette_full [0] , img.palette->data, 16 * 2);

We copied the img.pallette->data palette to the palette_full array. The palette consists of 16elements, 1 element takes 2 bytes, so move 16 * 2 bytes.

We copied this palette to restore it later, because in the next line, we will rewrite the palette, and make it black.

PAL_setPaletteColors(0,palette_black, DMA);

PAL_setPalleteColors is a function that writes the palette to CRAM. Its syntax is as follows.

PAL_setPaletteColors (index, palette, transfer_method);
  • Index – the number of the element from which the palette is recorded (number from 0 to 63)
  • The palette is the palette itself.

pallete_black is a palette consisting of black colors. It is loaded from pal.h which is inside genesis.h.

Preparations are over. Now, let’s make the Fade-in transition.

PAL_fadeIn(0, 63, palette_full, 100, FALSE);

The syntax for the function PAL_fadeIn is as follows.

PAL_fadeIn(start_color, end_color, palette, transition_time_in_frames, execute_asynchronously);
  • initial_color – sets the index of the initial color (number from 0 to 63)
  • finite_color – sets the index of the final color (number from 0 to 63)
  • a palette is the palette to which the transition is made.
  • frame_transition_time – specifies how many frames the transition will last.
  • execute_asynchronously – if FALSE,the program will not execute the following commands until the transition is complete, otherwise it will.

Thus, for 100 frames, the image will move from the black palette (pallete_balck), to the image palette (pallete_full).


Wait 3000 ms or 3 seconds.

PAL_fadeOut(0, 63, 100, FALSE);

And make screen black, by using the PAL_fadeOut function, which has the following syntax.

PAL_fadeOut(start_color, end_color, transition_time_in_frames, execute_asynchronously);

Now, compile and run, should get the following.

Final result.

In the GIF, the animation is looping. You won’t have that.