Toon Boom Jump Tutorial: Visual Novel

How the Project Works

Adding a Third Script

Configuring a New Background

Editing the Animations

Replacing the Assets in the Scripts

In this tutorial, you’ll learn how to create a new scenario and add the actors, their behavior, dialogue, and decision branches for the visual novel template.

To begin configuring the Visual Novel template, create a project. To create a project:

1. In the Jump homepage, select the Visual Novel template and fill in the following:

   • Project Name

   • Game Description

   For this tutorial:

   • Set the Project Name as “The Park”

   • Set the Game Description as “a whole new level with extra features”

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

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

How the Project Works

The game engine starts with the main scene open.

If you click on the Main node in the Scene tab, we see a property named Scripts on the inspector. This property is of type Array. Click on it to reveal its contents.

We can see that this property has two entries, each containing the path of a scene. You can look at the script that controls the main node, but it is unnecessary.

To look at one of the script, locate the folder NovelScripts, expand it, and double-click test-scene.txt.

test-scene.txt

Each script line starts with an identification that can be a command, a location, or a character.

mark start_location_jump

The first line is mark start_location_jump.This line tells the system that if a jump to the ‘start_location_jump’ is called, this is where the ‘reader’ must go.

dani_bedroom

Then we have the background setting, dani_bedroom, and an animation description, ‘fade in.’ This means the scene will load the mentioned background and present it with a fade-in animation.

Keep in mind that the background is a resource, and configuring backgrounds and setting their identification will be covered later in the tutorial.

perry walk enter left

In the next line, the script defines the character and the character's

• Expression or animation

• Action

• Placement on the scene

That means Perry enters the room walking. It is positioned on the left. And says, ‘Hi there! My name’s Perry Poireau”.

choice

Visual novels are interactive storytelling systems. And the interactive part is usually created by presenting choices for the player. The choice mechanisms will branch the storyline and lead the narrative in a specific direction.

The script system implements a choice mechanism, where the scriptwriter will configure how the system will present the options to the user and how the system will process the choice.

The script for choices start with the word “choice.” Within the choice instruction, having the “:” at the end means that everything that ends with a “:” is a choice the system will present to the user. In this script, we have two choice constructions. See the image below.

In the first one, the indentation tells us it is composed of three possibilities, and one of those three contains another choice construction embedded.

This construction means you can create complex branches in a script.

If you select the first choice, it will configure another jump point, show the text defined in it, and it will call another choice construction with more choices.

Now, there are some other important things in this script:

• jump - demands the name of the jump point to move the script flow.

• set - Sets a value to an identification.

Here, the script can set the following identifications:

• started_over

• jump_ahead

Which seems to do nothing in this script, so we’ll look for them in the following script.

Some more instructions introduced are:

pass - Does nothing. It tells the mechanism to skip to the next instruction.

transition - Goes to the next script in the Main node

There is no specific instruction to jump to another script; the transition always moves to the next.

Check the scene lexer script in the parser folder to check the instruction set. The built-in commands are listed there.

test-scene2.txt

The second script starts setting the background with a fade-in.

Note the first dialogue line. It has no character or instruction. It has just the text. Having no character on a dialog line means it is the narrator. The lines following it have the same pattern as the previous script.

That means the same pattern until we reach the "if" instruction. This instruction will accept only boolean values ("true" or "false"). It does not accept expressions. It only accepts simple values.

And this is where those values set on the previous script are used. If the value of the identification is "true", it will execute the indented block under the if statement. You can place other "if" statements under it or use the "elif" statement to test other values in the same context level.

You can also use the "else" statement if no previous values were valid.

Finally, the end command ends the execution.

When the second script ends, the game closes.

Removing the ‘end’ instruction will tell the mechanism to look for another scene and open it if found.

Adding a Third Script

So far, we have two scripts. To add a third one:

1. Right-click the novel scripts folder in the FileSystem

2. Select the new text file menu item.

3. Name the new text file park-scene.txt.



4. On the main scene, select the main node and expand the scripts property if not already expanded

5. Click the button to add another element

