Pixi’VN내레이션JS/TS로 내레이션
대화
Pixi’VN에서 대화 객체를 사용, 커스터마이즈 및 관리하는 방법(글루 및 UI 통합 포함).
UI 화면
내러티브 대화 UI 화면 예시는 인터페이스 예시 섹션에서 확인할 수 있습니다.
대화란 무엇인가요? 두 명 이상의 캐릭터가 대화하는 모습을 표현한 서면 형식의 구성물입니다.
Pixi’VN에서 dialogue는 현재 누가 무엇을 말하고 있는지에 대한 정보를 담고 있는 객체입니다. 그 기능은 더 폭넓게 활용될 수 있으며, 독백, 혼잣말, 또는 플레이어에게 메시지를 표시하는 등 다른 목적으로도 사용할 수 있습니다. 그러므로 이를 캐릭터와 연결할 수 있는 텍스트로 이해하는 것이 더 적절합니다.
설정
현재 대화를 설정하려면 narration.dialogue를 사용할 수 있습니다.
import { narration, newLabel } from "@drincs/pixi-vn";
import { eggHead } from "@/content/characters";
export const startLabel = newLabel("start", [
// A simple dialogue with only text, without a character
() => (narration.dialogue = "Hello, world!"),
// A dialogue with a character
() => {
narration.dialogue = {
character: eggHead,
text: "My name is ${eggHead.name}!",
};
},
// A dialogue with a character, but the character is not defined in the characters list
() => {
narration.dialogue = {
character: "Narrator",
text: "This is a narration without a character.",
};
},
]);가져오기
현재 대화를 가져오려면 narration.dialogue를 사용합니다. 반환값은 DialogueInterface입니다.
const currentDialogue: DialogueInterface = narration.dialogue;삭제
현재 대화를 지우려면 narration.dialogue를 undefined로 설정합니다.
narration.dialogue = undefined;커스텀 클래스
DialogueInterface에 추가 속성을 더해 대화 인터페이스를 커스터마이즈할 수 있습니다. 예를 들어, 텍스트 색상을 변경하기 위한 color 속성을 추가할 수 있습니다.
이를 위해 .d.ts 파일에서 DialogueInterface 인터페이스를 "오버라이드"합니다:
declare module "@drincs/pixi-vn" {
interface DialogueInterface {
color?: string;
}
}