Level/Scene Transition System ‣ 📖02 ‣ 📼05 ‣ Metroidvania Forge Godot 4 Tutorial Series

In today's video, we're going to build a

nice scene transition system

along with this nice fade wipe kind of

animation. And it's all going to be

handled in one big chunky video.

Hi, my name is Michael. [music]

Join me as we build an epic Metroid

Vania game in GDO4 using GDScript.

[music]

This is the Metroid Vania Forge.

So, we've got a series of levels and we

need a way to transition between them.

So, we'll build this nice level

transition scene. This level transition

scene consists of an area 2D with a

collision shape. It's going to be

configured so that it's on a layer mask

that looks for collision just with our

player. And it's going to do things like

allow us to change the size. So here

when we set the size or the location of

this transition, it's going to update

the rendering of this level transition

in the editor. So we can see what it's

going to look like. So left, right, top

or bottom, as well as the size here,

right? So we can use this to adjust just

how big it is. So if we have those big

entrances like we've got here, we can

configure that as well. Now the script

also is going to handle when the player

enters. So we'll connect to that. But

we're you can see here I've got a nice

scene manager that we're going to

introduce a global script to our project

that's going to allow us to have signals

that dictate when things should happen

to kind of keep and help us avoid a lot

of the bugs that could arise from doing

a system like this. And then this scene

manager, whenever our player enters one

of these scenes, it's going to send this

information, you know, the direction it

is, what level they need to load next,

and which level transition they're going

to spawn at. We'll send that over to a

global script that we'll call our scene

manager. And then this sucker is going

to orchestrate the whole thing. It's

going to come in here, fire off some

signals. We're going to do things like

fade screen using a tween and a

synchronous function. And then we'll use

the get tree change scene to file to

load a new scene. And all of this is

going to kind of happen within here. And

then of course these level transitions

are going to have to hook back to that.

They'll respond to signals like when our

load scene is finished or when the new

scene is ready. Then let's go ahead and

do things like position the player or

set up this area to monitor for the

player. And we're going to build in

stuff like these physics awaits to make

sure that we don't get weird overlap as

the player transitions between scenes.

And uh it's going to be kind of handy.

So if you want to learn how this all

comes together, then stick around for

the rest of the video. Okay. So at this

point, we're going to go ahead and jump

into making this level transition. Now,

before I do, real quick, if you've been

following along, then you've already

grabbed the icons that I've got stored

here in my general icons folder. So, you

can see I've got one for my level

transition. We're going to be using that

today. So, if you want that, I mean,

it's not required. You don't have to

have it, but obviously if you do and you

haven't been following along, then you

can hop over to the H.IO page linked in

the description and grab the chapter 2

asset pack, and that'll be in that zip

file. Okay. So, what we need to do

obviously is we need to have a way like

with our player here, we need him to be

able to transition. And I've set up some

extra levels here. So, I've got level

one. This is the scene and the level

that we've been working on um up to this

point with this series. And I've gone

ahead and made a level two, which is

pretty simple right now. And it's got a

little area that drops down here. I've

got a platform so that you can kind of,

you know, fall and land on it. You have

to drop down through it. And then I've

got a dungeon scene, level three, which

would be below level two. And so, I've

kind of lined up these areas so that

they kind of will match up. And you can

see what I'm going for there, right?

We've got it. Same width on these, which

is kind of important, I think, for

especially for a vertical transition,

you need to make sure they're about the

same size. If this one were like really

big over here and you jumped up, then

it's like, what do you do? Do you appear

in the ground, you know? So, just think

through those things. And just to

review, this is kind of the map. So, you

can see I've I've built this level and

this level and this level here. So, just

kind of this little section, and I'm

building the connections as I've mapped

them out. So, you've probably done

something similar or maybe you've

already kind of started building a whole

bunch of levels. Obviously, before we

connect them, it's kind of hard to work

with them. Now, one other thing that I'm

going to say about this and and this is

something that we're going to deal with

later on in this chapter. Uh right now,

we only have a player in our level one.

So, you could have a player in each of

these, and if you run that scene, then

you'll have a player in there. Once we

get to the point where we're really

working with these levels, we're going

to build a player spawn scene. And so

you can see I've got an icon already for

that in that asset pack. But that's

going to kind of alleviate that issue.

For now, we're just going to simply have

to start in our scene one here. And if I

go ahead and run my game, this is the

only scene that has a player. So if I

don't start here, it'll just be an empty

map.

But yeah, obviously I just fall to my

death or just into the the void of gray

where he falls forever. Okay. So, what

I'm going to do before we get started

with making this thing is I'm just going

to drag my player

over here to the side because as we're

iterating and testing, I want them to be

close to the point where I'm going to be

able to test. Okay. So, now when I run

my scene, I'm going to have my player at

the far right edge of this map so that

we're ready to just jump through to the

next. Okay. So, if you don't have levels

and everything set up, then make sure

that you do get at least two. Obviously,

I've got scene one and scene two here

are transitioning from the left and

right respectively. And then from two to

three, you know, two, we're going down

to the top of three and and up. Okay?

And that's going to be important because

we're going to make sure that our level

transition works with those four

different directions. So having at least

those two types of transitions is good.

Okay? For our level transition, I'm

going to make a new scene, and we're

going to use this scene, and we're just

going to have to drop it into our levels

where we want it. We could get away with

making this just like our level bounds

that we've made where it's just kind of

a new node type right here. In fact,

that would be an awesome exercise for

you to do. But for sake of simplicity

for newcomers, we're just going to make

it a scene because then we have a little

bit of control and we can see what's

happening a little bit better as opposed

to needing to do a lot of object

instantiation through code. But it

wouldn't be too difficult to do that. So

I think that's a fun challenge when we

get done with this if you want to make

it a reusable node. So the difference

being is obviously like this level

bounds that we've created in the past.

Um we can just add here from our create

new node. Okay? Because it's just like a

new node type that extends from node 2D.

Whereas a scene you would add with shift

control A and we've got scenes like our

player and you can see our levels are in

here as well. Right? So this level

transition is going to be a scene just