Pixi’VN내레이션JS/TS로 내레이션
선택 메뉴
Pixi’VN에서 인터랙티브 선택 메뉴를 구현하고 커스터마이즈하는 방법을 설명합니다. 플레이어가 스토리에 영향을 미치는 결정을 내릴 수 있게 합니다.
UI 화면
선택 메뉴 UI 화면의 예시는 인터페이스 예시 섹션에서 찾을 수 있습니다.
ink
이 메서드는 ink 문법과 함께 사용할 수 있습니다. 여기에서 더 알아보세요.
비주얼 노벨에서 선택 메뉴는 플레이어가 스토리에 영향을 미치는 결정을 내릴 수 있게 합니다.
Pixi’VN에서 플레이어에게 선택을 요청할 수 있습니다. 각 선택은 내러티브 노드 (label)를 시작하거나 선택 메뉴를 닫을 수 있습니다.
플레이어에게 선택 요구하기
플레이어에게 선택을 요구하려면 narration.choices를 StoredChoiceInterface 배열로 설정하세요. StoredChoiceInterface 객체를 생성하려면 다음을 사용하세요:
import {
newChoiceOption,
newCloseChoiceOption,
narration,
newLabel,
} from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
narration.dialogue = "Choose a fruit:";
narration.choices = [
newChoiceOption("Orange", orangeLabel, {}), // by default, the label will be called with "call"
newChoiceOption("Banana", bananaLabel, {}, { type: "jump" }),
newChoiceOption(
"Apple",
appleLabel,
{ quantity: 5 },
{ type: "call" },
),
newCloseChoiceOption("Cancel"),
];
},
() => {
narration.dialogue = "Restart";
},
async (props) => await narration.jump("start", props),
]);가져오기
현재 선택 메뉴를 가져오려면 narration.choices를 사용하세요. StoredChoiceInterface 배열을 반환합니다.
const menuOptions: StoredChoiceInterface[] = narration.choices;요청
선택을 선택하려면 narration.selectChoice를 사용하세요.
const item = narration.choices![0]; // get the first item
narration
.selectChoice(item, {
// Add StepLabelProps here
navigate: navigate, // example
// And the props to pass to the label
...item.props,
})
.then(() => {
// ...
})
.catch((e) => {
// ...
});제거
선택 옵션을 지우려면 narration.choices = undefined로 설정하세요.
narration.choices = undefined;