Pixi'VN - Characters

Pixi’VNでキャラクターを定義、使用、カスタマイズする方法（ストレージ、感情、カスタムプロパティを含む）。

characters とは何ですか？ キャラクター（characters）はビジュアルノベルに登場する俳優です。 Pixi’VN では、キャラクターは CharacterBaseModel クラスまたはカスタムクラスを使って作成されます。

初期化

キャラクターを初期化するには、CharacterBaseModel クラス（またはカスタムクラス）の新しいインスタンスを作成し、ゲームの初期化時にゲームキャラクター辞書に追加します。

プロジェクト起動時にインスタンスをインポートすることを推奨します。

RegisteredCharacters.add はキャラクターをゲームに保存するために必須です。

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

取得

id でキャラクターを取得するには、RegisteredCharacters.get 関数を使用します。

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

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

すべて取得

すべてのキャラクターを取得するには、RegisteredCharacters.values 関数を使用します。

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

const characters = RegisteredCharacters.values();

使用

ink

このメソッドは ink 構文で使用できます。詳細はこちらをご覧ください。

ゲームキャラクターを使用して、例えば現在のダイアログにリンクすることができます。キャラクターの id またはキャラクターのインスタンスを使用できますが、インスタンスを使用することを推奨します。

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

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

編集

ink

このメソッドは ink 構文で使用できます。詳細はこちらをご覧ください。

CharacterBaseModel はストアドクラスであり、そのプロパティはゲームストレージに保存されます。例えば、ゲーム中にキャラクターの名前を変更すると、新しい名前がゲームストレージに保存され、その id に関連付けられます。

キャラクターの id がバージョン間で変更された場合、システムは前の id から新しい id へデータを移動しません。

クラスのインスタンス化時に使用されたプロパティを取得するには、default プロパティを使用できます。

ゲームストレージに保存されるプロパティをより理解するための、CharacterBaseModel クラスの簡略化された実装を以下に示します：

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

    // ...
}

キャラクターの感情

ink

このメソッドは ink 構文で使用できます。詳細はこちらをご覧ください。

同じキャラクターの複数のタイプを持つことは多くの場合に有用です。例えば、キャラクター「Alice」と、「怒りの Alice」のような感情状態に関連するサブタイプです。キャラクターとサブタイプは、アイコンなど一つ以上のプロパティを除いて同じ特性を持ちます。

Pixi’VN では、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

カスタムクラス

テンプレート

すべてのテンプレートで、Character クラスはすでに models/Character.ts ファイルに定義されています。そのまま使用するか、ニーズに合わせて変更できます。

CharacterStoredClass を拡張し、インターフェイス CharacterInterface を「オーバーライド」してプロパティやメソッドを追加・編集・削除する独自の Character クラスを作成することを推奨します。

例えば、Character クラスを作成する場合、プロパティやメソッドを使用するためにインターフェイス CharacterInterface を「オーバーライド」する必要があります。（ファイル pixi-vn.d.ts を参照）

次に、CharacterStoredClass を拡張し CharacterInterface を実装する Character クラスを作成できます。（TypeScript でのクラス作成方法の詳細については、公式ドキュメントをお読みください）

ゲームストレージに値を保存するプロパティを作成するには、Getters/Setters を作成し、this.getStorageProperty()/this.setStorageProperty() メソッドを使用できます。（ファイル 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;
}

キャラクター

初期化

取得

すべて取得

使用

編集

キャラクターの感情

カスタムクラス

On this page