いいからゲームブックを書くんだよ -twineで始めるオンラインゲームブック-

2021年3月27日 01:34

※この記事では、「ゲームブック」を「パラグラフ遷移で物語を追いかける分岐型小説」という意味で使用します。

ゲームブック。
分岐がある小説、という意味では、pixivでも結構な数見かけるのではないでしょうか。ページジャンプ機能を選択肢に利用して展開や結末が変わるアレです。
同じ文章内にパラグラフへのリンクを複数貼り、各パラグラフごとの文章を用意すればオンラインゲームブックは作れます。

私がとある企画でゲームブックを作って発表してみようと思い立ったときも、最初はpixivを使用するつもりでいました。
会話によって展開が変わり、複数の結末が用意されている小説を作るだけなら、同志がアクセスしやすくデザインも読みやすいpixiv小説に置くのが一番だと思ったのです。
しかし、「ゲーム」というからにはちょっとだけこだわってみたい。
具体的に言うと数値の管理がほしい。
特定の数値が上がりすぎるとバッドエンド、みたいな仕様にしてみたい。
でも、往年のゲームブックみたいにキャラクターシートを用意してもプレイヤーからしたら煩雑なだけだし……
0からjavascriptを書いて変数の管理とかできないし……
ティラノスクリプトは最も正解に近そうだけど、画面のデザインから何からしなきゃいけないわけで……
そんな中、interactive fictionを制作するツール「twine」の存在を知りました。

twineでゲームブックを書く大きな利点は次の３つです。
●簡単な操作で直感的に作れる
●変数の管理、変数による分岐が出来る
●javascript製のゲームブックをhtml形式で出力するため、出来上がったものはPCでもスマホでも遊べる
javascriptが出来る人、cssのデザイン技術がある人、英語ができる人にはさらなる展望が開けるツールだというのも強みなのですが、そのへんはなんか悔しいので利点に入れません。
twineそのものがオンラインで執筆できて自動バックアップしてくれる優秀な執筆ツールだというのも個人的には推したいのですが、ただ小説を書くだけならもっといいツールがありそうなのでこれも利点には入れないでおきました。

欠点としては、
●出来上がったものは個人サイトに上げるしかないので、見てもらうには工夫が必要かも
●twine本体は日本語対応してるんだけど、マニュアルやサポートは全部英語！！！！
こんなところでしょうか。
簡単なゲームブックを作るだけなら英語は分からなくても問題ないと思います。
なぜならこれから使うのはピヨピヨな初心者向けの「Chapbook」だからだ。

Chapbookを使おう

https://klembot.github.io/chapbook/guide/

twineで執筆する際は、story fomat（日本語版では「形式」、以下「形式」と記述します）を選ぶことになります。
現時点でデフォルトで設定できるのは、Chapbook、Harlowe、Snowman、Sugercubeの４種類です。
形式ごとに、タグのルールや出来ることが大きく変わります。
従来、twineのデフォルトはHarloweでした。Harloweを使えばエディターとツールバーがついてきて更に色々なことができるのですが、いかんせん覚えることが多すぎます。かなり親切に作ってあって初心者向けなのですが、それでも多すぎます。
Chapbookは出来ることがあまり多くありません。その代わり、非常に簡単に変数管理、変数表示、変数分岐、更には文字入力なども可能です。
この記事では、「Twine2」のオンラインアプリで「Chapbook」を使用して変数分岐のあるゲームブックを作る方法のみを日本語で簡単に説明していきます。

始め方

まずはtwineを開き

https://twinery.org/

Use it onlineをクリック。

twineは日本語に対応しています。languageから日本語を選びましょう。

画面が日本語に切り替わりました。
「形式」をクリックし、「Chapbook」にチェックが入っていることを確認します。

「＋ストーリー」を選択すると

What should your story be named?
(You can change this later.)

要はストーリーのタイトルを聞かれるので、タイトルを入れてください。
タイトルはいつでも変えられるし、日本語でも問題ありません。

執筆開始

