Labels and steps

Visual novels are typically a sequence of scenes with images and text.

In Pixi’VN, the entire narrative flow is based on the concepts of labels and steps.

A label is used to organize the narrative; it works as a "bookmark" or section of the story. Technically, a label is a class that acts as a container for steps.

A step is an individual action or event that occurs within a label. Steps are used to display images, text, and other narrative elements.

The basic lifecycle of the game is as follows:

• The game starts by calling a label. The first step of the label is executed automatically.
• After that, by connecting the Next Step function to an event (such as a button click), each time the function is called, the next step of the label is executed. Some steps can also start other labels.
• The game ends only when all steps are completed. At that point, the Game.onEnd function is triggered.

Add

To create a label, use the newLabel() function. This function has the following parameters:

• A unique id for the label.
• The steps of the label, as an array of functions to be executed in order, or a function that returns such an array.
• Optional options for the label, as an object with the following properties:
  • onStepStart: A function executed before each step. See more here.
  • onStepEnd: A function executed after each step. See more here.
  • onLoadingLabel: A function executed in onStepStart if the step index is 0, or when loading a save file. See more here.

import { narration } from '@drincs/pixi-vn'

export const startLabel = newLabel("start_label",
    [
        () => {
            narration.dialogue = { character: liam, text: "Example of dialogue" }
        },
        (props, { labelId }) => narration.jumpLabel(labelId, props),
    ]
)

Step save limit

At each step, all information about the current game state is saved.

To prevent the save file from growing too large, there is a limit on the number of steps saved. By default, only the last 20 steps are saved, but you can increase this limit (e.g., to 100). When the limit is reached, only essential information from older steps is kept. This allows you to display the full narrative history, but you cannot return to a specific step beyond the limit.

You can change the step save limit by setting the stepLimitSaved property in the stepHistory object.

import { stepHistory } from '@drincs/pixi-vn'

stepHistory.stepLimitSaved = 100

To disable the step save limit, set stepLimitSaved to Infinity.

import { stepHistory } from '@drincs/pixi-vn'

stepHistory.stepLimitSaved = Infinity