LogoPixi’VN
Narration/Narration with JS/TS/Labels and steps

Manage narration flow with labels

Describes how to control the narrative flow in Pixi'VN using labels, including call, jump, and close labels function.

The narration flow is managed by functions such as callLabel, jumpLabel, goNext, goBack, and closeLabel, all available in the narration object.

Run a label

Go next step and go back

Go next step

UI screen

You can find the example of the go next button in the interface examples section.

To execute the next step, use the narration.goNext() function. This function has the following parameters:

  • props: the properties to pass to the label. The interface corresponds to StepLabelProps.
import { narration } from '@drincs/pixi-vn'

await narration.goNext({})

narration.goNext() is asynchronous, so you can use .then to, for example, disable a "Next" button until the step is complete.

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

// disable next button
narration.goNext({})
    .then((result) => {
        // enable next button
    })

Go back

UI screen

You can find the example of the go back button in the interface examples section.

At every step, the system saves the current state of the game. To go back to the previous step, use the stepHistory.goBack() function.

You must pass a function navigate: (path: string) => void as a parameter. This function will be called with the URL Path or Route of the previous step, so you can navigate to the previous UI screen.

For example, if you use React Router Dom:

import { stepHistory } from '@drincs/pixi-vn'
import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

if (stepHistory.canGoBack) {
    stepHistory.goBack(navigate).then(() => {
        // ...
    })
}

Close labels