Tutorial: Script Course #5 - Let’s Create Scene Transitions

ACTION GAME MAKER OfficialTutorial/チュートリアル
,
1

In this course, you will learn the basics of scripting in ACTION GAME MAKER.

In Part 5, we will create scene transitions.

Preparation Before Starting the Course

You will continue using the same project from Parts 1 to 4.
Please open the project to get started.

2

STEP 1: Create a Title Screen and Try Moving with Scene Transitions

  1. Open a new scene tab and create a new game scene.
    Name it title and save it.
    image
    image369×326 14.2 KB
  2. Under UIObjectRoot, add a ColorRect node.
    image
    image734×253 22.8 KB
  3. Expand the ColorRect to cover the menu display area.
    image
    image794×483 5.37 KB
  4. Since white is too bright, change the Color property to black.
    image
    image462×576 27.1 KB
  5. Add a Label node under UIObjectRoot. This is used to display text.
    image
    image929×347 29.8 KB
  6. Enter "SAMPLE GAME PROJECT PRESS A START" in the Text property.
  7. Create a new LabelSettings and set the font size to 80.
    image
    image1334×438 32.5 KB
  8. Set the horizontal alignment to center and move the Label to roughly the center of the screen.
    image
    image1229×337 32.3 KB
  9. This completes a very simple title scene.
    Now switch to the Scene Transition tab at the top.
    image
    image1089×572 27.2 KB
  10. Place the title.tscn scene to the left of game_scene, and connect a link from title to game_scene, just like in visual scripting.
    image
    image346×151 4.51 KB
  11. In the Switching Conditions, set it to trigger on A button input.
    image
    image456×472 30 KB
  12. Set both pre-transition and post-transition effects to BLACK.
    image
    image431×489 30.1 KB
  13. Right-click on Title and select Set as Start Scene.
    image
    image379×356 12.3 KB
  14. Do a test play. If everything is set up correctly, the title scene should appear, and pressing the A button or the Z key should transition to the game scene.

Testing When Multiple Scenes Exist

If you press the :clapper_board: icon near the test play button (or press F6) while a specific scene is open, you can run only that scene.
image

However, scene transitions may not function properly in this mode.
If you want to test transitions as well, it’s best to set the scene as the Start Scene in the Scene Transition tab and test from there.

3

STEP 2: Use a Portal to Move Between Scenes

  1. Switch to the game_scene tab. Under ObjectRoot, create a new Portal node.
    image
    image1198×291 32 KB
  2. Set the portal’s properties:
  1. Set both the Entry Effect and Exit Effect to BLACK.
    image
    image434×519 28.9 KB
  2. Add Layer 2 to the CollisionMask.
    This is because the sample player is on Layer 2. If the mask only includes Layer 1, collision will not occur.
    image
    image429×614 26.9 KB
  3. Move the Portal node itself (not just the PortalCollision) to the far right side of the stage.
    The position of the Portal node determines the spawn location in the next scene.
  4. Resize the PortalCollision, making it narrower to avoid accidental triggers.
    image
    image1228×386 62.2 KB
  5. Now create the destination scene:
  1. Open game_scene2 and delete the player object.
    Otherwise, the player would appear twice.
  2. Move the Portal node to the left edge of the map.
    image
    image759×271 28 KB
  3. Adjust the position of the PortalCollision.
    If it’s on the right side of the Portal node, move it to the left instead.
    image
    image262×332 8.85 KB
  4. Change the Portal properties in game_scene2:
  • Set the input direction to left.
  • Set the Target Scene to game_scene.tscn.
  • You should now be able to select the portal in game_scene.
    image
    image434×291 18.3 KB
  1. Return to game_scene.
    Likewise, set the Target Scene to game_scene2.tscn and choose its portal.
    image
    image440×295 17.2 KB
  2. Test play the game.
    If everything is configured correctly, you should be able to move freely between the two scenes.

Conclusion

This marks the end of the Script Course tutorial series.
The contents of this tutorial cover only the basics.
With ACTION GAME MAKER’s Visual Scripting, you can create a wide variety of behaviors by combining conditions and actions.

With your imagination, you might even build something we developers never anticipated!
If you come up with something cool, be sure to share it on social media or the official guild.

Want to take other courses?

1. Graphics Course
For those who want to animate their own original characters.

3. Expression Enhancement Course
For those who want to add cool, Godot-style visual effects.