Personnages

Que sont les characters ? Les personnages sont les acteurs qui apparaissent dans un roman visuel. Dans Pixi’VN, les personnages sont créés à l'aide de la classe CharacterBaseModel ou d'une classe personnalisée.

Initialisation

Pour initialiser un personnage, créez une nouvelle instance de la classe CharacterBaseModel (ou de votre classe personnalisée) et ajoutez-la au dictionnaire de personnages du jeu lors de l'initialisation du jeu.

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

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

export const emma = new CharacterBaseModel("emma", {
    name: "Emma",
    surname: "Johnson",
    age: 23,
    icon: "https://example.com/emma.png",
    color: "#9e2e12",
});

RegisteredCharacters.add([liam, emma]);

Obtenir

Pour récupérer un personnage par son id, utilisez la fonction RegisteredCharacters.get.

import { RegisteredCharacters } from "@drincs/pixi-vn";

const liam = RegisteredCharacters.get("liam");

Récupérer tous

Pour récupérer tous les personnages, utilisez la fonction RegisteredCharacters.values.

import { RegisteredCharacters } from "@drincs/pixi-vn";

const characters = RegisteredCharacters.values();

Utiliser

Vous pouvez utiliser un personnage du jeu, par exemple, pour le lier au dialogue actuel. Vous pouvez utiliser l'id du personnage ou l'instance du personnage, mais il est recommandé d'utiliser l'instance.

import { liam } from "@/content/characters";

narration.dialogue = { character: liam, text: "Hello" };
// or
narration.dialogue = { character: "liam_id", text: "Hello" };

Modifier

CharacterBaseModel est une classe stockée, ce qui signifie que ses propriétés sont sauvegardées dans le stockage du jeu. Par exemple, si vous modifiez le nom du personnage pendant le jeu, le nouveau nom sera sauvegardé dans le stockage du jeu et lié à son id.

Pour obtenir les propriétés utilisées lors de l'instanciation de la classe, vous pouvez utiliser les propriétés default.

Voici une implémentation simplifiée de la classe CharacterBaseModel pour mieux comprendre les propriétés stockées dans le stockage du jeu :

export default class CharacterBaseModel
    extends StoredClassModel
    implements CharacterBaseModelProps
{
    constructor(id: string, props: CharacterBaseModelProps) {
        super();
        // ...
        this.defaultName = props.name;
        this.icon = props.icon;
        // ...
    }

    // name property is stored in the game storage
    private defaultName: string = "";
    get name(): string {
        return this.getStorageProperty<string>("name") || this.defaultName;
    }
    set name(value: string) {
        this.setStorageProperty("name", value);
    }

    // icon property is not stored in the game storage
    icon: string = "";

    // ...
}

Émotions des personnages

Il est souvent utile d'avoir plusieurs types du même personnage. Par exemple, un personnage « Alice » et un sous-type lié à son état émotionnel, comme « Alice en colère ». Le personnage et le sous-type ont les mêmes caractéristiques, sauf pour une ou plusieurs propriétés, telles que l'icône.

Avec Pixi’VN, vous pouvez créer un « personnage avec une émotion » en passant un objet à la place de l'id :

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

export const alice = new CharacterBaseModel("alice", {
    name: "Alice",
    icon: "https://example.com/alice.png",
    color: "#9e2e12",
});

export const angryAlice = new CharacterBaseModel(
    { id: "alice", emotion: "angry" },
    {
        icon: "https://example.com/angryAlice.png",
    },
);

RegisteredCharacters.add([alice, angryAlice]);

console.log(alice.name); // Alice

alice.name = "Eleonora";
console.log(alice.name); // Eleonora
console.log(angryAlice.name); // Eleonora

angryAlice.name = "Angry Eleonora";
console.log(alice.name); // Eleonora
console.log(angryAlice.name); // Angry Eleonora

Classe personnalisée

Il est recommandé de créer votre propre classe Character qui étend CharacterStoredClass et « surcharge » l'interface CharacterInterface pour ajouter, modifier ou supprimer des propriétés ou des méthodes.

Par exemple, si vous souhaitez créer une classe Character, vous devez « surcharger » l'interface CharacterInterface pour utiliser vos propriétés ou méthodes. (Voir le fichier pixi-vn.d.ts)

Vous pouvez maintenant créer une classe Character qui étend CharacterStoredClass et implémente CharacterInterface. (Pour plus d'informations sur la création d'une classe en TypeScript, lisez la documentation officielle)

Pour créer une propriété qui stocke sa valeur dans le stockage du jeu, vous pouvez créer des Getters/Setters et utiliser les méthodes this.getStorageProperty()/this.setStorageProperty(). (Voir le fichier Character.ts)

import { CharacterInterface, CharacterStoredClass } from "@drincs/pixi-vn";

export class Character
    extends CharacterStoredClass
    implements CharacterInterface
{
    constructor(
        id: string | { id: string; emotion: string },
        props: CharacterProps,
    ) {
        super(
            typeof id === "string" ? id : id.id,
            typeof id === "string" ? "" : id.emotion,
        );
        this._icon = props.icon;
        this._color = props.color;
        this.defaultName = props.name;
        this.defaultSurname = props.surname;
        this.defaultAge = props.age;
    }

    // Not stored properties

    readonly icon?: string;
    readonly color?: string | undefined;

    // Stored properties

    private defaultName?: string;
    get name(): string {
        return (
            this.getStorageProperty<string>("name") ||
            this.defaultName ||
            this.id
        );
    }
    set name(value: string | undefined) {
        this.setStorageProperty("name", value);
    }
    private defaultSurname?: string;
    get surname(): string | undefined {
        return (
            this.getStorageProperty<string>("surname") || this.defaultSurname
        );
    }
    set surname(value: string | undefined) {
        this.setStorageProperty("surname", value);
    }
    private defaultAge?: number | undefined;
    get age(): number | undefined {
        return this.getStorageProperty<number>("age") || this.defaultAge;
    }
    set age(value: number | undefined) {
        this.setStorageProperty("age", value);
    }
}

interface CharacterProps {
    /**
     * The name of the character.
     */
    name?: string;
    /**
     * The surname of the character.
     */
    surname?: string;
    /**
     * The age of the character.
     */
    age?: number;
    /**
     * The icon of the character.
     */
    icon?: string;
    /**
     * The color of the character.
     */
    color?: string;
}