ink character

Use the characters in ink

You can associate a Pixi’VN character with a dialogue in ink. To do this, you need to create a or more characters in Typescript and, after that, in the ink script, you can use following syntax:

[character_id] + : + SPACE + [text]

:::tabs == start.ink

=== start ===
egg-head: Hello, I'm Egg.
-> DONE

== characters.ts

import { CharacterBaseModel, saveCharacter } from "@drincs/pixi-vn";

export const eggHead = new CharacterBaseModel("egg-head", {
  name: "Egg",
  surname: "Head",
  age: 25,
  icon: "https://pixijs.com/assets/eggHead.png",
  color: "#9e2e12",
});

saveCharacter(eggHead);

== App.tsx

import BackButton from "./components/BackButton";
import NextButton from "./components/NextButton";
import TextInput from "./screens/modals/TextInput";
import NarrationScreen from "./screens/NarrationScreen";

// Remember to import the character file at least once into your project. // [!code focus]
import "./values/characters"; // [!code focus]

export default function App() {
return (
    <>
        <NarrationScreen />
        <TextInput />
        <NextButton />
        <BackButton />
    </>
);
}

:::

::: sandbox {template=lh88tr entry=/src/ink_labels/start.ink,/src/values/characters.ts} :::

Use Character Emotions in ink

You can use the Pixi’VN Character Emotions in ink. To use the character emotions in ink, you need to create a or more characters with an emotion in Typescript and, after that, in the ink script, you can use following syntax:

character_id + @ + emotion

For example, you can associate this character with a dialogue using the following syntax:

character_id + @ + emotion + : + SPACE + text

:::tabs == start.ink

=== start ===
liam@happy: Hi, I'm Liam. I'm very happy today.
-> DONE

== characters.ts

import { CharacterBaseModel, saveCharacter } from "@drincs/pixi-vn";

export const liam = new CharacterBaseModel("liam", {
  name: "Liam",
});

export const liamHappy = new CharacterBaseModel(
  { id: "liam", emotion: "happy" },
  {
    name: "Liam Happy",
  }
);

saveCharacter([liam, liamHappy]);

== App.tsx

import BackButton from "./components/BackButton";
import NextButton from "./components/NextButton";
import TextInput from "./screens/modals/TextInput";
import NarrationScreen from "./screens/NarrationScreen";

// Remember to import the character file at least once into your project. // [!code focus]
import "./character"; // [!code focus]

export default function App() {
return (
    <>
        <NarrationScreen />
        <TextInput />
        <NextButton />
        <BackButton />
    </>
);
}

:::

::: sandbox {template=xm9hj9 entry=/src/ink_labels/start.ink,/src/values/characters.ts} :::

Use Character how variable in ink

Having the ability to rename a character and use their name in dialogues greatly simplifies the development of a Visual Novel. Since the character is an object based on a customizable model, it is not possible to use the character as a variable simply with the {} syntax.

But you can take advantage of the possibility of replacing portions of text and customizing hashtag scripts to implement this feature.

::: sandbox {template=mhs2pd entry=/src/ink_labels/start.ink,/src/values/characters.ts} :::

Use character name in dialogues

To use the character name in dialogues, you can take advantage of the possibility of replacing portions of text. For example, you can use the following method:

:::tabs == main.ts

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

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

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

== start.ink

=== start ===
Hello, [liam_id].
-> DONE

== characters.ts

import { CharacterBaseModel, saveCharacter } from "@drincs/pixi-vn";

export const liam = new CharacterBaseModel('liam_id', {
    name: 'Liam',
    surname: 'Smith',
    age: 25,
    icon: "https://example.com/liam.png",
    color: "#9e2e12"
});

saveCharacter([liam]);

:::

Edit character name in dialogues

To edit the character name in dialogues, you can take advantage of the possibility of customizing hashtag scripts. For example, you can use the following method:

:::tabs == main.ts

import { onInkHashtagScript } from '@drincs/pixi-vn-ink'

onInkHashtagScript((script, convertListStringToObj) => {
    if (script[0] === "rename" && script.length === 3) {
        let character = getCharacterById(script[1])
        if (character) {
            character.name = script[2]
        }
        return true
    }
    return false
})

== start.ink

=== start ===
# rename liam_id Liam
-> DONE

== characters.ts

import { CharacterBaseModel, saveCharacter } from "@drincs/pixi-vn";

export const liam = new CharacterBaseModel('liam_id', {
    name: 'Liam',
    surname: 'Smith',
    age: 25,
    icon: "https://example.com/liam.png",
    color: "#9e2e12"
});

saveCharacter([liam]);

:::