Simple Fade In and Fade Out Transition Objects

Adding a little fade transition when you enter or exit a room can add a lot to the visual polish of your game. Here are two simple objects that will fade the screen in or out to whichever color you choose. Just drop the FadeIn object in a room and upon entering the screen will fade in from black. You can create an instance of FadeOut when exiting the room to have it fade out.

The final result looks like this:

FadeIn object – Create event

/// @description Init Transition

delta = 0;
duration = room_speed * 3;
delay = room_speed;
delayDelta = 0;

alpha = 1;
fadeColor = c_black;

First we set some variables. Duration is how long the fade lasts, and delay is how long before it starts to fade. You can change fadeColor to any color. Alpha sets the starting alpha value.

FadeIn object – Step event

/// @description Handle Fade


if(delayDelta < delay){ //wait for delay to end
    delayDelta++;
} else if(delta < duration) { //calculate alpha based on duration
    delta++;
    alpha = 1 - (((delta / duration) / 1) * 1);
    show_debug_message(alpha);
} else {
    //end of transition event goes here	
    instance_destroy(id);
    instance_create_depth(0, 0, 0, Transition_FadeOut);
}

To start with, we count up to the delay every step. Once we’re past the delay, we start the actual fade. Once the fade has finished, we trigger some other event. In this case, I’m destroying the FadeIn object and spawning a FadeOut object (as seen in the gif).

FadeIn object – Draw GUI event

/// @description Draw Transition

draw_sprite_stretched_ext(spr_square, 0, 0, 0, display_get_gui_width(), display_get_gui_height(), fadeColor, alpha);

Pretty straightforward. In this case, we have 4px by 4px white square sprite that is stretched over the entire GUI layer and blended with the chosen fadeColor. Stretching a sprite is actually computationally faster than using draw_rectangle();

That’s it for the FadeIn object. Placing this in a room will cause the screen to start out solid Black and fade in over 3 seconds.

FadeOut object – Create event

/// @description Init Transition

delta = 0;
duration = room_speed * 3;
delay = room_speed;
delayDelta = 0;

alpha = 0;
fadeColor = c_black;

Same deal as before, only we start the alpha at 0 instead of 1; The delay is also used at the end of the transition instead of the beginning.

FadeOut object – Step event

/// @description Handle Fade

if(delta < duration) { //calculate alpha based on duration
    delta++;
    alpha = (((delta / duration) / 1) * 1);
} else if(delayDelta < delay){ //wait for delay to end
    delayDelta++;
} else {
    //end of transition event goes here	
    room_goto_next();
}

Again, nearly identical to FadeIn. The biggest difference is that we switched the delta and delay IF statements so that delay is processed after the fade out has finished.

FadeIn object – Draw GUI event

/// @description Draw Transition

draw_sprite_stretched_ext(spr_square, 0, 0, 0, display_get_gui_width(), display_get_gui_height(), fadeColor, alpha);

Identical to FadeIn’s Draw GUI event.

Leave a Reply

Your email address will not be published. Required fields are marked *