Blending between rooms using a fade to black effect

Changing between rooms needs to be smooth. The default behavior just changes it within one frame. I dislike that, so we gonna make ourselves a nice effect.

Creating the effect

This is fairly straight forward, but you DO need the Standard Edition or higher for it. So please be aware of that.

Create a new object, call it effFadeToBlack. I use a lot of objects as effects, so name them like this. It is basically a "spawn and forget effect". Comes in very handy and works with a lot of things due to the awesome modular approach of Game Maker.
Change the depth of the object to -50000 and do not assign a sprite. This will make sure it is on top of everything else.

Create a "Create Event".
Add 3 "Create Variable Actions", call the variables "fadeSpeed", "fadeAlpha" and "newRoom". Set "fadeSpeed" to 10, leave "fadeAlpha" and "newRoom" at zero. The lower the value for "fadeSpeed", the faster the fade and room change will happen.
Add a "Set Alarm Action" for Alarm 0 and set it to fadeSpeed.


Create "Alarm 0 Event".
Create a script and add this code:

alarm[0] = fadeSpeed;
fadeAlpha += 0.05;
if ( fadeAlpha >= 1.0 )
{
    room_goto(newRoom);
    instance_destroy();
}

(Please note that the guide will probably swallow the 0 in between the brackets after alarm. Please add it)

This code does nothing but increase and check the value of fadeAlpha, which we created above. If it reaches 1.0 or higher, it is gonna change the room to the one we desire (more to that later) and then destroy itself. This will prevent it from further drawing and also we do not need to think about it anymore. Fire and forget.

Now add a "Draw GUI Event" and add this code:

draw_set_alpha(fadeAlpha);
draw_rectangle_color( 0,0, room_width, room_height, c_black, c_black, c_black, c_black, false);
draw_set_alpha(1.0);

This renders a quad over the whole screen, using the value from above as alpha value. Alpha determines how visible any object is. 0 is invisible and 1 is fully visible. By increasing the value periodically (in the code of alarm 0) we get this nice fade to black effect.

If you change the amount of increase of fadeAlpha, you can further speed it up or slow it down.
And instead of black, you can of course also use white or any other color you like.

This effect is reusable in any game and since we use constants provided by the engine, we never need to worry about it again.

Using the effect

Using this effect is quite simple. Whenever you want to invoke a room change, add this code:

var eff;

eff = instance_create( 0, 0, effFadeToBlack );
eff.newRoom = myRoom;

Where you place the effect does not matter, it renders over the whole room, regardless of size. If you use views, you might wanna change the constants room_width and room_height used in the drawing code to view_wport and view_hport.
You also will have to replace myRoom to whatever your actual room name is you want to transit to.

[Brigapes]

@presto121

You sure you added code in collision event? For invisibility, you're using sprite or no sprite, because hit detection can't work if you're not using a sprite. As an alternative, you can use range to detect players proximity

[qutiepai]

HI there! I've been having a problem with your guide. My character has to go through a door, and there is an invisible object there, which supposedly needs to trigger the effFadetoBlack clause when my character object collides with it. But it's just ignored. My character walks right through it, and nothing happens! Is there something you can suggest?

[Scorcher24]

@heartnewts You don't need the "room_goto", because the effect does it for you, after it ended. If you do it like you did, the effect will never play because rooms are changed before it starts.

[BCS]

Hi there I tried it out like this: http://prntscr.com/da9xst but nothing happens, help please?

[Brigapes]

By the way, if it helps anyone, for me, the object didn't cover the whole room, so i needed to put -1 on X axis.

[Scorcher24]

@Brigapes* Glad it helped you

[Brigapes]

First off, thank you so much dude! You saved me a lot of time!

[Scorcher24]

@Kidagine You place it wherever you change to a new room. For example in a click event or wherever it suits you, really. It invokes the effect and then changes to the room specified.

[Kiddo]

I don't understand where this code
var eff;

eff = instance_create( 0, 0, effFadeToBlack );
eff.newRoom = myRoom;
is supposed to be placed in, in the object we made?In a new object, in the creation code of the room?Which one?Sorry I am sounding stupid, I just keep getting errors wherever I place it

[Scorcher24]

@Venom The easiest method is to make the player persistent. That means that he exists between levels. So you need to make sure he does not show up or can moved in the main menu. When you changed the room, just place him in that new room where you want him to shop up. There are other ways too, but that all boils down to your type of game, the inner workings etc.