角色
如何在 Pixi’VN 中定义、使用和自定义角色,包括存储、情感和自定义属性。
什么是 characters? 角色(characters)是出现在视觉小说中的演员。 在 Pixi’VN 中,角色使用 CharacterBaseModel 类或自定义类创建。
初始化
要初始化角色,创建 CharacterBaseModel 类(或您的自定义类)的新实例,并在游戏初始化时将其添加到游戏角色字典中。
建议在项目启动时导入实例。
RegisteredCharacters.add 是必须的,用于将角色保存到游戏中。
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 类的简化实现,以便更好地理解存储在游戏存储中的属性:
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 来创建"带情感的角色":
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自定义类
模板
在所有模板中,Character 类已在 models/Character.ts 文件中定义。 您可以直接使用它或根据需要修改它。
建议创建自己的 Character 类,该类扩展 CharacterStoredClass 并"覆盖"接口 CharacterInterface 以添加、编辑或删除属性或方法。
例如,如果您要创建 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;
}