作ったストーリーを開きましょう。
緑色のロケットのマークがついた四角いものが出現します。
この四角いものを「パッセージ」と呼びます。大体において、ゲームブックのパラグラフと同じものです。
ロケットのマークがついたところを起点にストーリーが展開していきます。
ロケットのマークがついたパッセージをダブルクリックして、導入の文章を書きましょう。
なお、Chapbookでは、なぜか改行が有効ではありません。
一行一行の最後に心を込めて と記述してください。
ばーっと書いてからCtrl+クリックで全行末選択して を入力するとか、皮算用計算機みたいなアプリを使って一括で入れるとか、やり方は人それぞれです。

君はゲームブックを作ることに決めた。 
どんなゲームブックを作ろうか。

選択肢

次は選択肢を記述しましょう。
選択肢の書き方には2種類あります。
[[選択肢として表示する文章->次のパッセージ名]]
[[選択肢として表示する文章兼次のパッセージ名]]
こんな感じです。
->を使うと選択肢とパッセージ名を分けられるので、複雑な分岐をするときは特に便利です。
今回は->を使わず、選択肢とパッセージ名を同じものにします。
選択肢を記述すると、自動的に次のパッセージを作成してくれます。

[[とにかくすっごい奴]] 
[[変数によって２つの結末に分岐するやつ]]

また、選択肢の前に　>　を入れることでforkスタイルとなり、選択肢により目立つ装飾を施すことができます。これを使用したいときはこちらが参考になると思います。

変数セクション

さて、私が散々欲しがっていたあの数値の管理のお話です。
まず数値に名前を付けましょう。半角アルファベットのみが有効です。これを以降変数名と呼びます。
次にデフォルト値を設定しましょう。
それをパッセージの最初に記述します。
変数名を「point」、デフォルト値を「0」とした場合、こんな感じの記述になります。

point : 0
--

本当にこれだけです。
--の上が「変数セクション(Vars Section)」です。ゲームブック中には表示されません。

true/falseを使用してオンオフの変数、いわゆるフラグを作ることもできます。
更に今回はこれを使って、「絶対やっちゃダメな地雷選択肢」のフラグも管理しておきましょう。「Chapbookでテトリスを作ろうとする」とオン(true)になることにします。
フラグの名前は「mine」です。最初はオフ(false)の状態です。

point: 0
mine: false
--

変数管理と選択肢を備えた最初のパラグラフが完成しました。
右上の「×」をクリックしましょう。内容は自動で保存されています。また、記述した選択肢をタイトルにしたパッセージが現れるのが確認できるでしょう。

数値の変動

選択肢によって、これらの変数を変化させていきます。
今回は「変数によって２つの結末に分岐するやつ」という選択肢を選ぶとpointが1点増える、「とにかくすっごい奴」という選択肢を選んだら変動はなし、ということにしましょう。
変数セクションにこう記述します。

point : point +1
--

現時点でのpointを呼びだして1点追加。それだけです。
変数に変動がない時は、変数セクションを記述する必要はありません。
地雷選択肢を踏んでmineをtrueにするときはこう記述します。

mine: true
--

文字列を変数にしたい場合もあるかもしれません。
その場合は''で文字列を囲んでください。
日本語も有効なようです。
たとえば変数「name」を「James」にしたい場合はこう書きます。

name: 'James'

Chapbookでは名前入力が可能です。最後に簡単に紹介します。

数値の表示

読者に内緒で数値が変動するのも悪くないですが、数値を見せたいときもあると思います。
{}で変数名を囲むと、ゲームブックの本文中に変数の内容が表示されます。

現在のポイント：{point}

パッセージの整列

パッセージが増えてきました。
パッセージは全てドラッグで移動できます。また、グリッドにスナップさせてぴっちり整列させることもできます。左下の上向きの三角マークをクリックして「グリッドにスナップ」を選んでください。
また、パッセージをクリックして「…」を選択することで、画面上で表示されるパッセージのサイズが変更できます。smallでデフォルトサイズ、wideで横2つぶん、tallで縦2つぶん、そしてwideで縦横2つぶんのサイズになります。

テストプレイ

パッセージをある程度執筆したら、テストプレイ機能を使用してみましょう。
右下にある虫アイコンの「テスト」をクリックします。
実際に出力されるゲームブックとほぼ同じ見た目の画面が左に表示されています。

