角色
如何在 Pixi’VN 中定义、使用和自定义角色,包括存储、情感和自定义属性。
What are characters? Characters are the actors that appear in a visual novel. 在 Pixi’VN 中,角色是使用 CharacterBaseModel 类或 自定义类 创建的。
初始化
要初始化一个角色,请创建 CharacterBaseModel 类的新实例(或您的 自定义类),并在游戏初始化时将其添加到游戏角色字典中。
It is recommended to import the instances at project startup, see the src/main.ts file.
要创建 CharacterBaseModel 的新实例,您需要以下参数:
id: A unique identifier (string). 用于在游戏中引用角色(必须是唯一的)。 如果您想创建一个 带有“情感”的角色,您可以传递一个对象。props:一个包含角色属性的对象:name:角色的名字。surname(可选):角色的姓氏。age(可选):角色的年龄。icon(可选):角色的图标图片 URL。color(可选):角色的颜色。
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]);RegisteredCharacters.add 是 必需的,用于在游戏中保存角色。
您还可以创建一个函数来加载角色。 重要的是,在游戏中使用角色之前至少需要调用一次,否则它们将无法使用。
Get
要通过 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
You can use this method with the ink syntax. See more here.
您可以使用游戏角色,例如,将其 链接到当前对话。 您可以使用角色的 id 或角色的实例,但建议使用实例。
export const liam = new CharacterBaseModel('liam_id', {
name: 'Liam',
surname: 'Smith',
age: 25,
icon: "https://example.com/liam.png",
color: "#9e2e12"
});
RegisteredCharacters.add([liam]);narration.dialogue = { character: liam, text: "Hello" }
// or
narration.dialogue = { character: "liam_id", text: "Hello" }编辑
ink
You can use this method with the ink syntax. See more here.
CharacterBaseModel 是一个 存储类,这意味着它的属性保存在 游戏存储 中。
如果角色的名字在游戏中被更改,新名字将保存在游戏存储中并与其 id 关联。
如果 角色的 id 在不同版本之间更改,系统将 不 将与之前的 id 关联的数据迁移到新的 id。
存储在游戏存储中的 CharacterBaseModel 的属性包括:
name:角色的名字。surname:角色的姓氏。age:角色的年龄。
要获取实例化类时使用的属性,您可以使用:
defaultName:角色的名字。defaultSurname:角色的姓氏。defaultAge:角色的年龄。
这里是 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<string>("name", value)
}
// icon property is not stored in the game storage
icon: string = ""
// ...
}角色情感
ink
You can use this method with the ink syntax. See more here.
通常来说,拥有多个类型的同一角色是很有用的。 例如,一个角色 "Alice" 和与她的情感状态相关的子类型,如 "愤怒的Alice"。 角色和子类型具有相同的特征,除了一个或多个属性,例如图标。
使用Pixi’VN,您可以通过传递一个对象而不是id来创建一个 "带有情感的角色",具有以下属性:
id: 已存在角色的id。emotion: 角色的子类(例如角色的情感)。
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自定义类
Templates
在所有模板中,Character类已在文件models/Character.ts中定义。 您可以直接使用它或修改它以满足您的需求。
建议创建您自己的类 Character,该类扩展 CharacterStoredClass 并 "重写" 接口 CharacterInterface 以添加、编辑或删除属性或方法。
例如,如果您想创建一个类 Character,您必须 "重写" 接口 CharacterInterface 以使用您的属性或方法。 (参见文件 pixi-vn.d.ts)
现在您可以创建一个扩展 CharacterStoredClass 并实现 CharacterInterface 的类 Character。 (有关如何在TypeScript中创建类的更多信息,请阅读官方文档)
要创建一个在游戏存储中存储其值的属性,您可以创建获取器/设置器,并使用 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<string>("name", value)
}
private defaultSurname?: string
get surname(): string | undefined {
return this.getStorageProperty<string>("surname") || this.defaultSurname
}
set surname(value: string | undefined) {
this.setStorageProperty<string>("surname", value)
}
private defaultAge?: number | undefined
get age(): number | undefined {
return this.getStorageProperty<number>("age") || this.defaultAge
}
set age(value: number | undefined) {
this.setStorageProperty<number>("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;
}