ブラウザ上で遊べるゲームブックを作れる「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公開。(ツリービュー▶ワークフロー)
・ダウンロードされる方はこちら。↓
《 操作説明 》
・本ツールは、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の仕様上、
本文中に以下の記号を直接使うとエラーになり、
ゲームが起動しなくなります。
・該当する記号を使いたい場合は、
代替文字(実体参照)を使用してください。
< (小なり) → <
> (大なり) → >
& (アンパサンド) → &
(2)エンディングの作り方
・<path> タグ(選択肢)を1つも配置しなかった場合、
そのシーンのテキストを読み終えると
自動的に「おしまい(エンディング画面)」へと遷移します。
(3)メディアの引き継ぎ
・image や video は、
新しく指定されるまで
前のシーンのものがそのまま引き継がれて
表示され続けます。
・背景を消したい場合は
image="none" などの指定を行ってください。



コメント