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

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.

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.
  2. Under UIObjectRoot, add a ColorRect node.
  3. Expand the ColorRect to cover the menu display area.
  4. Since white is too bright, change the Color property to black.
  5. Add a Label node under UIObjectRoot. This is used to display text.
  6. Enter "SAMPLE GAME PROJECT PRESS A START" in the Text property.
  7. Create a new LabelSettings and set the font size to 80.
  8. Set the horizontal alignment to center and move the Label to roughly the center of the screen.
  9. This completes a very simple title scene.
    Now switch to the Scene Transition tab at the top.
  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.
  11. In the Switching Conditions, set it to trigger on A button input.
  12. Set both pre-transition and post-transition effects to BLACK.
  13. Right-click on Title and select Set as Start Scene.
  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.

STEP 2: Use a Portal to Move Between Scenes

  1. Switch to the game_scene tab. Under ObjectRoot, create a new Portal node.
  2. Set the portal’s properties:
  1. Set both the Entry Effect and Exit Effect to BLACK.
  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.
  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.
  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.
  3. Adjust the position of the PortalCollision.
    If it’s on the right side of the Portal node, move it to the left instead.
  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.
  1. Return to game_scene.
    Likewise, set the Target Scene to game_scene2.tscn and choose its portal.
  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.