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 thelabel
. The interface corresponds toStepLabelProps
.
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(() => {
// ...
})
}