Toon Boom Jump Tutorial: Adventure Dungeon Tutorial

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 “Dog Dungeon”
- Set the Game Description as “Perry found riches but will need to be wary of the dogs!"

NOTE You can change the location of the project in the file explorer.

For information on the Create a New Project Page, see Create a New Project Page.

Adventure Dungeon Characters

The project comes bundled with a set of characters

Perry Poireau
Three kinds of dogs. All three dogs derive from the ShooterDog you may have seen in other projects.

You can open each project and export them from Asset Editor. You may also export them directly from the Launcher.

Launch the game engine after all assets are exported.

For more information on the options in this page, see Product Details Page.

First Game Run

On the first run, the game engine starts to import the assets already in the project. This process may take a while.

Once the assets are all imported, you can run the game to check how it behaves. The following keys perform the following actions.

The arrow keys move the character.

The space key is the attack command.

The ESC key opens the pause menu, where you can continue playing later or give up and exit the game.

The plus(+) key on the keypad takes a screenshot.

The characters may seem wrong, or the attack may not work. This will need to be fixed.

The game engine used for the Toon Boom Jump suite has Godot at its foundation; this means that everything that works on Godot will work here.

Godot uses the concept of scenes and the hierarchy of scenes to organize and manage the projects. Sometimes this can be confusing since there are many ways to organize or arrange the scene files.

Finding the Main Scene

Each Godot project has a starter scene, which is usually not evident in Godot projects. This project opens directly on the main scene.

You can check what is the main scene in the Project Settings. To check the main scene of the project:

In the top menu, there is a Project dropdown. Navigate to Project > Project Settings.
Click on the Run group of the General tab. It is located under Application.
The main scene file path will appear to the right of Main Scene.

Configuring Assets

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

Selecting the Assets tab of the Toon BoomProject Panel will open the panel with all the assets imported from the Asset Editor. Double-click Perry Poireau to open the asset in the Preview Panel.

An error may appear with a warning that the file appears to be invalid or corrupt. This means that the derived scene file and the root asset may be out of sync. Try reloading the project by selecting Reload Project in the Project Menu, and open the asset again. If it is still with error, you’ll need to reconfigure the asset.

Fixing Invalid Assets

Check which assets are invalid and readjust them. For this tutorial, consider the OrcDog to be invalid.

To readjust the OrgDog, navigate to the location of the asset in the FileSystem and erase the .tscn file for the asset, and reconfigure the asset scene. You’ll need to do this for every corrupt asset.

Setting up the Monster Elements

For the monsters, you’ll need to set up the monster elements. To do this:
1. Find the monster_control scene in the entities folder in FileSystem
2. Use shift + click copy all elements but the root node to your monster asset. See the image below.
For the player asset, you’ll need to set up the player elements.
1. Find the player_control scene in the entities folder in FileSystem
2. Use shift + click to copy all elements but the root node to your player asset. See the image below.

Set the Animations

You can check the properties of the imported character on the Toon Boom Asset Viewer and the Inspector panel.

Set the animations with the Facing parameters and create the flipped permutations. The only animations needed for Perry and HunterDog are the Walk and the Idle animations.

Note that you may also adjust the Loop properties in the Inspector. They should be set to Linear for this tutorial.

Setting the Facing of animations:

Select an animation in the Motion list.
Under MotionConfig.gd in the Inspector, click the Facing drop-down and select a direction.

Creating the flipped permutations:

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

The animations are now configured for both left and right movement.

The dogs only have the default animation. Name it “walk”, with direction to the left. Then, create the flipped permutations.

Asset Reference

Save each configured asset and check the reference for each asset. It should be the .tbg file that is referenced.

To check the reference of the asset:

Open the asset by selecting the (your asset).tbg dropdown. See the image below.
If (your asset).tbg is not checked, check (your asset).tbg.

Creating Decorations

You may add decorations to your scene by dragging the .tbg files directly from the FileSystem.

Click on the item “new from (your asset).tbg” in the <asset name> drop-down in the Toon Boom Asset Viewer. Name it with the prefix “_decor”. Check the animation configuration and configure it if needed.