右のカラムで様々なことが確認できます。
State→変数の数値やオンオフが表示されます。
History→パッセージの遷移の履歴が表示されます。また、前のパッセージに戻ることもできます。
Style→ページ全体のデザインを決めるスタイルシートが表示されています。
Note→これ何なのかよくわかってない。何してもエラーになる。[note]タグの中身を表示するのでもないみたいだし……？

全体のデザインを変更する

背景・文字色・選択肢の色等を変更して、より好みのデザインにしてみましょう。
まず、最初のパッセージ(緑色のロケットがついてるやつ)の変数セクションに以下の文字列をペーストしてください。

config.style.page.style: 'shadow'
config.body.transition.name: 'crossfade'
config.style.backdrop: "white"
config.style.page.color: "gray-9 on white"
config.style.page.link.font: "underline"
config.style.page.link.color: "gray-9"
config.style.page.link.lineColor: "red-8"
config.style.page.link.active.color: "red-8 on red-0"
config.style.page.link.active.lineColor: "red-8"

Chapbookのconfigでは、通常のカラーコードは使用しないようです。順に見ていきましょう。
●config.style.page.style: 'shadow'
→本文を何で囲むかを設定します。'none' 'thin-line' 'thick-line' 'shadow'の中から一つ選んで 'shadow'と置き換えてください。順に、囲み線なし、細い線、太い線、影が表示されます。
●config.body.transition.name: 'crossfade'
→ページ切り替え時の効果を設定します。'crossfade' 'fadeInOut' 'none'の中から一つ選んで 'crossfade'と置き換えてください。順に、前のパッセージが消えると同時に次のパッセージが表示される、前のパッセージを消してから次のパッセージが表示される、瞬時にパッセージが切り替わる、といった効果になります。
●config.style.backdrop: "white"
→本文の外の背景色が変更されます。"white"部分にこのページに書かれた色名を入れて置き換えてください。
●config.style.page.color: "gray-9 on white"
→本文の文字色と背景色を同時に設定します。"white"部分に背景色、"gray-9"部分に文字色を、いずれもこのページから選んで置き換えてください。
●config.style.page.link.font: "underline"
→選択肢の装飾を設定します。"bold" "italic" "underline" "small caps"から選んで"underline"に置き換えてください。順に太字、斜体、下線、小文字になります。フォントを変えたり大きさを変えたりも出来ます。guideを参照してください。
●config.style.page.link.color: "gray-9"
→選択肢の文字色を変更します。 "gray-9"部分をこのページから選んで置き換えてください。
●config.style.page.link.lineColor: "red-8"
→選択肢下のラインの色を変更します。"red-8"部分をこのページから選んで置き換えてください。
●config.style.page.link.active.color: "red-8 on red-0"
→選択肢にカーソルを置いた際の文字色と背景色を同時に設定します。"red-0"部分に背景色、"red-8"部分に文字色を、いずれもこのページから選んで置き換えてください。
●onfig.style.page.link.active.lineColor: "red-8"
選択肢にカーソルを置いた際の下線の色を設定します。"red-8"部分をこのページから選んで置き換えてください。

他にも様々な設定が可能です。guideを参照してください。
これらを最初のパッセージに記述することで、全体のデザインが変更できます。

テキストの装飾

さまざまな半角記号などで文面文字を装飾することができます。
_斜体_　*斜体*
__太字__　**太字**
~~小文字~~
<del>取り消し線</del>　
***　セクション分け
* リスト
#数字付きリスト
[align left]・[align center]・[align right]　文章を左・真ん中・右に置く、[continue]で解除

条件分岐

さあ、変数を変動させながら物語を進めたら、いよいよ分岐です。
条件分岐は基本的には本文中に記述します。

特定の条件でのみ現れる文章を付け加えたい場合は、このように記述します。

[if mine]
さあ、テトリスは作れそうかな？ 

[continue]
君は執筆を進めた。

