Cutscenes: Beginner's Guide

Cutscenes are short, non-interactive sequences that momentarily interrupt gameplay to present the player with storytelling, cause-and-effect actions, or information. By the end of this tutorial, you should understand how to create them yourself.

Setting up the Map

1. Create a new project called cutsceneTutorial, with the Action / RPG template selected.
2. Using the pre-existing Map called Forest, left-click the Properties button from the toolbar at the top of the screen to open the Map Properties window.
3. Change the Width / Height / Depth properties to 9, 40 and 5, respectively and then close the window by clicking the OK button at the bottom.
4. In the same Map, left-click the Environment button, next to the Properties button we just selected, to open the Environment Properties window.
5. Change the Sun property to a dark gray color (RGB: 129, 129, 129) and then close the window by clicking the OK button at the bottom.
6. Populate the Map to your own liking, or similar to the example displayed below, making sure there is a clearing for the player to walk through in the cutscene.

Creating a Light Source

1. From the map toolbar at the top of the screen, left-click the button and select an empty space on the Map towards the top (XYZ: 144, 208, 48). The Light window will open.
2. Change the Display Name property to glowingLight.
3. Change the color property to a color of your choosing (RGB: 196, 236, 255)
4. Change the Time Span property to 2 seconds and select Glow from the Preset list. Then click the OK button to close the window.

Having darkened the Map, the Light will illuminate a small radius around itself. The glow effect won't be noticeable until we test our game.

Triggering the Cutscene

1. From the toolbar at the top of the screen, left-click the button and drag it toward the bottom of the Map from the left edge to the right (see example below). The Zone window will open.
2. Under Triggers, select the trigger to open the Zone Script window, where we will create the script for our cutscene.

Once the player walks over this Zone, it will trigger the events specified in the next section of the tutorial.

Scripting the Cutscene

This section follows the assumption that you are either already competent with the program's scripting environment or have read the Scripting Tutorial.

1. Start the script with a Once Branch event.
This ensures that the cutscene will only be played once.

2. On the left node of the Once Branch, add a Play Music event and change the Song property to Dungeon 1, leaving all other properties as they are. Then click the OK button.
This will fade music in as the cutscene starts.

3. Next, add a Enable/Disable Input Set (All) event. Select the Regular Game input set and set the Input Set property to Disable. Then click the OK button.
This will prevent the player from being able to move while the cutscene is taking place.

4. Next, add a Show/Hide HUD event. Then click the OK button.
This will hide the Interface while the cutscene is taking place.

5. Next, add a Pan Camera event. Select (This) Map and set the Position property to the Map position where you placed your Light. Set the Time property to 3 seconds. Then click the OK button.
This will shift the camera's focus from the player to the Light we created, in a 3 second timespan.

6. Next, add a Wait for Camera event.
This will prevent any following events from starting until the camera has reached its pan position.

7. Next, add a Walk to Location event. Select the (Main) Actor and (This) Map. Set the Position to approximately 6 tiles below the Light's position and the Direction property to Up. Then click the OK button.
This will cause the player to automatically walk to the specified location after the camera has finished panning.

8. On the left node of the Walk to Location event, add a Wait for Movement event.
This will prevent any following events from starting until the Actor has reached its specified location.

9. Next, add a Delay event and set the Time property to 1 second. Then click the OK button.
This will prevent any following events from starting until the specified time has passed.

10. Add another Walk to Location event. Select the (Main) Actor and (This) Map. Set the Position to the Light's position and the Direction property to Down. Then click the OK button.
This will once again automatically move the player to the specified location and will face downwards once it has reached its destination.

11. On the left node of the Walk to Location event, add another Wait for Movement event.

12. Add another Delay event and set the Time property to 1 second. Then click the OK button.

13. Next, add a Start Shaking Screen event and set the Strength (pixels) property to 1 and the Shake Duration property to 0.1 seconds. Then click the OK button.
This will cause the screen to begin shaking and will continue until a Stop Shaking Screen event is called.

14. Add another Delay event and set the Time property to 1 second. Then click the OK button.

15. Next, add a Change Physics Specifications event. Select the (Main) Actor and set the Physics Specifications property to Sustain and the Turn property to On. Then click the OK button.
This will allow an Actor's Z-position to be sustained when altered to defy gravity.

16. Next, add a Slide event. Select the (Main) Actor, set the Direction property to Up, the Axis property to Y (Front XZ), the Distance property to 50 and the Duration property to 2 seconds, ensuring the Delay option is checked. Then click the OK button.
This will move the Actor up along the Z-axis, where it will sustain a distance above the ground.

17. Next, add a Fade Out event found within the Camera section. Set the Transition property to normal, the Color property to RGB: 255, 255, 255 and the Time property to 1 second, ensuring the Delay option is checked. Then click the OK button.
This will fade the screen out to white.

18. Next, add a Equip Item event. Select the (Main) Actor, set the Area of Equipment property to Weapon, the Equipment property to Sword and the Add Item First property to Yes. Then click the OK button.
This will add and equip the player with a sword Item.

19. Add another Delay event and set the Time property to 2 seconds. Then click the OK button.

20. Next, add a Fade Out event found within the Camera section. Set the Transition property to normal and the Time property to 2 seconds, ensuring the Delay option is checked. Then click the OK button.
This will fade the screen back in from white.

21. Add another Slide event. Select the (Main) Actor, set the Direction property to Down, the Axis property to Y (Front XZ), the Distance property to 50 and the Duration property to 2 seconds, ensuring the Delay option is checked. Then click the OK button.
This will move the Actor back down along the Z-axis to normal ground level.

22. Add another Change Physics Specifications event. Select the (Main) Actor and set the Physics Specifications property to Sustain and the Turn property to Off. Then click the OK button.
This will switch off sustained physics, preventing the player from defying gravity.

23. Next, add a Stop Shaking Screen event.
This will stop the screen shake that we applied earlier.

24. Next, add a Stop Music event and set the Fade Out Time property to 2 seconds, ensuring the Delay option is checked. Then click the OK button.
This will fade out and stop the music that we applied earlier.

25. Next, add a Change Radius event. Select the glowingLight Light, set the Light Radius property to Set 0 and the Duration property to 1 second, ensuring the Delay option is checked. Then click the OK button.
This will make the Light we created fade away to nothing.

26. Next, add a Use Weapon event. Select the (Main) Actor and set the Direction property to Down. Then click the OK button.
This will make the player automatically perform an attack to demonstrate the capability of their newly found Item.

27. Add another Delay event and set the Time property to 1 second. Then click the OK button.

28. Add another Show/Hide HUD event. Then click the OK button.
This will show the Interface we hid earlier.

29. Add another Enable/Disable Input Set (All) event. Select the Regular Game input set and set the Input Set property to Enable. Then click the OK button.
This will once again give the player control of their Actor, now that the cutscene has ended.

30. Finally, add a Return Camera event and set the Delay property to 0. Then click the OK button.
This will return the camera's focus to the player, instead of the once existent Light.

Test the game by left-clicking the Play Map button, from the toolbar at the top of the screen, and left-clicking below the Zone on your Map. When the game starts move your player upwards (using the up direction key).

Conclusion

You should now have a better idea of how to work with basic and intermediate scripting events to bring a cutscene to life. This tutorial serves only as a basic example of what you can do for your own game cinematics, as any event is capable of being utilised.

[char li{'E'}]

Nice!