About This Tutorial
ACTION GAME MAKER has two features for connecting multiple scenes together: “scene transitions” and “portals”.
In this tutorial we learn “how to change scenes” in two parts:
Part 1: Make a title screen and connect it with a scene transition
Part 2: Make Stage 2 and connect it with a portal
Part 1: Make a Title Screen and Connect It with a Scene Transition
Part 1-1: Making the Title Screen
Let’s make a title screen in the simplest form: press the A button on the title screen and the stage begins.
-
First, let’s make the title screen. A title screen is a kind of map, so we build it from a map.
On the far left of the “Map view”, press the “+ Create New” button in the map list dock.
-
Leave the Type as Map. Enter “Title” as the name and press “Add”.
-
The map screen is created. A title screen does not need to scroll, so we build it on the “UI” layer. Let’s put a background on the “UI” layer. First, select “UI” in the map layers.
-
Switch the tab at the top of the list dock on the far left to “Image”. This lists the images currently available in the project.
-
Let’s use the blue-sky background image we used for Stage 1. Drag “B_001_plain_03” and drop it onto the screen.
-
If it loaded properly as a child of the UI layer, you are good. If B001Plain… ended up somewhere else, fix it so it matches the image below.
-
The blue-sky background is too narrow, so let’s adjust it. The UI layer’s display area is the blue rectangle at the lower right of the origin where the red and green lines cross. Let’s stretch the blue sky so it covers that rectangle. Drag the handles to scale it — holding Shift while dragging a handle keeps the aspect ratio, which is handy.
-
Next, let’s make the title text. Press the + on the UI layer and add a Label.
-
In the Inspector’s text field, enter
“Jump Action
Press A to Start”
and create a new “LabelSettings” under Label Settings.
-
Open LabelSettings and set Font > Size to about 80 px.
-
Title text looks better centered, so set Horizontal Alignment, just below Label Settings, to “Center”.
-
Finally, let’s move the label to the center of the screen. You could move it in the preview, but a Label can be centered using an anchor. Scroll the Inspector down a little and change the Anchors Preset under Control > Layout to “Center”. The anchor (the green diagonal cross icon) moves to the center of the screen, and the label should be placed in the center of the preview.
-
Just to be safe, press “Run Current Scene (F6)” in the menu in the upper right and check that it displays. This is a test play feature that ignores scene transitions and tests only this scene. If the blue sky and the title text appear, you are good. If not, check that the image really is a child of the UI layer and that it is placed inside the blue frame.
Part 1-2: Let’s Connect a Scene Transition!
In ACTION GAME MAKER you build scene transitions in the “Transitions” view by connecting scenes with links, just like a visual script.
-
Switch to the “Transitions” view. A screen like a visual script appears, with only GameScene1 placed in the middle.
-
From the map list on the far left, drag and drop “Title” to roughly the left of GameScene1.
-
First, let’s change the start scene to Title. As things stand, the game would start from GameScene1. Right-click “Title” and choose “Set Start Scene”.
-
Check that Title has become brighter and that the start scene icon is displayed on it.
-
Next, connect a link from Title to GameScene1. Just as in a visual script, add a link from the right-click menu and connect them.
-
Now let’s decide the transition condition. In the Inspector on the right, check switching conditions > “Trigger On Input”, and click “+ Add Input” in the input conditions list.
-
Set the registered key used for input, A, and Moment Pressed, then add it. Now pressing A on the title scene triggers the transition.
-
Finally, let’s set the transition presentation:
Before the switch effect > Transition Type: BLACK
After the switch effect > Transition Type: BLACK, BGM Setting: PLAY, BGM: Scene Setting BGM
Now the scene transition fades out and in through a black screen, and the BGM set on the scene plays after the transition.
-
Test play with
or the F5 key. It worked if the game starts at the title screen and begins when you press the A button (Z key).
Checklist for when it does not work
- The game does not start at the title screen.
Check that you set the title screen as the start scene.
Check that you are test playing with Run Project (F5), not Run Current Scene (F6). - You cannot transition from the title screen.
Check that the Title → GameScene1 transition is correct. - The game scene’s BGM disappeared.
Check that the after-switch effect has BGM Setting set to PLAY and BGM set to Scene Setting BGM.
Part 2: Make Stage 2 and Connect It with a Portal
Next, let’s go over how to use portals. We will duplicate GameScene1 and make it possible to travel to that scene.
-
First, let’s prepare a graphic for the portal — “using a particle”. Switch to the Assets view, choose Import official assets, and switch to the “Effects / Particles” tab.
-
Select P_022_warp inside the Particle folder and press “Import”.
-
Switch to the Map view, right-click GameScene1 in the map list and choose “Duplicate”.
-
Let’s name it “GameScene2”.
-
Set the new scene aside for now and open “GameScene1”. Add a Portal from the “+” button on the base layer.
-
Drag the portal to a position that is easy for the player to reach.
-
Let’s add the portal graphic (the particle). Switch the tab of the list dock on the far left to Object.
-
Click the “Type to show” field, which currently says Object, to open the dropdown list and select Particle.
-
The P_022_warp you just added should be there, so drag and drop it inside the portal’s frame. When you do, hold Shift while dropping — as shown on screen — to place it as a child of the portal.
-
If it looks like the image, you are good. As you can see, particles can be placed directly in a stage. Warp does not strictly have to be a child of the portal, but making it one means it moves along with the portal and is easier to manage.
-
Next, let’s configure the portal, starting with the entrance and exit effects. Select the portal node and look at the Inspector. We use exactly the same settings as the scene transition earlier.
Entrance effect > Transition Type: BLACK
Exit effect > Transition Type: BLACK, BGM Setting: PLAY, BGM: Scene Setting BGM
-
Next, let’s set the destination. Open “Portal settings” and press the “Select destination in preview…” button.
-
Press the “List” button for “Target Scene Path”, select “GameScene2” and press “OK”.
-
An overview of the destination “GameScene2” is now shown in the preview. On this screen you can select a portal in the destination scene if one exists, or create a new one if not. There is none yet this time, so let’s create one.
-
Click anywhere in the preview screen where you want to create the portal. An orange “New portal” marker appears. It moves to wherever you click, so pick the spot you like.
-
Once you have chosen, set
Placement layer for new portals: BaseLayer
Make it two-way: on
Create as a full copy of the source portal: on
and press “OK”.
-
The portal should now exist, but let’s check just to be safe — open GameScene2. (You will probably be prompted to save; be sure to save before moving.)
-
A portal should be placed at the spot you chose. Once you have confirmed that, there is one last step.
-
A portal moves the player that touches it straight to the destination scene. However, GameScene2 was created by duplicating GameScene1, so it already has a player. What happens in that case is… the player splits into two. So please delete the player in GameScene2.
-
Once that is done, let’s test play. You are finished if touching the portal in Scene 1 takes you to Scene 2, and touching the portal in Scene 2 takes you back to Scene 1.
Checklist for when it does not work
- Nothing happens when you touch the portal.
Open Select destination in preview again and check that it is set correctly. - The BGM disappears on portal transitions.
Check that the exit effect is set to play the BGM correctly. - You can go from Scene 1 to 2, but cannot get back from 2 to 1.
You may have forgotten to “copy the settings” when creating the portal. Check the portal in Game Scene 2 and redo the Game Scene 1 portal’s settings by hand.
Advanced Notes
How do you choose between scene transitions and portals?
The biggest difference between scene transitions and portals is whether the player moves or not.
With a scene transition the player itself does not move, so even if you have placed a player in the destination, values such as the player’s HP are reset to their initial values. (If you want to carry them over, you need to save and restore them through project variables or similar.)
With a portal, by contrast, the player’s state carries over.
So it is a good idea to use portals for things like map-to-map movement, and scene transitions for movement that involves initialization, such as restarting from a game over.
Scene transitions driven by variables
Both scene transitions and portals can use “variables” as transition conditions. So in the game from this tutorial, setting the condition “project variable: Enemy Count >= 5” would let you go to the next stage through a portal once you have defeated 5 enemies.
One caveat: project variables carry over across scene transitions, so you need an object after the transition that resets the enemy count. (With a portal transition, you can set the variable to change after the transition from Portal settings after transition > Change Switch/Variable.)
That is the end of the scene transition / portal tutorial.
You can find the other tutorials in the table of contents!