無料でゲームブックやYes/Noチャートをプログラミングの知識なしで作成できる「Twine」を使ってみた

選択肢を表示して結果を分岐させるインタラクティブなストーリー分岐型小説やYes/Noチャート・ゲームブックなどを、簡単に作成できるツールが「Twine」です。Twineはプログラミングの知識なしで使うことができ、オープンソースとなっており無料でダウンロードできるので、どんなツールなのか実際に使って確かめてみました。

Twine / An open-source tool for telling interactive, nonlinear stories
https://twinery.org/

実際にTwineでYes/Noチャートを作成すると、ブラウザ上で以下のムービーのように表示されます。

ゲームブック制作支援ツール「Twine」を使って作ったHTMLファイルはこんな感じ - YouTube


目次：
◆インストール手順
◆Twineの使い方

◆インストール手順
まずはtwineの公式サイトにアクセスし、赤枠部分をクリックしてTwineをダウンロード

「ファイルを保存」をクリック

ダウンロードが完了すると、以下の画像のようなアイコンが表示されるのでクリック

「実行」をクリック

個人で使用する場合は、「現在のユーザーのみにインストールする」を選択して「次へ」をクリック

「参照」をクリックし保存先を選択したら、「インストール」をクリック

「完了」をクリックしたらインストールは完了です。

◆Twineの使い方
twineを起動すると、簡単なチュートリアルが表示されます。必要なければ「Skip」をクリック。

Twineは日本語に対応しているので、まずは言語設定を変更します。「Language」をクリック

日本語をクリックすれば、一部のテキストを除いて日本語表示に変更されます。

ストーリーを作成するには「＋ストーリー」をクリック

ストーリー名を入力して「＋Add」をクリック。記事作成時点では、ストーリー追加のダイアログは日本語化に対応していませんでした。

ストーリーを作成すると、デフォルトで1つパッセージが作成されています。編集するにはパッセージをダブルクリック

タイトルとパッセージの内容を作成します。テキストボックスには「Double-click this passage to edit it.」(編集するためにはパッセージをクリック)と書かれているので、この文字列をダブルクリックすると……

パッセージの内容を空欄にすると、どのように入力するかの説明が表示されます。

試しにタイトルを「Q1」、内容を以下のように編集してみました。「 [[]] 」で囲った内容はリンクになり、「 -> 」で指した先へ遷移します。たとえば「 [[はい->Q2]] 」と入力した場合、「はい」をクリックするとQ2というタイトルのパッセージに移動するリンクが作成されるというわけ。右上の「×」をクリックすると内容が保存され、パッセージを閉じることができます。

Q1のパッセージを閉じると「Q2」「Q3」のパッセージが自動で作成されます。遷移元と遷移先のパッセージは矢印でつながれ、遷移の関係が分かりやすく表示されます。

作ったパッセージを実行する場合は「プレイ」をクリック

実際にブラウザ上でどのように操作できるかは以下のムービーから確認できます。

ゲームブック制作支援ツール「Twine」を使って作ったHTMLファイルはこんな感じ - YouTube


リンクがあるテキストは、デフォルトでは青で表示されます。

前回表示したパッセージへは赤枠の矢印をクリックすることで戻ることができます。

質問に「はい」「いいえ」で答えるYes/Noチャートだけでなく、選択肢によって展開が変わるノベルゲームのようなストーリーを作ることもできます。

パッセージを1回クリックしてDelキーを押すか、左下に表示されるゴミ箱マークをクリックするとパッセージを削除できます。

ストーリーの開始位置を変更するには、パッセージ右下に表示される「…」をクリックして「Start Story Here」をクリック

「Start Story Here」の下にある「Small」「Wide」「Tall」「Large」をクリックすると、パッセージの大きさを変更することができます。デフォルトではSmallになっています。

赤枠部分は検索ボックスになっており、検索したいテキストを入力すると、該当するテキストを含むパッセージが黄色で表示されます。

「＋パッセージ」をクリックすると、新規のパッセージを作成できます。

作成したストーリーはHTMLファイルで出力することが可能。出力するにはまずストーリー名をクリック

「ファイルに出力する」を選択

ファイル名を入力して「保存」をクリックするとHTMLファイルとして出力することができます。

プログラミングの知識がほとんどなくても、簡単なゲームブックを作成することができますが、パッセージ内にコードを書き込むことで、背景や文字色を変更したり、画像や音楽を挿入することもでき、ビジュアルノベルのようなものを作ることも可能です。デフォルトのコードについてのマニュアルは以下から確認できます。

Harlowe 3.1.0 manual
https://twine2.neocities.org/