Pixi'VN - Characters

Come definire, usare e personalizzare i personaggi in Pixi’VN, inclusi archiviazione, emozioni e proprietà personalizzate.

Cosa sono i characters? I personaggi sono gli attori che appaiono in una visual novel. In Pixi’VN, i personaggi vengono creati usando la classe CharacterBaseModel o una classe personalizzata.

Inizializzazione

Per inizializzare un personaggio, crea una nuova istanza della classe CharacterBaseModel (o della tua classe personalizzata) e aggiungila al dizionario dei personaggi del gioco durante l'inizializzazione del gioco.

È consigliato importare le istanze all'avvio del progetto.

RegisteredCharacters.add è obbligatorio per salvare i personaggi nel gioco.

content/characters.ts

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]);

Ottenere

Per ottenere un personaggio tramite il suo id, usa la funzione RegisteredCharacters.get.

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

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

Ottenere tutti

Per ottenere tutti i personaggi, usa la funzione RegisteredCharacters.values.

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

const characters = RegisteredCharacters.values();

Usare

ink

Puoi usare questo metodo con la sintassi ink. Vedi di più qui.

Puoi usare un personaggio del gioco, ad esempio, per collegarlo al dialogo corrente. Puoi usare l'id del personaggio o l'istanza del personaggio, ma è consigliato usare l'istanza.

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

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

Modificare

ink

Puoi usare questo metodo con la sintassi ink. Vedi di più qui.

CharacterBaseModel è una classe memorizzata, il che significa che le sue proprietà vengono salvate nell'archivio del gioco. Ad esempio, se cambi il nome del personaggio durante il gioco, il nuovo nome verrà salvato nell'archivio del gioco e collegato al suo id.

Se l'id del personaggio viene modificato da una versione all'altra, il sistema non sposterà i dati collegati al precedente id verso il nuovo id.

Per ottenere le proprietà usate durante l'istanziazione della classe, puoi usare le proprietà default.

Ecco un'implementazione semplificata della classe CharacterBaseModel per meglio comprendere le proprietà memorizzate nell'archivio del gioco:

CharacterBaseModel.ts

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 = "";

    // ...
}

Emozioni dei personaggi

ink

Puoi usare questo metodo con la sintassi ink. Vedi di più qui.

È spesso utile avere più tipi dello stesso personaggio. Ad esempio, un personaggio "Alice" e un sottotipo legato al suo stato emotivo, come "Alice arrabbiata". Il personaggio e il sottotipo hanno le stesse caratteristiche, eccetto per una o più proprietà, come l'icona.

Con Pixi’VN, puoi creare un "personaggio con un'emozione" passando un oggetto invece dell'id:

content/characters.ts

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]);

main.ts

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 personalizzata

Modelli

In tutti i template, la classe Character è già definita nel file models/Character.ts. Puoi usarla direttamente o modificarla in base alle tue esigenze.

È consigliato creare la propria classe Character che estende CharacterStoredClass e "sovrascrive" l'interfaccia CharacterInterface per aggiungere, modificare o rimuovere proprietà o metodi.

Ad esempio, se vuoi creare una classe Character, devi "sovrascrivere" l'interfaccia CharacterInterface per usare le tue proprietà o metodi. (Vedi il file pixi-vn.d.ts)

Ora puoi creare una classe Character che estende CharacterStoredClass e implementa CharacterInterface. (Per ulteriori informazioni su come creare una classe in TypeScript, leggi la documentazione ufficiale)

Per creare una proprietà che memorizza il suo valore nell'archivio del gioco, puoi creare Getters/Setters e usare i metodi this.getStorageProperty()/this.setStorageProperty(). (Vedi il file 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;
}

Personaggi

Inizializzazione

Ottenere

Ottenere tutti

Usare

Modificare

Emozioni dei personaggi

Classe personalizzata

On this page