[Beginner’s Guide] Creating your first Visual Novel

Overview

A detailed explaination of using TyranoBuilder for newcommers!

Starting a new project

When beginning a project in TyranoBuilder, it’s a good idea to have the project’s name ready and have a good idea for what type of project it will be.
For the purposes of this tutorial we will be creating a ‘Visual Novel’

So when you’re ready, go ahead and click on ‘+ New Project’

The first thing you will be asked is for the Projects name
This is self explanatory.

Next is the Game Type. Choose if you would like a Visual or a Sound Novel.

What project type should you choose?
Visual Novel – Created with a mixture of images and text. Most generally also contain music, helping to set the mood.

Sound Novel – Generally very few if at all no images are seen withing a sound novel. These usually rely on the help of sounds/music to help set the mood.

Personally I use the first option (960×640) however this is totally up to you. Remember however, the larger the game screen, the larger the images will need to be (This can be troublesome when dealing with backgrounds as it means more detail needs to be added).

Personally I would keep both of these boxes unchecked. Simply because most people want to be able to save where they’re up to in a Visual Novel. If the game/computer crashes or if they’re called away, at least you have a point in which to return to!

Congratulations!
You have started a new project!
In the next section we will go over the UI.

User Interface

After starting your new project, you should now see a screen like this:

You will notice 3 horizontal tabs:

Components
To save space here on the guide, I will cover what each catagory is for, however if you want specific details on each item within the category, simply mouse over them and you will see the relevant tool-tip at the bottom of the screen.

These all control the dialogue and story aspects of your game.

These allow you to show/hide characters from the scene or change their expressions.

This allows you to change the background of the scene, add other images and also buttons.

This allows editing of how things appear on the screen. Showing/Hiding the text area, speed of the text and even the font.

This gives you the option to add music, sound effects and even videos into your game.

Scripts are for custom game mechanics and things such as variables.

Resources
This tab will give you access to a further 5 tabs:
Backgrounds, Images, Characters, Sound Effects and Music.
This area is essentially your ‘library’ Allowing you to add/remove items as needed for use in your game.

Scenes
Scenes are great for helping to organize your game. You don’t have to use these, however if you’re working on a large project, it can get rather tedious trying to find specific areas to edit. With scenes you can narrow it down much quicker!

In the center you’ll find the layout for the scene. You can click&drag items from the left sidebar into this area in order to control what happens in your scene.
Clicking on these will allow you to edit them. Some have special options that appear in the right sidebar.

This area allows you to edit special options from items in the center column.
Items such as the ‘Join Scene’
From here you can define which character will join the scene, their x/y position and the duration of the transition (how long it will take for the image to fully appear).

It’s recommended for new users to use this method of adding characters to the scene as you are able to quickly adjust the position of the character by clicking on the ‘Positioning tool’ – this allows you to simply click and drag the image to the area of your choosing.

Advanced Options

The following sections will contain more advanced options.

Story Branch with Variables

Variables are used in order to allow the use of ‘checks’ for things such as story branches, bonus scenes and character relationships.

First we start off by using an iScript component.

From here we can begin creating the variable.

This is the name of our variable (Start it with sf.) and the number it currently represents.

Now I’m going to make my variable represent the relationship level toward another character. To make it easy for me to find, I’ll give my variable the same name as the character it’s for. In this case the character’s name is Lene so my variable will look like this:

Be sure to end the code line with a semicolon ;

Next I will give the player a chance to improve the relationship with a branch option.
First though I will create Labels for where each branch will exit.
You can name these Labels by clicking on it in the center column, once done you will see the ‘Label Name’ option in the right sidebar.

If you wish to use multiple branch options. It’s good to name it something that will allow you to define which is which. For example I will name mine Choice1_Yes and Choice1_No

So right now my script looks something like this:

Now we can add in the branch.
The main options to worry about is to ensure the ‘Location’ points to the scene you’re on.
The ‘Target’ will allow you to select from the Labels you created earlier
You can then position the boxes.

Next let’s reward the player when they choose the ‘Yes’ option.

For this we add in another iScript after the Choice1_Yes label and enter the code:

This will add 1 to the relationship with Lene.

Finally we can fill in the dialogue:

Bonus Scene with Variables

Now we’re going to add in a bonus scene for anyone who won the love of our girl earlier on in the game!

We will need to do a ‘check’ by using if/else statements.

This can be done with TyranoScript:

This will check that your relationship with the character is at 1

== This will check the number is equal to
< This will check the number is Less than
> This will check the number is More than.

After you’ve added in that code, you can then move on to adding the dialogue for that bonus scene.

if you want to make 2 possible outcomes you will need to add an Else statement so that if the relationship isn’t equal to 1, they will see a different scene.
With TyranoScript simply enter:

then continue with the dialogue for the 2nd scene.

Be sure to add Labels and Jumps at the end:

Adding Characters via Text box

Sometimes it feels neater (at least to me) to have characters join the scene by writing the code into the text box.
This is especially true for long-winded dialogues.

In order to acheieve this, simply write in the following code:

Let’s break that down a little shall we?

‘chara_show’ is the command to tell the game it needs to display a character.

name in the speachmarks, enter the name of the character you wish to display.

left This represents the X co-ordinate

top This represents the Y co-ordinate

You can hide the character again by using the command:

You can also use
time to set how long it takes for the image to transition/fade in or out

It’s usually best to add the code in with the dialogue to avoid additional clicking to transition.

Be sure to use the correct case when entering the character’s name. For example if the image you uploaded is Character.png (Upper-Case) in the ‘name’ section you write “Character” – Where as if the file is character.png (Lower-Case) write “character”

Thank You

Thank you for reading this guide.
I will continue to update it as needed with new ‘tutorials’

If you would like to contribute please do let me know.
If the guide helped you, I’d love to hear about it! ^^

Feel free to request a tutorial and I will try my best to cover it for you.