あなたのビジュアルノベルを作成
お気に入りのJSフレームワークで素晴らしいビジュアルノベルを作ろう
Pixi’VNは非常に柔軟で強力な2Dゲームエンジンです。JavaScript/TypeScriptとPixiJSを基盤としています。
1
作る。
コマンドで新しいゲームを初期化します。
Terminalnpm create pixi-vn@latest ◇ Project name│ My Game│◆ Select the type of game you want to create:│ ● Visual Novel│ ○ Game Engine
2
書く。
好きなナラティブ言語でストーリーを書きましょう。
=== start ===
# show image bg bg01-hallway
# show imagecontainer james [m01-body m01-eyes-smile m01-mouth-neutral01] xAlign 0.5 yAlign 1 with movein direction right speed 300
james: You're my roommate's replacement, huh?
What is your name?
# rename mc { _input_value_ }
const startLabel = newLabel("start", [
async () => {
await showImage("bg", "bg01-hallway");
await showImageContainer("james", ["m01-body", "m01-eyes-smile", "m01-mouth-neutral01"], { xAlign: 0.5, yAlign: 1, });
narration.dialogue = { character: james, text: `You're my roommate's replacement, huh?` };
},
() => narration.dialogue = "What is your name?",
{ labels: { start: [
{ operations: [
{ type: "image", alias: "bg", operationType: "show", url: "bg01-hallway" },
{ type: "imagecontainer", alias: "james", operationType: "show", urls: ["m01-body", "m01-eyes-smile", "m01-mouth-neutral01"], props: { xAlign: 0.5, yAlign: 1 }, transition: { type: "movein", props: { direction: "right", speed: 300 }}}
], goNextStep: true },
{ dialogue: "james: You're my roommate's replacement, huh?" },
{ dialogue: "What is your name?" },
{ operations: [{ type: "operationtoconvert", values: ["rename mc ", { type: "value", storageOperationType: "get", storageType: "storage", key: "_input_value_" } ] }], goNextStep: true }
]}};
start.ink
animations-labels.ts
多様な設計の可能性
さらに多層的に。
2DレンダリングはPixiJSとPixi’VNコンポーネントに完全に基づいています。PixiJSやHTML（React、Vueなど）のレイヤーを追加して革新的なUIを作成できます。
