Pixi’VN

Appearance

Replace portions of text in ink ​

In native ink it is possible to inject variables in the text as in the following example Hello, {name}. But in case you need to use a property of an object that is in the storage or if you want to use the value of a JS/TS function, you cannot use the following syntax { key }.

In Pixi’VN ink you can use the following syntax to replace the text:

ink
What do you want, [alice]?
* Talk to \[bob\]

In this case Pixi’VN checks if there is a value linked to the keys alice and bob. If there is a value linked to the key alice, the text [alice] will be replaced by the value, same for the key bob.

To assign a value to a key you can use the following 2 methods:

Use onReplaceTextAfterTranslation ​

You can override the function onReplaceTextAfterTranslation to assign a value to a key. This function is called after the translation of the text and have how parameter the key to replace and return the value to replace or undefined if the key does not need to be replaced (so the key will be displayed with the brackets [key]).

ts
import { onReplaceTextAfterTranslation } from '@drincs/pixi-vn-ink'
import { getCharacterById } from "@drincs/pixi-vn";

onReplaceTextAfterTranslation((key) => {
    if (key === 'bob') {
        return 'Bob'
    }

    let character = getCharacterById(key)
    if (character) {
        return character.name
    }

    // if return undefined, the system will not replace the character id
    return undefined
})

Use onReplaceTextBeforeTranslation ​

You can override the function onReplaceTextBeforeTranslation to add a script that can be interpreted by the translation library used (for example i18next).

ts
import { onReplaceTextBeforeTranslation, onInkTranslate } from '@drincs/pixi-vn-ink'
import { useTranslation } from "react-i18next";
import { alice, bob } from "../values/characters"

const { t } = useTranslation(["narration"]);

onInkTranslate((text) => {
    return t(text, { 
        alice: alice.name,
        bob: bob.name
    })
})

onReplaceTextBeforeTranslation((key) => {
    return `{{${key}}}`
})