Add a decoration HunterDog to the main scene by clicking and dragging it from the FileSystem.

NOTE If the scale is too small, you’ll need to adjust the scale of the asset in the Toon Boom window and Inspector panel, save it, and run it again.

Configuring Behaviour

Assuming you had to reset the assets, you can reconfigure the behaviour for the game assets. You will need to do so by accessing the asset's script.

NOTE The decor assets will have no extra behaviour, so no specific script is attached.

To open the script:

Open an asset so that the tab appears in the Toon Boom Asset Viewer.
Click on the Script menu. See the image below.

If no script is displayed, click on the New Script item. The top script is the one assigned to the asset.

If this is a new asset, the script window will be empty, and you’ll need to type into it. The script will have the same name as your asset. The extension will be “.gd”.

If a script with the same name as your asset already exists in the asset folder, it will be used. This means the script for the Perry Poireau and the OrcDogs will not need to be typed.

Project Organization

addons

In the FileSystem, the addons folder is where the plugins are located.

tbg

The tbg folder inside the addons is the plugin responsible for importing the asset from Harmony and assembling it to its raw form to be used in Godot.

This is the mandatory folder to work with the Toon Boom Game suite.

assets

The assets folder is where all images, sounds, music, graphics, and UI elements like fonts and icons are placed in this project.

NOTE Godot is quite permissive in the organization of a project file; keep one organization method in mind to avoid getting lost when your project gets big.

core

The core folder contains important scenes and scripts for the project. In this template, the scenes and their related scripts are located in the same folder when the scene has one.

You can tell apart scenes from scripts by the file extension. Scenes have the “.tscn” extension, while scripts have the “.gd” extension.

The core folder has the main scene, the start menu. Open it if it is not already open or as the selected scene.

resources

You may encounter another extension: “.res” or “.tres”. Those are related to Godot’s resources. In the project, they are in the “resources” folder.

Scene Tree

On the left panel, at the top, you can check the scene tree organization. Those items can be checked out in the Godot documentation.

If you select one of those, it will be the active element on the inspector panel; on the right side, you can check the documentation directly on the game engine by clicking on the “doc” button of the inspector.

Scripts

Scripts define the behaviour of the scene elements. You can check which scene or element has an attached script by the script icon attached to the scene node or element node. Clicking on the script icon will take you to the script window where you may check the scene script.

NOTE You can return to the 2D graphics screen by clicking the 2D in the centre of the top menu.

The list of opened scripts is on the right side of the scene tree panel. The current script is the start-menu script; you can identify it because it has the focus. See the image below.

The centre window is a text editor where you can edit the script. This script is in the gdscript 2 language, the script language version for Godot 4.

If you want to understand how to change or add new characters to this template, you'll need to understand how the levels are built.

Map Scene

The Map scene is where the level is built and attached to the game. The world’s graphics can be changed here.

The Tilemap panel, should open at the bottom of the interface. Tilemaps and Tilesets are game design patterns to save space when building large scenes. They uses chunks of repetitive graphics. The Tilemap is the data assembly, and the Tileset is the data available.

NOTE For documentation from Godot about how to work with Tilemaps and Tilesets, you may have a look at the Godot documentation by selecting Online Docs above the main screen.

Replacing Org Dog With Another Character

Return to the launcher and select the assets folder and click Import Existing 2D Asset.

There is already one asset prepared. Import and use the sly fox asset as the character for the blue chaser enemy.
Open the asset after the import and click the button to export it. Keep the settings.
Go back to the Godot game engine. The asset will be automatically imported.

IMPORTANT You can not use the raw TBG asset directly in Godot. The reason for this is that it is an imported asset. If you want to extend its behaviour, you must create a new script inheriting from its base script: TBG dot dynamic asset.

Create a Scene or Asset Derived from a TBG Asset

To create a new enemy, you must first create an inherited scene.

To create a scene or asset derived from the TBG asset, open the asset from the Toon Boom panel and save it.

You can create TBG-derived assets from the Toon Boom window by doing the following:

