Manage narration flow with labels

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

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

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