6. Locate the park-scene.txt file in the FileSystem, and drag and drop the file to the empty slot.

Configure a New Background

Before starting the new script, you can configure a new background and the transition to it.

At the end of the second script, there is the suggestion for the characters to go to the park. Open the second script if not opened yet, and add the transition to the park by using the "jump" mechanism.

Add the Transition to the Park:

1. Add the instruction jump to_park below the dialogue where Perry says “good call” and set it on the same column.

2. Add the mark to_park two lines below the end instruction in the same column.

3. Add the "transition" instruction with the fade_out animation in the following line.

The next step is to edit the park scene.

Setting the Background

For the background, you need to indicate the background id. To do that, a background resource needs to be created.

To do this:

1. Right-click on the Backgrounds folder.

2. Navigate to New > Resource in the menu.

3. Type ‘background’ on the search field, and select the Background (background.gd) script

4. Click Create and name it park_scene.tres

5. On the backgrounds folder, open the park_scene.tres you just created, and set the properties on the Inspector

   • The ID is the background id you’ll use on the script. Name it "park".

   • The Display Name is the text to describe the location. Name it “City Park.”

   • The Texture is the background image.

6. locate the file “the_park.png” in the Backgrounds folder and drag it to the Texture field in the Inspector.

7. Save your work.

your background resource is ready.

On the park_scene.txt script, finish the configuration.

1. Set the following:

   • background instruction

   • park id

   • fade-in animation.

2. Fill in with some narration and a dialogue between our two characters.

3. End the script with the "end" instruction, and run the project.

On the yard, select the option to go for a stroll to transition to the park. The other option will end the execution. The scene you created will now come to life.

Editing the Animations

1. Name the animations uniquely; let the Facing be None. Configure to: walk_up, walk_down, etc.

   Do this for both assets in the TBG/character folder. It is important to check the assets scale.



2. Right-click on the Characters folder and select the new resource to create a new character resource.

3. Look for the resource with character.gd script. Create it and name it for the character we’ll create. We need two resources; let’s name the resources perry_new.tres and hunterdog_new.tres.

4. Now, edit the configurations. Open the perry_new.

   There are four properties:

   • ID: The identification that relates the script to this resource.

     For the ID in the this tutorial, type new_perry.

   • Display Name: The property that will appear on the screen when the character speaks.

   • Bio and Age: Basic information about the character.

   • Game Asset: A text field that holds the path to the asset.

     Go to TBG\characters\perry_poireau, right-click on the .tscn file, and select Copy Path. Paste the result on that field.

     If we are considering the TBG assets, the Game Asset is mandatory.

     If you just want to use static images, check Dani or Sophia.tres resources, the configuration is on the Expressions.

   • Default Expressions: The main expression or animation the mechanism will set if an expression or animation is missing.

     For this tutorial, set the Default Expression as it is.

   • Expressions: Where you can configure the expressions.

     • For static images, the expression key is mapped to an image.

     • For the TBG characters, the expression key is mapped to an animation name configured for the asset.

     In Expressions, add the Idle animation to the "neutral" expression. To do this, click on the pencil icon on the right side of the field and select the string type. You can now type "Idle" to indicate the neutral expression maps to the idle animation.

You can open the character on the Toon Boom window and set the Resource on the Inspector

Now you can fill in for the other expressions and map them to the animations.

After configuring your new Perry character, do the same for the new HunterDog. Set the ID, the Display Name, the Bio, the Age, and the Game Asset!

It is important to keep the neutral as the default expression ghag is already present in the map. Also, configuring the mappings is essential.

Replacing the Assets in the Scripts

Now that you have both assets configured, you can replace them in the scripts. To do this:

1. Open the first script and search the string Perry,

2. Replace with new_perry.

3. Do the same for the hunter dog.

NOTE You’ll need to check if the expressions are the same. If not, change them.



4. Do the same for scripts 2 and 3.

Now that you have replaced the characters and checked the expressions, it is time to run the final project. If needed, adjust the asset scale of your TBG assets.

You will now have the visual novel with two new characters and a new scene.