VNLEガイド

Phaser

Phaser 3.90 · JavaScript

まず、一文を画面に表示してみましょう。この小さなサンプルは「港の鍵」の実際のエクスポートを直接読み込みます。会話をすべて実行する仕組みではありません。表示できたら、データをゲームのUIにつなげていきます。

1 ・ファイルやシーンの準備

同じWebプロジェクトにindex.html、first-text.js、story/story.jsonを作ります。scriptタグで、first-text.jsより先にPhaser 3.90を読み込みます。付属のexamples/phaser/phaser.min.jsを使えます。HTMLをダブルクリックせず、ローカルWebサーバー経由で開いてください。

story.json · エクスポートファイルの説明

2 · 最初のテキストを表示

<!doctype html>
<html lang="en"><meta charset="utf-8"><title>First VNLE text</title>
<script src="phaser.min.js"></script>
<script src="first-text.js"></script></html>

Phaser 3.90 · Phaserのライセンス

class FirstText extends Phaser.Scene {
  preload() {
    this.load.json('story', 'story/story.json');
    this.load.on('loaderror', file => console.error('Cannot load', file.src));
  }
  create() {
    const story = this.cache.json.get('story');
    if (!story) { this.add.text(24, 24, 'Cannot load story.json'); return; }
    const locale = 'en';
    const id = 'fd7b61a3-8233-4ba7-8f77-b88b119a91bf';
    const record = story.content.texts[id];
    const translation = story.content.translations[locale]?.[id];
    const message = translation ? translation.message : record.sourceMessage;
    const text = message.segments.map(segment => {
      if (segment.kind !== 'text') throw new Error('Text-only example');
      return segment.text;
    }).join('');
    this.add.text(24, 24, text, {fontSize: '24px', wordWrap: {width: 720}});
  }
}
new Phaser.Game({type: Phaser.AUTO, width: 800, height: 300, scene: FirstText});

「Welcome to the harbour. I am Mira.」と表示されれば成功です。locale = "de"、または言語パラメーターをdeにすると「Willkommen im Hafen. Ich bin Mira.」になります。言語が見つからない場合は原文を使います。このサンプルはテキストセグメントに対応しており、プレースホルダーを黙って捨てることはありません。

3 · 一文の表示から会話へ

上の固定テキストIDは、最初の動作確認用です。実際のゲームでは、story-index.jsonからflowRef/entryRefを選び、execution.entries[entryRef].nodeRef、続いてexecution.nodes[nodeRef]を読みます。現在の会話ノードからtext.textRefとspeakerRefを取得します。次へ進む方法はノードのkindによって異なります。

名前と会話にはText.setText()を使います。回答はText.setInteractive()とpointerdownで処理し、各選択肢IDを保持します。EndではsetVisible(false)で会話を隠し、入力も無効にします。ゲームのシーン自体は動かし続けます。

この言語で回答と所持金の判定を確認する

選択肢のデータを読む

読み込み後にstoryを使える場所へ、このコード片を挿入します。RPG Makerではconst story = $gameTemp.vnleExample.story;で取得します。確認用にIDを出力するので、その出力処理を回答ボタンに置き換えてください。対象は港の2つの回答と、その後の所持金判定です。あらゆるノードを実行できる汎用処理ではありません。

// story is already loaded. Keep each optionId on its answer button.
const choice = story.execution.nodes['42edfff8-b8fe-46bf-ae0d-9e2347b6e726'];
for (const optionId of choice.optionOrder) {
  const option = choice.options[optionId];
  console.log(optionId, option.text.textRef); // Resolve text, then create your button.
}
// Inspect the actual purchase check. This particular node is Gold >= 5.
const branch = story.execution.nodes['c1c3c372-0a73-4cd0-851d-ede59d5709bb'];
const gold = 10; // Repeat with 2, using your current game value.
const next = gold >= branch.condition.right.value.value ? branch.whenTrue : branch.whenFalse;
console.log(next.nodeRef);

所持金が10ならnextは「Pay five gold」、2なら「Not enough gold」を指します。実際のゲームでは、選択されたルートがこのノードに到達したときだけ判定してください。各回答には、それぞれの進行先があります。

4 · 自分の画像を対応付ける

この補足コードでは、現在の会話オブジェクトをnodeとし、コメントに記載したUI要素が存在することを前提とします。C++とMonoGameでは、speakerRefはすでにSpeakerIdまたはspeakerIdとして読み込まれています。キーはミラの実際のキャラクターIDです。画像の名前と配置先はゲーム側で決めます。指定箇所に各行を挿入してください。

// preload(): the key is a real VNLE character ID; the file is yours.
this.load.image('807b2957-7bab-4a28-83a4-1f3d1589bbc2', 'assets/portraits/mira.png');
// create(): keep one image for the dialogue bar.
this.portrait = this.add.image(100, 180, '807b2957-7bab-4a28-83a4-1f3d1589bbc2').setVisible(false);
// When showing a dialogue; node is your current dialogue object:
const key = node.speakerRef;
this.portrait.setVisible(Boolean(key && this.textures.exists(key)));
if (key && this.textures.exists(key)) this.portrait.setTexture(key);

話者名は、会話文と同様にcontent.characters[speakerRef].nameTextRefから取得します。画像の対応がない場合は、前のポートレートを隠すか代替画像を表示します。画像は言語によって切り替わりません。

完全なエクスポートに含まれる画像参照を使う

5 · ゲームに必要なファイルを同梱する

JSONと画像は公開するWebフォルダーに含めます。ローダーの基準パスを設定しない場合、パスはHTMLからの相対パスです。preloadで読み込みを予約し、createでデータを使います。読み込み失敗も確認してください。

結果を確認する

英語とドイツ語の挨拶が正しく表示され、対応していない言語では英語に戻ることを確認します。
進行処理を追加したら、両方の回答、所持金10と2、サブストーリーからの復帰、Endを試してください。
ビルドしたゲームをプロジェクトフォルダーの外で実行します。JSON、フォント、ポートレートがそこでも読み込めることを確認してください。

公式ドキュメント

この実装で使用するAPIと設定の資料：