Characters

Learn about characters, their properties and how to create them!

Overview

Characters are probably one of the most important parts of your novel, not only used for displaying them as sprites but also to display their dialogs.

Properties

The following table lists all the properties you can set for each character.

Name	Type	Optional	Description
name	string	Yes	The name that will be shown when this character speaks. Supports storage and translation interpolations.
color	string	Yes	A valid CSS color which will be used to color the character's name.
directory	string	Yes	Specifies the sub-directory where the sprites and expressions images for the character are stored in case they are not in the root assets/characters directory.
sprites	object	Yes	An object with the identifiers and file names for each sprite available for the character.
default_expression	string	Yes	Side image to show every time the character speaks.
expressions	object	Yes	An object with the identifiers and file names for each side expression available for the character.
nvl	boolean	Yes	Default is false. Whether the character's dialogs should be shown in NVL mode.
type_animation	boolean	Yes	Default is true. This property indicates whether the typewriter animation should be used when the character speaks or not.
layers	Array<string>	Yes	A list of the layers that can compose a sprite for this character in order from back to front.
layer_assets	object	Yes	An object with the identifiers and file names for each of the individual assets available for each layer.

Declaration

Declaring characters is really simple.

First, you need to define an identifier. This is what you'll use for the dialog and show character actions.

We'll choose the identifier y, short for Yui in this tutorial.

monogatari.characters ({
    'y': {

    }
});

Do you have more than one character? No problem! You can define as many characters as you want, just make sure that each character has a unique identifier.

monogatari.characters ({
    'y': {

    },
    'm': {
    
    }
});

We've come up with our identifiers and they point to an empty object. Inside this object is where we'll define each of the properties we need for each character.

Name and Color

The most basic properties are the name and color for our characters. The name will appear in the textbox every time the character speaks and the color specifies what color that name will be.

monogatari.characters ({
    'y': {
        name: 'Yui',
        color: '#00bfff'
    }
});

Character Sprites

Since we are building visual novels, chances are we also need images for our characters.

All your character's sprites should be placed in your assets/characters directory, let's see what that looks like.

1. Enter the assets directory

2. Enter the characters directory

3. Place all your sprite images

4. Declare your assets

Now that we have all our sprites in our assets directory, we need to declare them so monogatari knows about them. To do so, we'll use the sprites property of our character:

monogatari.characters ({
    'y': {
        name: 'Yui',
        color: '#00bfff', 
        sprites: {
            angry: 'normal.png',
            happy: 'happy.png',
            normal: 'normal.png',
            sad: 'sad.png',
            surprised: 'surprised.png'
        }
    }
});

Notice how for each sprite we assigned two things:

1. A key or identifier which is the way we'll refer to that specific sprite.

2. The name of the file.

identifier: 'file.name'

Both items are independent of each other so while in the last example we used identifiers similar to the file names, we could have chosen any identifier, the following would be perfectly valid for example:

 someKey: 'normal.png'
 happy: 'my_file_name.png'

To learn how to show a character sprite, go over to the Show Character action.

Show Character

Layered Sprites

1. Enter the assets directory

2. Enter the characters directory

3. Place all your layer images

4. Declare your layers and their assets

Now that we have all our sprites in our assets directory, we need to declare them so monogatari knows about them. To do so, we'll use once again the sprites property of our character as well as two layer-specific properties layers and layer_assets:

monogatari.characters ({
    'y': {
        name: 'Yui',
        color: '#00bfff',
        layers: ['base', 'mouth', 'eyes'],
        sprites: {
            angry: {
                base: 'normal',
                mouth: 'alone',
                eyes: 'alone'
            },
            happy: 'happy.png',
            normal: 'normal.png',
            sad: 'sad.png',
            surprised: 'surprised.png'
        },
        layer_assets: {
            base: {
                normal: 'layers/base.png'
            },
            mouth: {
                pout: 'layers/mouth_pout.png',
                smile: 'layers/mouth_smile.png'
            },
            eyes: {
                angry: 'layers/eyes_angry.png'
            }
        }
    }
});

The layers property is simply a list of the layers that can be stacked to create a full character sprite. These layers must be ordered from back to front. In this example, the base layer is placed first, then the mouth and finally the eyes in that exact order.

Now we can declare all our image assets for the layers we just specified. Inside the layer_assets property, we can define a key or identifier for each of the variants we have for each layer.

Notice how for each sprite we assigned two things:

1. A key or identifier which is the way we'll refer to that specific sprite.

2. The name of the file.

identifier: 'file.name'

Both items are independent of each other so while in the last example we used identifiers similar to the file names, we could have chosen any identifier, the following would be perfectly valid for example:

 someKey: 'normal.png'
 happy: 'my_file_name.png'

To learn how to show a character sprite, go over to the Show Character action.

Custom Sub-directory

In the Character Sprites section we added all of our character sprite images into the assets/characters directory. This approach is pretty straight forward but can become a bit troublesome as you add more characters. For starters, the directory could start feeling cluttered and you would not be able to use the same name on different files without them getting overwritten.

