Top Down Physics Tutorial - Creating a New Level

Creating a New Project

Configuring the Asset

Perry Poireau

Checking the Reference in the Script

Setting Up the Level to Transition

This tutorial will cover the procedures to add a new level to the top-down physics template, how to configure a new level, and how the template game loop works. You will also learn how some UI elements can be configured.

Creating a New Project

In the Jump homepage, select the Simple Platformer template and fill in the following:

Project Name
Game Description

For this tutorial,

Set the Project Name as “brick escape”
Set the Game Description as “use the bouncing balls to trigger the traps and activate the escape pod”

NOTE You can change the location of the project in the file explorer. For this tutorial, create the project in the default location.

Select Open Game Engine. The game engine opens.

NOTE You know the character is up to date between the studio editor and the game engine when this icon

appears in the Export Status column. If it is a different icon, the character is not exported or the character in the studio is a newer version and an update is needed.

Checking and Configuring the Asset

The first thing to do in a new project is to configure the assets. Open the Perry Poireau to check and configure the animations. Double-click on the resource at the Toon Boom panel.

You can find the list of assets in the Toon Boom tab, which you may find in the bottom-right corner of the interface.

Configuring Animations

This template presents the actions for Perry Poireau to Walk or Idle. You will need to configure the animations for each action.

You must configure the walk for all directions possible. For Idle, you will need to configure the action for Left and Right.

Setting the direction of each action

In the Toon Boom panel in the bottom-right of the interface, click the Assets tab. Your list of project assets will display.
Double-click PerryPoireau_PointClick.

An asset tab for PerryPoireau_PointClick will open.
In the PerryPoireau asset tab, there are two expandable lists: Motion, and Skins. If you click Motion, it will expand and the list of character animations will display.

Select an animation under Motion in the character’s asset tab. When an animation is selected, the AnimationOptions.gd section will appear in the Inspector tab to the right.
For each Motion selected, set the direction. To do this, select the Facing dropdown in AnimationOptions.gd and select a direction.

You will now be able to automatically create the flipped permutations for each configured animation.

In this example, you will configure Idle to face Right. Instead of duplicating it, you may create a flipped permutation automatically.

Create a flipped permutation for an action:

In the Toon Boom menu in the center, select Motion > Create Flipped Permutations.
Save the asset by clicking Scene > Save Scene or pressing Ctrl + S.

If you have set Idle to have a Facing of Right, another Idle will be automatically created with the Facing set to Left.

The animation is now configured for both directions.

NOTE In a new project, due to asset import and adjustments, the configuration may be lost. It is prudent to check the asset for adjustments.

NOTE The process to find where the asset is used is different from project to project. This is due to the game engine being permissive with how the designer may configure the project.

Configuring Player Asset

You may check the structure by looking at the player directly in the game/paddle folder in FileSystem. It is saved with the name paddle.tscn and has a specific script assigned to it.

The player asset is a rigid body object. This object differs from the TBG base object, which is a character2d object. You can adapt the TBG asset to be used on the project, but you would need to make lots of changes in the current code.

To take advantage of the template as a ready made project with the TBG asset, you can use the TBG asset as a configurable resource for the current object, since the game engine allows this design construction.

NOTE You should just make sure it is the same as what has been imported and configured and not one in a cached version. To do this, delete the TBG object and drag the PerryPoireau_PointClick from the Toon Boom panel to the scene tree and place it under the paddle root node.

Adjusting asset size:

If it is too big or too small, you will need to adjust its scale and position. To do so,

Select the asset.
In the Inspector, navigate to Asset Scale, and adjust the value.

Checking the Reference in the Script

Make sure the script is referring to the recent object. To do so, click on the scroll icon besides the paddle root node (see the image above) to open the script and check the reference to Perry Poireau in the code. It is located around line 50.

If it is different, you can either change the reference in the code or rename the node added to the scene tree.

Setting Up the Levels to Transition

Checking which scene is the first:

This template has levels. You must set up the levels to transition to the next. To know which scene is the first one, you can use the Toon Boom panel or check Project Settings.

To check in Project Settings, navigate to Project > Project Settings. The Project Settings window appears.
In the General tab, select Run under Applications. When Run is selected, the name and file path of the main scene will appear next to Main Scene.

The object you want to check is the “Play” button.

Open the scene for the control node labelled main.tscn.

You can check the button nodes connection in the inspector to check out where the system changes the level.
Select the Play button in the scene tree and until Filter Signals in the Node tab, click the pressed() signal to go to the script that executes when the play button is pressed.

This code does not tell us much, but there is a start_game routine call.

