ブラウザ上で遊べるゲームブックを作れる「Web Game Book Maker」


【更新履歴】

  2025/9/9 バージョン1.0公開。
  2026/5/26 バージョン1.1公開。
  2026/5/27 バージョン1.2公開。(AI自動生成を追加)
  2026/5/28 バージョン1.3公開。(ライブラリ、ビューアを追加)
  2026/5/28 バージョン1.4公開。(ツリービュー▶ワークフロー)

画像
ゲーム画面
画像
メイン画面(バージョン1.3)
画像
メイン画面(バージョン1.4)
画像
AIによる自動生成画面
画像
画像生成画面(プレビュー)
画像
画像生成画面(設定)
画像
画像生成画面(パラメータ)
画像
画像生成画面(出力ログ)

・ダウンロードされる方はこちら。↓


《 操作説明 》


・本ツールは、webブラウザ上で動作する
 シナリオ分岐のあるアドベンチャゲームを
 自動生成するためのツールです。

・AIで自動生成することもできますが、
 自分でツリービュー上に
 場面ごとのノードを追加して
 書いていくこともできます。

・html出力の場合は、index.htmlだけで動作します。

・ファイルを分けたい場合は、
 ゲームデータのgame_data.xmlを
 index.htmlから読み込む様な形になります。

・さらに複数のゲームデータに分けて
 リンクによって読み込んで
 ゲームを続けることもできます。

・各場面には、セリフの他にも、
 画像、音声、映像を付けることもできます。

・メニューバーのファイルのところでは、
 編集中のゲームデータが
 xml形式で保存されます。


《 セットアップ手順 》


AIによる自動生成をするには、
 ローカルLLMのインストールか、
 クラウドAPIのAPIキーの取得が必要です。

・ローカルLLMを使用する場合は、
 llama.cppか、ollamaをインストールしておく必要があります。

・また、使用するモデルファイルなども
 別途ダウンロードして、
 設定画面でパスを選択しておく必要があります。

・ollamaを使用する場合は、ollama側でモデルをダウンロードし、
 本ツールの設定画面では、モデルファイル名だけを入力します。

画像を生成するには、StableDiffusion.cppが必要です。

・StableDiffusion.cppをダウンロードしてビルドし、
 設定画面の画像生成タブで
 実行ファイルへのパスを選択して下さい。

・また、画像生成画面においては、
 使用するモデルファイルなどのパスを選択する必要があり、
 これも別途ダウンロードしておく必要があります。

映像をプレビューするには、ffmpegが必要です。

・ffmpegをインストールして、設定画面の
 映像再生タブで、実行ファイルへのパスを選択して下さい。


・このゲームデータのXMLファイルは、
 HTML側のJavaScriptエンジンと連携して動作する
 独自の「ゲームブック形式」の構文ルールを持っています。

・以下に、シナリオを作成・編集するための
 構文規則(リファレンスマニュアル)をまとめました。

ゲームデータXML 構文マニュアル

1. 基本構造


・XMLファイルは、必ず以下の宣言から始まり、
 全体のルート(一番外側のタグ)として <gamebook> を持ちます。↓

<?xml version="1.0" encoding="UTF-8"?>
<gamebook title="ゲームのタイトル">
  <!-- ここにシナリオデータを記述します -->
</gamebook>

2. タグの種類と役割


・ゲームを構成するメインのタグは <start> と <path> の2種類のみです。

<start> (シーン定義・基点タグ)


・物語の始まり、または特定のシーンを定義するタグです。

・ゲーム起動時は、原則として
 一番最初に書かれた <start> タグが読み込まれます。

テキストの記述:

・タグで囲まれた部分に直接テキストを書くと、
 それがゲームの本文として表示されます。

改行とページ送り:

・テキストの改行(Enter)はそのまま反映されます。

4行ごとに自動でページ送り(クリックで次へ進む)が行われます。

<path> (選択肢・分岐タグ)


・プレイヤーに提示する「選択肢」を作り、
 選んだ後の展開を定義するタグです。

・<start> や別の <path> の中に配置(ネスト)することで機能します。

3. 分岐(シナリオの進め方)の2つの方式


・このシステムでは、
 シナリオを分岐させる方法が「ネスト方式」と
 「IDジャンプ方式」の2種類あり、
 自由に組み合わせることができます。

方式A:ネスト(入れ子)方式


・<path> タグの中に、直接、次のシナリオテキストを書き込む方式です。

・短い分岐や、元のシーンに戻らない一本道の分岐に適しています。

<start>
  ここは分かれ道だ。
  <path name="右に行く">
    右は行き止まりだった。
    おしまい。
  </path>
  <path name="左に行く">
    左の道は町へ続いていた。
  </path>
</start>


方式B:IDジャンプ方式


・シーンに id を割り当て、
 選択肢からその id を指定してワープする方式です。

・複雑な分岐、合流、ループ、および
 セーブ機能を有効にするために必須となります。

<start id="scene_forest">
  ここは森の中だ。
  <!-- action属性でジャンプ先のIDを指定 -->
  <path name="町へ向かう" action="scene_town" />
</start>

<!-- id属性でワープ先を定義 -->
<start id="scene_town">
  町に到着した。
</start>

注意: セーブ機能は現在のシーンの id を保存するため、
 セーブさせたい主要なシーンは <start id="..."> で定義し、
 IDジャンプ方式で遷移させることを推奨します。

4. 属性(オプション)一覧


・<start> および <path> タグには、
 以下の属性(設定値)を追加することで、
 画像や音楽の切り替え、
 特殊な動作を行わせることができます。

画像
属性一覧表

※属性が不要な場合は、
 image="" のように空にしておくか、
 属性そのものを省略しても構いません。

5. 記述時のルールと注意点


(1)特殊文字のエスケープ

・XMLの仕様上、
 本文中に以下の記号を直接使うとエラーになり、
 ゲームが起動しなくなります。

・該当する記号を使いたい場合は、
 代替文字(実体参照)を使用してください。

 < (小なり) → &lt;
 > (大なり) → &gt;
 & (アンパサンド) → &amp;

(2)エンディングの作り方

・<path> タグ(選択肢)を1つも配置しなかった場合、
 そのシーンのテキストを読み終えると
 自動的に「おしまい(エンディング画面)」へと遷移します。

(3)メディアの引き継ぎ

・image や video は、
 新しく指定されるまで
 前のシーンのものがそのまま引き継がれて
 表示され続けます。

・背景を消したい場合は
 image="none" などの指定を行ってください。

いいなと思ったら応援しよう!

ピックアップされています

便利なツール

  • 94本

コメント

コメントするには、 ログイン または 会員登録 をお願いします。
ブラウザ上で遊べるゲームブックを作れる「Web Game Book Maker」|古井和雄
word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word

mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1