A solution for this issue is to have a different directory for each character where we'll place all the assets for that character alone. This is achieved by specifying the directory property in your character declaration. This property expects the name of a sub-directory inside the assets/characters directory. For example, if you create a sub-directory assets/characters/my-character then you should set the directory property to 'my-character'. Let's take a look at the whole process:

1. Create your sub-directory

2. Place all your character assets in that sub-directory

3. Set the directory property in your declaration

Now that we've created the sub-directory and placed all our assets for a specific character in it, then we must specify the directory property in our character so monogatari knows where the files are located.

monogatari.characters ({
    'y': {
        name: 'Yui',
        color: '#00bfff',
        directory: 'yui', 
        sprites: {
            angry: 'normal.png',
            happy: 'happy.png',
            normal: 'normal.png',
            sad: 'sad.png',
            surprised: 'surprised.png'
        }
    }
});

Expressions / Side Images

It is also possible to define side images or expressions to show on the textbox when your character speaks.

1. Add your expression images to your assets

For this example we'll add all our expressions in their own directory. This is not required though and you can place them right where your character's sprites are.

Now that we've created our expressions sub-directory, we'll place all our expression images in it.

2. Add the expressions to your declaration

Now that we've added our files, we need to define them in our character declaration by defining the expressions property. Just like the sprites property, it expects an identifier/filename list.

monogatari.characters ({
    'y': {
        name: 'Yui',
        color: '#00bfff',
        directory: 'yui', 
        sprites: {
            angry: 'normal.png',
            happy: 'happy.png',
            normal: 'normal.png',
            sad: 'sad.png',
            surprised: 'surprised.png'
        },
        expressions: {
            angry: 'expressions/normal.png',
            happy: 'expressions/happy.png',
            normal: 'expressions/normal.png',
            sad: 'expressions/sad.png',
            surprised: 'expressions/surprised.png'
        }
    }
});

Notice how we added the expressions/ prefix to all of the file names to account for the expressions directory we put the files in. If we hadn't done that and we had placed them right with our sprites, the prefix would not be needed but we would have to change the names of the files so that they don't overlap with the sprites ones.

To learn how to show this expressions in a dialog, go over the Dialog action.

Dialogs

Default Expression

It is also possible to define a default side image / expression for your character. This default one will be shown for all of your character's dialogs that do not specify any other expression.

The default_expression property expects the identifier of one of your expressions as its value. Previously we defined the normal expression for our character:

normal: 'expressions/normal.png'

If we wanted to make that one the default expression, then we'd need to set the default_expression property to normal:

monogatari.characters ({
    'y': {
        name: 'Yui',
        color: '#00bfff',
        directory: 'yui', 
        sprites: {
            angry: 'normal.png',
            happy: 'happy.png',
            normal: 'normal.png',
            sad: 'sad.png',
            surprised: 'surprised.png'
        },
        expressions: {
            angry: 'expressions/normal.png',
            happy: 'expressions/happy.png',
            normal: 'expressions/normal.png',
            sad: 'expressions/sad.png',
            surprised: 'expressions/surprised.png'
        },
        default_expression: 'normal'
    }
});

NVL Mode

By default, characters will speak in adv mode. In ADV mode, the textbox appears in the bottom of the screen and only displays a dialog at a time. NVL mode will make the textbox cover the whole screen and will display several dialogs in a log format.

The nvl property accepts a boolean value (true or false) and is set to false by default. Setting it to true will make all of the character's dialogs to be shown in nvl mode.

monogatari.characters ({
    'y': {
        name: 'Yui',
        color: '#00bfff',
        directory: 'yui', 
        sprites: {
            angry: 'normal.png',
            happy: 'happy.png',
            normal: 'normal.png',
            sad: 'sad.png',
            surprised: 'surprised.png'
        },
        expressions: {
            angry: 'expressions/normal.png',
            happy: 'expressions/happy.png',
            normal: 'expressions/normal.png',
            sad: 'expressions/sad.png',
            surprised: 'expressions/surprised.png'
        },
        default_expression: 'normal',
        nvl: true
    }
});

If you want to learn more about the different dialog modes, check the Dialog action and the Text Box component.

Dialogs

Text-Box

Typewrite Animation

Monogatari allows you to disable the typewrite animation for your game from your game's settings, however, some times you only want to disable the animation for a specific character.

The type_animation property accepts a boolean value (true or false) and is set to true by default. Setting it to false will disable the animation for all of that character's dialogs.

monogatari.characters ({
    'y': {
        name: 'Yui',
        color: '#00bfff',
        directory: 'yui', 
        sprites: {
            angry: 'normal.png',
            happy: 'happy.png',
            normal: 'normal.png',
            sad: 'sad.png',
            surprised: 'surprised.png'
        },
        expressions: {
            angry: 'expressions/normal.png',
            happy: 'expressions/happy.png',
            normal: 'expressions/normal.png',
            sad: 'expressions/sad.png',
            surprised: 'expressions/surprised.png'
        },
        default_expression: 'normal',
        nvl: true,
        type_animation: false
    }
});