[if mine]の下は、mineがtrueになっている場合表示される文字列です。
このような条件づけにはいくつかの種類があります。
[if mine]　mineがtrueなら下の文章を表示
[unless tookAntidote]　tookAntidoteがfalseなら下の文章を表示
[if monsterDistance < 2]　monsterDistanceが2より少なかったら下の文章を表示
[if hasKey && monsterDistance < 2]　haskeyがtrueでかつmonsterDistanceが2より少なかったら下の文章を表示
[if stringVariable === 'red']　stringVariableがredなら下の文章を表示
[ifnever point === 0] 　pointが0でないなら下の文章を表示

[continue]の下は、条件分岐が終わった後に表示する文章です。
上の例の場合、mineがtrueであってもfalseであっても表示される文章ということにになります。
mineがtrueの場合は"さあ、テトリスは作れそうかな？　君は執筆を進めた。"と表示され、falseの場合は"君は執筆を進めた。"とだけ表示されます。
[continue]ではなく[else]にすると、その下の文章は「すぐ上の条件分岐に当てはまらない場合」にのみ表示されます。
例えば「mineがtrueならバッドエンド1、mineがfalseでかつpointが3より多かったらハッピーエンド、mineがfalseでかつpointが3以下だったらバッドエンド2」という構造にしたい場合、このような書き方になります。

君は執筆を進めた。 
君の最初のゲームブックは…… 

[if mine]
ゲームブックでテトリスを作るのは、やはり難しかったようだ。 
ちょっと設計思想から考え直した方がいいかもしれない。 
**BAD END1** 

[else]
[if point > 3]
完成した！ 
小規模だが、なかなかの出来だ。 
webに公開して、遊んでもらおう。 
**HAPPY END** 

[else]
完成しなかった。 
もう少し手堅く作ったほうが良さそうだ。 
**BAD END2**

完成

非常に単純な変数分岐のみでプレイできるゲームブックが完成しました。
「テスト」からテストプレイをしてみましょう。

左下のストーリータイトルの右の三角から「ファイルに出力」を選びます。

htmlファイルが出力されます。
上のゲームブックを実際に出力したものがこちらになります。

http://cabin.jp/mewoyomo/lets.html

意外と何でもできるChapbook

Chapbookはこのような変数での条件分岐のほかに、こんな機能もあります。詳しくはguideを参照してください。そのうちちゃんと書きたい。
{text input for: 'dogName'}　テキストエリアを作って、入力した文字をdognameにする。{dogname}で入力した文字が表示されます。簡単に名前入力画面ができます。
{dropdown menu for: 'meal', choices: ['Breakfast', 'Lunch', 'Dinner']}　ドロップダウンメニューを作ります。選んだ文字列が自動的にmealになります。性別選択とかに使えるかも。
I enjoy {cycling link for: 'meal', choices: ['Breakfast', 'Lunch', 'Dinner']} the most.　enjoyの後に「Breakfast」というリンクが出現します。これをクリックするごとにLunch、Dinner、Breakfast、Lunch……というふうに順繰りで変化します。表示した文字がそのつどmealになります。
{back link, label: 'Back'}　前のパッセージに戻る「Back」というリンクが出現します。
{reveal link: 'label', text: 'revealed text'}　「label」というリンクをクリックするとその場に「revealed text」という文字列が出現します。tips的な使い方が出来るかな？
また、twineにはページ全体のcss・javascriptを記入するエリアがあります。左下のストーリータイトルの右の三角から確認できるでしょう。
さらに、パッセージの中でcss・javascriptを使用することも可能です。[CSS][JavaScript]というタグを使用してください。

最後に

拙い説明でしたが、ここまでお付きあいいただきありがとうございました。
twine-Chapbookは、そのガイドの英語と同じように非常に簡単で、直感的に作られています。私が未熟な文章で不完全にまとめるほどのことでもないのかもしれませんが、ここから一歩を踏み出せる人が一人でもいればと思い、執筆に踏み切りました。
Chapbookにはまだまだ豊富な機能があります。Harlowe、SnowMan、SugerCubeには更なる無限の可能性が広がっています。すでに詳細なガイドと豊富なディスカッションのログが用意されています。
この記事が少しでもあなたのゲームブック製作のお役に立てたら、とても嬉しいです。