Select the Assets menu option. and click the TBG item.
Select the “new from (asset name).tbg”. It is located above the left panel.

It is the same procedure done for the decoration assets.

Assigning a New Behaviour to a New Scene

If the object type is the same as the other TBG files, the script from other assets can be reused.

For example, you can mimic the behaviour of the OrcDog, the one that chases the player character.

To do this:

Open the sly asset on the Toon Boom Project Panel and configure the animations.
Name the animation with the same name as the OrcDog. This way, no adjustments will be needed to the script.

Click on the script menu and click on the new script item. It will create an empty script with the same name as your asset.

The goal is to assign to it the same behaviour as the OrcDog. To do this you can can either:

Copy the OrcDog.gd script contents to the empty script.
Take advantage of the object orientation characteristic of the .gd script and extend this script from the OrcDog.

For this tutorial, the second will be done.

The created script extends from the usual dynamic assets. For this tutorial, it will be extended from the OrcDog script.

To do this, keep the extended instruction and erase the remainder of the line. Find the OrcDog script on the file system, and drag it to the line. This will add the string path of the script to be extended.

The last thing to do is copy the monster control elements to the asset. Leave the asset without those elements to check what will happen.

Adding the Asset to the Game

The characters are placed in runtime. All their configuration to instantiate and add to the scene is done in the map script.

If you open the map script in the core folder, at the beginning of the script, you can see some constant assignments, and there is the scene_monster_goblin.

Change the string to the sly file in the preload parameter. This can be done by erasing the string in the preload and dragging the asset scene file to the preload parameter. The string path will be copied,

If you run, you will get an error. The engine says one element is null.

The reason for this is that the monster control elements are referenced in the behaviour script, but the asset script has none.

For the monster control elements to be referenced in the asset script:

Stop the execution.
Find the monster control on the entities folder and open it.
Copy the scene elements except the root node.
Open the new character scene.
Select the root element.
Paste the copied elements.

Now, it can run.

Adding the Monster Control Elements

If the character is too big or too small, you can adjust the asset scale in the asset transform group.

Some extra configurations are needed in the assets, mainly the collision and hit layers, and the signals to respond to the collision.

For each asset, select the root node and check the TBG_DynamicAsset.gd section of the Inspector panel on the right side of the interface. There you see the Collision and Hitbox configurations.

Collisions and Hitboxes

Collisions are the relationship between the object and the physics set in the world

Hitboxes are the controls the object responds to when something collides with it.

Before setting it, look for the collision properties on the characterbody2d section.

Set the Layer to 3; the enemies layer,
The Mask to 1 and 2; the world and player layers.

Do this for all enemies.

For the player,

Set the Collision Layer to 2
Set the Mask for 1 and 3; the world, and the enemies.

The Layer tells what the object is, and the Mask tells what it checks for collision (with what it responds).

Do this for the Hitbox section of the dynamic asset as well.

For the monsters, they are on layer 3 and look for mask 2; the player is on layer 2 and looks for mask 3.

Configuring the Collision Settings

The Collision and Hitboxes can now be set. It is recommended to set the Collision tight to the asset and the Hitbox a little larger. Selecting the Collision to the convex hull and the Hitbox to the capsule is a good idea.

You should be able to run and see Sly hitting walls and responding to collisions.

Setting the Signals

The last configuration is how it responds to the hits. The enemies hit us. But if they do not take our lives or do not die, we need to configure the Signals.

Select the root node of each asset, and on the top of the Inspector panel, select the Node tab.
Connect the area_enter_triggered event to an already coded function in the script. To do this, double-click on the area_enter_triggered. The Connect a Signal to a Method dialog box will appear.
Select the root node.
Click on the Pick button. The Select Method dialog box appear.
Select the _on_area_enter_triggered option.
Save the asset, and make sure it is configured.

Change the asset to another and then open this one again. Also, try opening it from the FileSystem. If the connection remains, everything will seem configured.

Configuring the Animations

You can also configure the animations. You can open the script to check how the animations are mapped.

The animation is called “walk” for the dog, and there are the facing parameters. Just configure it on the asset and run.