Press ctrl and click on it to go to its implementation. The code calls the scene to change to the game.tscn scene.
Follow the breadcrumbs. Press ctrl and double click the string with the file path to open the scene and the script.

The code you want is the first code executed when the scene enters the project scene tree. That means, the _ready routine. Checking it out you can see that the level change is in its own routine.

Press CTRL + CLICK on the change_level call.

The following can be seen:

There is a value telling the maximum number of levels.
The routine releases any level that is loaded.
It loads and instantiates a new level stored at the folder levels, from the level name.

This means that you will need to check the level_max value to add the new level.

Press CTRL and double click on the variable to go to its declaration. A value is assigned to it right away, so, let’s change the value to 3.

Design

Before you create your own level, let’s check one that is ready to understand how to approach our design.

Open the level 1.tscn file and change the middle screen to the 2D screen if it is not already at it. The level root node is a simple node2d object, but it has the level.gd script assigned to it. This is the same for the level 2 scene, which means you can adopt this same strategy.

There are 4 kinds of elements in this level template:

Tilemaps (Background, Light3D, Foreground)
Player
Information Objects
Objects for Interaction (Introduction, PushComets, DestroyBricks)

Player Interaction:

The player interaction, in fact, is only with the balls launched by the ball launcher, the balls interact with the goal object and with the bricks.

The Bricks are the main objects of the game and they are related to the exit objects via game script.

The Goal object is a kind of configurable brick that requires a number of balls to be activated. it emits a signal when colliding with a ball.

You can check the exit script and the game script to understand how the bricks and the goals relate to the exit.

The logic is simple:

The Foreground defines the boundaries of the level
The Background and Light3d are just for aesthetics purposes
The objects placed are all configured to work with the game logic.

You can create your level now. and you know you need to create it on the levels folder.

3.tscn. should be the name of your level. The levels are consecutive integer numbers and the game mechanism to decide which level will be the next considers this structure.

So, just as presented, a level is a scene with a node2d as root node and the levels\level.gd script assigned.

Boundaries

The previous levels have three Tilemaps to configure its graphics. One of those is to configure the boundaries.

In this tutorial, create three Tilemap nodes and name them respectively Background, Light3d, and Foreground. See image below.

Each TileMap has its own Tile Set object.

The background tilemap node has the tile_set_background.tres as Tile Set property, with a cell quadrant size of 16. Set the TileMap properties and draw the floor of the level.
The Light3d tilemap node have the tile_set_light.tres as Tile Set property, with a cell quadrant size of 16. Set the TileMap properties and draw the decorations of the level.
The foreground tilemap node have the tile_set_foreground.tres as tileset property, with a cell quadrant size of 16. Set the TileMap properties and start drawing the walls of the level.

Add the items for the level. All items and assets for the game are located in the game folder. Use the ball launcher, the brick, the exit, the goal and the info trigger.

Place the items in the level as your imagination seems fit. Think about obstacles and intentions. The main objective of the game is to clear the level goals and bricks and hit the exit within the allotted time using the balls shot by the ball launcher.

To configure the game objects you just need to click on each and make configurations in the Inspector.

Other Objects

The other objects that can be configured are the info trigger, the ball launcher and the goal.

Goal Configuration

The goal configuration is to set how many balls move its state to a clear goal.

To configure the goal:

Open a scene from the file system.
In the scene tree, select Goal.
Set the specifications in the Inspector.

Ball Launcher

For the Ball Launcher, you may adjust timer between launches and the ball's speed. Be sure to place at least one ball launcher. Otherwise you will not be able to escape the level.

To configure the ball launcher:

Open a scene from the file system.
In the scene tree, select Ball Launcher.
Set the specifications in the Inspector.

Info Trigger

The info trigger triggers the text on the screen for a period of time to warn the user, inform, or tell a narrative. Add one near the player's initial position and configure it to write “Hey! this is the level you created! Congratulations!”

To add an info trigger:

Open a scene from the file system.
In the scene tree select an info trigger. They contain this icon. The four info triggers in this template are PushComets, DestroyBricks, ReachExit, and Introduction.
Type a message for Text under info_trigger.gd.

Adding the Player

To add the player, just drag the paddle.tscn scene to the level scene where you want the level to start.

Exit Object

Think of a good place for the exit object. All you need to do is drag the object to a location in the scene.

The bricks and goals design is what makes the level fun, hard, easy, or boring. Take your time thinking about it!

IMPORTANT You may have already adjusted this property, but the number of levels is hardcoded in the game script! Check if it is set to 3, otherwise your level won’t load!

Finally it is time to update the level_max variable in the game.gd script so the system loads your level.

Have fun!