ゲームブック投稿サイト GameBook.xyz をリニューアルしました。

こんにちは。

ゲームブック投稿サイトの管理者です。

GameBook.xyz

長らくかかっていた作業が終わり、8月13日にローンチ出来ました。

専門的なことを言うと、リニューアル前のサイトはWordPressをベースに作成しており、今回は別のフレームワークを利用しています。

その違いや特徴を書いていきたいと思います。

パラグラフの取り扱い

ゲームブックの最大の特徴は、読者が各場面で選択肢を選び、次の行動を選ぶというアドベンチャーゲームである点です。

その運用にパラグラフと言う概念は欠かせず、パラグラフ単位で読者は行動します。

パラグラフ同士の区別に、ページ番号ならぬパラグラフ番号が割り当てられるわけですが、今回これは生かしました。

実は、パラグラフ番号って電子媒体になると要らなくなるものなのです。

実際の例としてはinkleが提供しているinkle Writerでゲームブックを作成するケース。

ゲームブック作家はinkle Writerで作品を制作し、inkleに見てもらいます。

その出来栄え如何でinkleが気に入ったらKindle版がリリースされるのですが、そこではパラグラフ番号はなく、リンクでパラグラフ遷移するような仕組みになっています。

1980年代の読者はペラペラと飛び先のパラグラフ番号までページをめくったものですが、電子媒体ではリンクがその代替となりました。

なので、パラグラフ番号をなくそうと思えばなくせましたが、敢えて生かしました。

今までのゲームブックとの互換性(?)を保つという目的、というよりは、新しい機能のためです。

足跡機能

紙媒体と電子媒体の大きな違いは電子はインターネットに繋げられるという点。

これを利用すれば、作品で読者はどのような足取りをしたのか記録に残せるのです。

ゲームブック作家の皆さんとしては、読者がどのような選択肢を選んだのか知れるもんなら知りたいんじゃないでしょうか。

せっかく苦労して作り上げた作品。

自分の思い通りの動きをしている読者をみたら、喜びも一入ですよね。

ま、逆にこれ、読者も見られるようになったらネタバレなどになってしまうので、制作した本人しか見られないようになっていますのでご安心を。

↑こんな感じで見られます。

パラグラフのシャッフル不要

紙媒体のゲームブックはパラグラフはシャッフルされたような状態でした。

つまり、冒頭で1をみて、次に移動するのは2や3というパターンは稀ということです。

今見ているパラグラフに関連する内容が書かれたパラグラフが次のページにあると、それはネタバレになっちまいます。

そこで1980年代のファイティング・ファンタジーシリーズは、トランプのカードがきられて(くられて)いるかの如くパラグラフの並びをランダムにしたのでした。

これはゲームブック作家としては結構面倒臭い作業です。

やらないでいいものならやりたくはないでしょう。

解決策は、読者には今読んでいるパラグラフ以外は見せないようにすればいい。

そして選択肢を選んだら、その選んだパラグラフだけが表示される。

以下その繰り返し。

これで制作が楽になりましたね。

タップ一つで次のと飛び先

これも電子書籍ではおなじみの機能です。

なのでもうちょっと押しやすく、ボタン型にしました。

スマホでも読み進めやすい仕様です。

上記の場合、最初のパラグラフ番号2の表示は¶記号と半角数字3桁で

¶002

と記載します。

飛び先である4,3,1,5に関しては [[ | ]] と言う(大かっこ、縦線)記号を使います。

[[ボタンの文章|飛び先パラグラフ番号]]

[[東へ進む →|004]]

こちらも数字は半角3桁で記載すれば、プレイするとき自動でボタンが出現します。

使い慣れたツールからコピペで

今回のサイトの特徴は、本文を規則に則って全て入力したら、自動でボタン生成されたり、パラグラフが一つずつ表示されるようになっているところです。

ただその分、CMSの機能は極限までシンプルなので、いつもあなたが使い慣れているWordだったり、エディタであったり、ワープロツールを使ったほうがいいでしょう。

完成した作品を投稿サイトの該当欄にコピペして下さい。

パラグラフジャンプ

今回のゲームブック投稿サイトはそれなりに良い面がありますが、問題もあります。

パラグラフジャンプという概念。

読者がとあるミッションをクリアしたらフラグのように番号を与えられたりします。

その番号をメモっておき、ここぞという場面で力を発動させたいときに、与えられた番号を何らかの計算を施して、答えのパラグラフ番号へ移動せよと言う展開。

これはズルが出来ず、ミッションをクリアしてフラグ番号を知らないと該当パラグラフへ移動出来ないという仕組みです。

この機能は今回盛り込んでおりません。

あと、今後も盛り込まないかもしれません。

例えば、このバンカーズクエストという作品は、上記で述べたようにフラグ管理に番号を読者に伝えるのではなく、ストレートに「あなたは何々したか?」と聞いてきます。

その質問内容によってはそれがネタバレじゃないかなとも思いますが、でもクリアしたかの判別、分岐はそれでよいのではないでしょうか?

ストレートな質問ではなく、物語に矛盾するような描写がある、例えば死んだはずのキャラが話しかけてくるとか。

選択肢でその話しかけに普通に応じるか、驚くという選択肢を設けるとか。

死んでるんだから驚くという選択肢がフラグの代わりだという風にもできそうですよね。

また、パラグラフジャンプはページ総当りで該当ページを紙媒体のようにペラペラめくる所作ですからユーザーエクスペリエンスとしては良くはないと思うのですよ。

読者にとっては煩わしいんじゃないかなと。

(この点、幻想迷宮書店さんはこの辺の取り組みをいい感じで行ってます)

前述の通り、ゲームブック制作の技術でクリアしていくべきことかなと思います。

指セーブ

ま、あと困っているのがいわゆる「指セーブ」ですね。

選択肢で迷ったら、指で挟んでおいて他の選択肢のページを覗いてみるというちょっとずるいやり方。

現状のところ非対応です。

でもそれは公式に認められている遊び方なのです。

指をこのように挟むことで超ズルいことが出来るんだよね。イアン・リビングストン先生は別の見解をお持ちに違いない。

問題ないぜぇ。5本指のブックマークは世界中で広く使われているんだぜぇ。

※注 筆者の英検2級レベルの英語力で翻訳しています…!

何と……!

あの、イアン・リビングストン先生が5本まで指セーブ大丈夫って言ってるんですよ。

その機能は盛り込みたかったのですが、要検討課題ですね。

出来るかな??

実のところ、読者が作品を途中でやめて続きは明日と言った場合……。

それは読者にとっては重要な機能ですよね……。

多分ですけどブラウザのタブを閉じなければそのまま続き出来るんだと思います。

(て、ことはデスクトップパソコンとか電源切ったら最初からパターン)

ユーザー登録とかログインとかしなくてもゲームブックをプレイするだけなら出来るように作ったので、セッションとか無関係なんで……。

どうかな?

問題があればちょっと対処していきたいところです。

挿絵挿入

あと今回のローンチではまだ画像については未対応です。

表紙絵であったり、ここぞという場面での挿絵……。

まあ、この辺は構築に日にちがかかると思いますが実装していきたいと思います。

もっとも、旧GameBook.xyzでは画像を挿入しない作品も多かったので、優先順位はそれほど高くないかなと今回は見送った案件です。

オッス、オラ、ゲームブック投稿サイト

そんなわけで読者にとっても作家にとってもとおってもおもしれー感じに仕上がってるから

ぜってぇ見てくれよな!

GameBook.xyz

ゲームブックってどうやって作るの?

こんにちは。ゲームブック投稿サイトをリニューアル工事している者です。

以前の筆者のブログのアクセスには「ゲームブック 作り方」と言うキーワードでやってきてくれる方も多くいらっしゃいました。

大変嬉しいことです。

なのでさらりとではありますが書いてみますので、お読み下されば幸いです。

ひとつよろしくお願いします。

筆者の場合

まあ、筆者もゲームブック作家って勝手に名乗ってますがそんなに実績あるわけじゃないんですけど、一応おカネを貰ったこともあります。

ゲームブックをどうやって作るかって質問に対してですけど、既に小説や漫画を書いていらっしゃる方は、どうやって小説や漫画をかけるようになりました?

多分見よう見まねじゃないですかね?

そうです。名作を読みまくればいいんですよ。

ゲームブックも同じです。

筆者の場合は名作と言われる下記6作

  • 火吹山の魔法使い
  • バルサスの要塞
  • ソーサリー四部作

それらを読破した後、ベーマガという愛称の(GLAYのHISASHIさんやホリエモンも愛読したと言われる)マイコンベーシックマガジンのペーパーアドベンチャーコーナーに投稿し、採用されたという経験があります。

そうですね。習うより慣れろ。

とにかく名作を読んで、真似して、どんどん作ればいいんです。

それだけですよ。

まず、基本はそれです。

具体例

でもそれだけだとこのエントリも不十分なので、筆者が良くやっているコトを説明しますね。

これは「ゲームブックって何? どんなものがあるの?」と言うエントリでも触れたのですが、ダンジョンを散策するパターンの作り方です。

筆者の記事を流用し、ちょっと修正して説明します。

ダンジョン散策するゲームブックの作り方の例を示しましょう。

↑例えば、このようなマップ原案を考えます。

マップの起点やゴール、交差点には番号(パラグラフと呼ばれる)をふります。

ユーザーはパラグラフ間を移動して物語を進め、クエスト(ゴール)を目指すわけです。

この場合のクエストは、9の出口にたどり着くこととします。

そして書き方のパターンは決まっていて、

  • 2の様に、交差点なら十字路
  • 3の様に角に立っているならL字路、L字型の通路
  • 7の様な交差点はT字路

と言う表現を使い、どの方向へユーザーが向かうことが出来るのか、選択肢を用意すればいいんです。

具体的に書くと、こんな感じです。(情景描写も書き足しています)

【1】

君は入口に立っている。真っ暗な洞窟だ。ランタンに火を灯そう。どうやら北に進めるようだ。北に進むなら →【2】へ行け

【2】

君は十字路に立っている。東からは何やら物音が聞こえる。誰か居るのかもしれない。

さてどうするか?

東へ進む →【4】

西へ進む →【3】

南へ進む →【1】

北へ進む →【5】

【3】

君はL字型の交差点に居る。静寂が君を包む。早くここから出たいものだ。さあ、動こう。

東へ進む →【2】

北へ進む →【7】

【4】

君が歩を進めると、何やら只ならぬ気配を感じる。「ウオォォォォ!」獣が吠える! うわっ! キマイラだ! 君は慌てて剣に手をかけるもヤツの一撃を交わすのが遅れる……。残念だ。君は死んでしまった。最初からやり直すこと。 →【1】

【5】

君はL字型の交差点に居る。足元が湿気を帯びており、石畳の上を歩くのは滑りそうだ。気をつけて進め。

西へ進む →【6】

南へ進む →【2】

【6】

君はL字型の交差点に居る。バサバサッ! うわっ。突然の音と若干の風圧に君は驚く。何だ蝙蝠か。彼らは君の来訪に警戒して立ち去っただけのようだ。さあ、気を取り直して歩こう。

東へ進む →【5】

南へ進む →【7】

【7】

君はT字路に立っている。いつまでこの散策を続ければよいのだろう……。打ちひしがれる君は足元に清流が流れていることに気づく。君はしゃがみ込み、手ですくって一口飲む。「ほう」と短い溜息が出た。歩ける。行こう。(走れメロスのパクリです)

西へ進む →【8】 

南へ進む →【3】

北へ進む →【6】

【8】

君はL字型の通路にやってきた。北の方は何か明るく光っている。怪しい魔法使いでもいなければいいのだが。

東へ進む →【7】

北へ進む →【9】

【9】

君は慎重に歩を進める。するとどうだ。目の前が眩しい。暫く君は目を閉じる。そう。幻ではない。待ち望んでいた外界だ! おめでとう。君は無事にこのダンジョンを制覇することが出来たのだ。ハッピーエンド。

ま、こんな感じです。

読者は選択肢を間違えばずっと【2】→【5】→【6】→【7】→【3】→【2】……と永遠にダンジョン内を彷徨うことになります。

そしてその選択肢を選んじゃうように文章を書き添えるのがゲームブック作家の腕の見せ所なんですね。

読者にはマップは普通与えられておらず、自分で方眼紙などに書いていく事が勧められています。

これが一つの作り方ですね。物語の途中で入れるようにすると良いでしょう。

ただ、お分かりかと思いますがこれは制作側の立場ではかなり楽なんです。

マップを作れば自ずと文章は書き上がりますから。

ゲームはユーザーに適度な負荷や困難を与え、それを乗り切ることが楽しいと言う満足感を提供する必要があります。

無味乾燥な「東と北へ行ける」と言う文章の羅列だけでは、つまらない単なる苦痛になってしまいます。

ダンジョン散策だけではダメで、情景描写や物語の肉付けはしっかりとやったほうが良いでしょう。

流れ図を考える

あと、一つの考え方として、パラグラフの遷移が例えば下記のように流れ図を書くと分かりやすいと思います。

↑この例で言えばユーザーは3回選択する内に15種類のエンディングにたどり着きます。

これを応用して、

  • 一度は分岐したけどまた合流する
  • ある選択肢を選ぶとゲームオーバー

という様にアイディア次第でいくらでも複雑にでき、ゲームの難しさが増します。

そしてフラグ管理として、

あるアイテムを持っているなら〇〇のパラグラフへ行け

と言う仕掛けを作ることも出来ますし、

例えばアイテムに番号を書いておき、

■■と言うアイテムが有るなら、その番号に30を足したパラグラフへ進め

と言うように、本当にアイテムを入手していないと前に進めないという仕組みも盛り込むことが出来ます。

まとめ

まあ、コンピュータゲームでプログラム上でやっている事をアナログ的にユーザーがやるっていうのがこのやり取りではあるんですけどね。

あんまり複雑にし過ぎちゃうとUIが悪くなりますから、その辺はバランスです。

また、ゲームブックには作成ツールが世界中で140以上あるそうです。

中にはマクロが使えるものもあり、簡単なフラグ管理や戦闘シーンも実現出来そうなものもあります。

先日紹介したTwineは無料で使えますので、ぜひ参考にしてみて下さい。

ゲームブックはまさにゲームと物語の融合で、可能性のあるものなのです。

ゲームブック制作ツール「Twine」の利用方法その3。変数と乱数とif文でバトルシステムも夢じゃない!

こんにちは。

さあみなさん、選択肢を創りましょう。

ゲームブック投稿サイトの管理者です。

今回はTwineのマクロ機能にも切り込んでいきます。

マクロと言えばExcelのマクロを思い浮かべる方もいらっしゃるでしょう。

それに似たようなもんです。

あとタイトルで「if文」と謳っていますが、それもExcelのif関数をご存知であればご理解が早いと思います。

今回からちょっとややこやしくなりますが、慣れれば簡単です。

習うより慣れろなので、ぜひおつきあい下さい。

バトルシステムも盛り込めるんですよ!

↑今回作るプログラムはCPUとあなたでサイコロを振り合い、出目の大きい方が10点ゲットするというちょっとしたゲームもどきです。

変数

プログラミングではしばしば出てくる変数という概念。

中学生のとき数学で方程式とか覚えていますか?

x=0

とかってやりましたね?

それに近い感覚です。

TwineのHarloweフォーマットでは、アルファベットの前にドルマーク $ をつけて変数として扱うことが出来ます。

そして、数値を代入しておくことが出来ます。

その命令が下記のとおりです。

(set: $アルファベット = 数値)

具体例はこんな感じです。

(set: $a = 0)

上記を実行すると、$aと言う変数に0が代入されます。

Twineが$a0だということを覚えていてくれると考えてもいいでしょう。

$aがいくつであるか表示させるには単純に

$a

と表記するだけでOKです。

$a10加算させたい場合は下記のように記述します。

(set: $a = $a + 10)

以上を踏まえ、リンクをクリックすると10点ずつ加算するプログラムを書くと次のとおりになります。

それを実行するとまず点数が0と表記され、

1度「増加」のリンクをクリックすると10になります。

以下、押し続けると20,30,40、……と果てしなく加算されます。

乱数

ゲームブックといえばバトルシステムが盛り込まれている作品もあります。

そのなかで、あなたは何回サイコロを振りまくったことでしょう。

あるいは振ったことにして出目はあなたが勝ったことにしていたことでしょう。

そんな煩わしい作業もTwineなら簡単にできてしまいます。

デタラメな数字を発生させる命令があるのです。

(random: 整数値)

↑この命令は0から整数値までのデタラメな数字をひとつ発生させます。

数字の幅を指定したいんならこちら。

(random: x,y)

↑こちらは整数値xから整数値yまでのデタラメな整数値一つを発生させる命令です。

実際にこちらのコードを記述して実行してみましょう。

↑筆者が実行したときは上記のとおりとなりましたが、皆さんは違った数字の結果になったかと思います。

リンクをクリックすると数字が変わるさまをご確認下さい。

サイコロバトル

変数乱数

そして冒頭に触れたif文

それがあればサイコロバトルのプログラムを作成できます。

出目を決める

では最初に、CPUの出目を決めましょう。

例えば変数$cpuに1から6までの乱数を代入したい場合、どうしたら良いのでしょうか?

いろいろあるでしょうが、順当には下記の様な記述が考えられます。

(set:$cpu = (random: 1,6))

setrandomそれぞれでカッコを用いるので、最後カッコカッコで締めくくりです。

同様にあなたの出目は変数$youを使いましょう。

場合分け

そして

  1. あなたの出目がCPUより大きければ「あなたの勝ち」と表示し、あなたの点数を10点加算
  2. あなたの出目とCPUが同じなら「引き分け」と表示し、点数はそのまま
  3. それ以外なら「あなたの負け」と表示し、CPUの点数に10点加算

という条件判断と作業を行うとしましょう。

CPUの点数を$cpu_score、あなたの点数を$your_scoreと言う変数をあてがいます。

Twineのif文は下記の文法をとります。

(if:真偽)[表示する内容や命令]

1の条件判断を文法に当てはめると下記の様に記述できます。

(if:$you > $cpu)[あなたの勝ち(set:$your_score = $your_score + 10)]

同様に2の場合はこうです。

(else-if:$you is $cpu)[引き分け]

else-ifは、if文の条件に当てはまらないけど、さらに確認が必要な場合に用いる命令です。

さて、3の場合はどう書きますか?

(else:)[あなたの負け(set:$cpu_score = $cpu_score + 10)]

↑今回の場合分けで$you<$cpuはそれ以外という意味になります。

その場合の命令はelseと言う命令を使うと便利です。

コード

サイコロバトルのコードをまとめると、下記のとおりとなります。

実行したら次の通り。

↑のっけから負けてますね。

バトルシステム

今回サイコロバトルをご紹介したのは他でもありません。

これを応用して

  • 体力点
  • 技術点
  • 武器による加点

などを加味すれば往年のゲームブックのバトルシステムが出来上がるのです。

つまりはクリック一つでサイコロを転がしたり、出目を計算したり、どちらがかって体力を引いたり……と言う面倒な作業が解決するのです。

読者に優しいUIとなりますよ。

もちろんTwineを使ってダンジョン作成などもお茶の子さいさいなんですよ。

まとめ

そんな感じで、今回は今までと比べて多少しち面倒くさい内容だったかとは思いますが、慣れてしまえばひらめいてもっとすごい作品が出来上がると思いますよ。

はじめは乗れなかった自転車が、いつの間にか乗れるようになるようなものです。

焦らずじっくりと、Twineを楽しんで下さい。

ゲームブック制作ツール「Twine」の利用方法その2。色を変えたり画像を挿入したりも簡単!

こんにちは。

さあみなさん、選択肢を創りましょう。

ゲームブック投稿サイトの管理者です。

前回に引き続き、世界的に知名度のあるゲームブック制作ツール”Twine”の利用方法のご紹介第二回目です。

今回は

色をいろいろ出すにはどうしたら良いのでしょうか?

画像とかも表示したいんだけど出来るんですかい?

という事に触れていきたいと思います。

もしまだ前回のエントリを御覧頂いていない場合は、先にこちらを見ていただくほうがご理解が早いかと思います。

それでは早速書いていきますね。

色を変えたい!

そうですね。

筆者も印刷業に居ましたからデザイナーの方やクリエイターの方が色に拘るのはよくわかります。

デフォルトのTwineのフォーマットはHarloweです。

意味がよくわかりませんが、赤ちゃんにつける愛称っぽいですね。

まあとにかく初心者向けのフォーマットなんです。

Harloweは文字が白で背景が黒っぽい色です。

黒板じゃないんですから、もっとカラフルにしたいですよね。

そんなあなたにはこんな命令があります。

(enchant: ?page, (text-colour: ) + (background: ))

「色」の部分は文字列と言う種類の文言を入れます。

つまり赤にしたければ”red” (ダブルクオーテーションで囲う)ですし、#をつけてRGBの表記にすることも出来ます。

例えば文字色を赤、背景をグレーにしたければ下記の様に記述出来ます。

(enchant: ?page, (text-colour: “red”) + (background: “#888”))

 redの代わりに#e61919でもいいですし、#888の代わりにgrayでも当然OK。

実行するとこの通り。

あと、部分的に文字の色を変えたい時がありますね。

たとえばこんなコードがあり、 

このような実行画面があるとしましょう。 

「マンティコア」をもっとカラフルにしたくありませんか?

そんなときにはこれ!

(colour:)[テキスト]

今回はなぜかダブルクオーテーションで囲わなくて大丈夫なんです。

何故text-colourやbackgroundと違うのか突っ込みたいところですが、細かいところは気にしないでいきやしょう。

マンティコアの文字だけ赤に変えたい場合はこの様に記述します。

実行画面を確認しましょう。

はい。

見づらくて配色のセンスが問われますが、思い通りにはなっています。 

文字の特殊効果

じゃ、文字を太くしたり、斜体にしたり、エンボス加工もしたくなりますね。

さらにそれだけでは物足りないので、点滅させたり震えさせたりもしてみましょう。 

コードはこんな感じです。 

実行するとこの通り。

いかがですか?

このツールはテキストに多くの装飾が出来るようになっており、ディベロッパーの意気込みを感じます。

安心してゲームブックを制作して下さい。

画像や音を入れたい

文字だけのゲームブックもいいですが、たまに挿絵があると乙なもの。

TwineのHarloweでは、画像や動画、音声などはHTMLをそのまま挿入できます。

画像

HTMLをご存じの方はそのままの文法で挿入できます。

<img src=”画像のURL“>

↑このようなタグを思い出して下さい。

例えば↓こちらの画像。

この画像のURLが、仮に下記だったとして。(ホントは違うんですけど💦)

https://cdn-ak.f.st-hatena.com/images/fotolife/o/oniisann/20171125/20171125225752.jpg

下記のように記述しますと 

このように画像を表示できます。 

これで物語の世界観が広がりますね。

音楽

音楽や音も設定できます。

ただ、サーバーにデータを保存しておく必要があるので、レンタルサーバーなどを利用できる場合に限りますので要注意。

レンタルサーバーのことについては今回割愛しますので、興味はあるけどよくわからない方はググって下さいまし。

<audio src=”音楽データのURL“>

<audio src=”https://gamebook.xyz/wp-content/uploads/2015/09/devil.mp3″ autoplay>
</audio>

 音楽素材提供:Music-Note.jp
 URL:https://www.music-note.jp/
 運営:株式会社ピクセル
 URL:https://pixel-co.com/

実行するとこの通り。

って、画像だけですが、よく見るとブラウザに音が出ている事を示すスピーカーアイコンが確認出ますよね?

音は出ています!

動画

実は動画も貼れるんです。

普通にYouTubeの埋め込みコードを入れればいいんです。

例えばこちらの動画↓

埋め込みコードは下記のとおりなので

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/WJzSBLCaKc8″ frameborder=”0″ allowfullscreen></iframe>

ご覧のとおりです。

まとめ

そんな感じで、Twineはブログエントリを認めるような感覚でゲームブックを作成可能なのです。

そして懸命な皆さまならお気付きの通り、画像や音を出せるので、ノベルゲームに近い作品も作成可能なのです。

様々な媒体で自由にゲームブックを作成出来るツール。

それが無料で使え、商用利用も認められているのです。

前回お伝えしたパラグラフ遷移と今回のマルチメディア出力の記述だけでかなり面白いゲームブックが作れるはずですよ。

もちろんTwineの機能はまだまだ計り知れないのですが!

ぜひ作品を認めて下さい。

https://twinery.org/

ゲームブック制作ツール「Twine」の利用方法その1 パラグラフ遷移の見える化がわかりやすいのでビジネスシーンでもいいかも

こんにちは。

さあみなさん、選択肢を創りましょう。

本日はゲームブック制作ツールでは、世界的に著名なオープンソースをご紹介しましょう。

筆者は以前、AXMA Story Makerを推しており、解説動画も何本か制作しています。(ああ、黒歴史)

スマホにも対応しており、制作者にも読者にも比較的簡単で乱数などによるバトルシステムもやろうと思えば出来るツールなので、いまでもいいと思っております。

でももう一つ、ご紹介した方がいいというツールがあるので、何回かに渡ってご紹介します。

おそらくゲームブック制作で世界で一番使われているツールと思われます。

その名もTwine。

より糸や麻、編むという意味合いがあります。

AXMA Story Makerも、Twineもかなりよく似たツールですがそれぞれに特色があり、パラグラフ遷移がわかりやすく図示される点ではTwineが優れています。

今回はスクショを提示し、導入方法、パラグラフ(passageとも言う)遷移の作り方を説明します。

導入方法

Twineは多くのパソコンのOSに対応しています。

システム要件の詳細がないので完全保証はしませんが、Windows、MacOSX、Linuxで動きます。

それぞれどのWindows、MacOSXのどのバージョン、Linuxのどのディストリビューションとバージョンでインストールして動くかどうかはご自身でのご確認でお願いします。

まあ、そんなこんなでインストールはめんどくさいですよね?

そこでTwineにはオンライン版も用意されています。

簡単なので、オンライン版をお勧めします。

概要

さて、Twineの概要をお話しましょう。

※以下、筆者の英検2級レベルの英語力で翻訳してます。多少の粗相はご了承のほどお願いします。

ハイ!

Twineはインタラクティブフィクションやノンリニアストーリー向けのオープンソースツールだよ。あなたが始めるのにちょいとばかり知っておくべき事があります。

インタラクティブフィクションは厳密に言うとチャットボットのように言葉を入力するUIのアドベンチャーゲームです。ノンリニアストーリーもよく意味がわかりませんが、要は時空を超えて物語がそれぞれ進んだりと、順序よい流れではないものぐらいの意味合いでしょうか。

まあ、要はゲームブックでいいです。

Twineでゲームブック作れます。

コレって新しいの?

もしあなたがTwineを以前利用したことがなければ、初めまして!

Twine2のガイドがあるからそれを見てね。……Twineフォーラムもね。……

もしTwine1を利用したことがあるなら、……これはバージョンが変わったので、SugarCubeのフォーマットをつかってね。……。

実はTwineは現在のバージョンが2なのです。

更に2はフォーマットが3つあり、1と互換性のあるSugarCube、JavaScriptやCSSが得意な方向けのSnowMan、そしてデフォルトのHarloweがあります。

Harloweが一番初心者には扱いやすいと思います。

このエントリもHarloweで進めていきます。

このエントリではHarloweで書いてますが「 SugarCube 2以上」を選ぶことをオススメします。スマホレスポンシブルになり、プレイ途中を保存もできます。

あなたの作業はブラウザにだけ保存されます。

これはあなたがTwine2ではアカウントを作る必要が無いことを意味します。……重要な点はあなたのブラウザにしか保存されないのでマメにArchiveボタンを押してね。……

あと誰もがブラウザであなたの作業を変更できるってことね。……。

オンライン版の特徴はブラウザに作成データが保存されることです。

そのためAと言うパソコンで創っていたものをBと言うパソコンで続きを作る場合、Aの作品のHTMLファイルをダウンロードし(アーカイブと呼ばれる)、BのパソコンでそのHTMLをインポートする必要があります。

以上!

読んでくれてありがとう。Twineで楽しんでね。 

では早速始めましょう。

制作

Goto the Story Listを押すと、下記の画面が表示されます。

+Storyボタンを押しましょう。

作品のファイル名と言いますか、タイトルを付けます。

あとで変えることも可能です。

ここではテキトーに「Sample」にしておきます。

↑するとこのような「Untitled Passage」が表示されます。

Passageはゲームブックで表現されるパラグラフの事です。

マウスポインタを近づけるとアイコンが4つ表示されます。

それぞれ左からゴミ箱、編集、そこからテストする、スタート位置をここにする、と言う作用があります。

↑さてスタートの文章を考えましょう。

とりあえずサンプルなので冒険に旅立つ主人公に立ちふさがる二択を入力と。

↑「Untitled Passage」を「1」にしました。

そして選択肢は[[]]二重の大カッコでくくり、マイナス記号と大なり、パラグラフのタイトルを記載するとパラグラフ遷移を作ることが出来ます。

左上のXを押すとこの通り。

パラグラフ1からパラグラフ2と3へ、それぞれ矢印が書かれているのがわかりますか?

では、パラグラフ2をダブルクリックして追記しましょう。

英字で示されているとおり、本文をダブルクリックすれば本文入力ができます。

↑こんな感じで。

はい。パラグラフはこんなように図示されます。

これがとてもわかり易いです。

なにせドラッグドロップして移動出来ます。

図はパラグラフ3を移動してみたところ。

このように自由に並べ替えることが出来ます。

場所移動しても矢印はきちんと遷移を崩さずに表示されます。

とても滑らかに移動できますよ。

右下に各種操作ボタンがあります。

左から、文字検索、置換、詳細、中間、最大表示、テストプレイ、本格プレイ、そしてPassage(パラグラフ)追加です。

さて、プレイを押して作品を楽しんでみましょう。

実行 

実行画面です。

どうですか?

ハイパーリンクで選択肢が表示されますね。

試しに腹ごしらえをしてみましょう。

そうしたらきちんと次のパラグラフが表示されます。

やっぱりやめた~とか押し間違えた~という場合がありますね。

それに対する対策もバッチリです。

ご覧の通り、左側にUndoの矢印があります。

一度訪問して戻ったら、再度訪問するRedoもありますよ。

 HTML生成

作品(ファイル)はブラウザに保存されると、図のように表記されます。

↑左下の小さい三角形を押すと作品(ファイル)にいろいろな操作が出来ます。

ここではPublish to Fileを押してみます。

↑このようにHTMLがダウンロードされました。

このファイルをクリックすると、先程Playした時と同様のものが表示されます。

まとめ

そんな感じで、簡単に電子媒体のゲームブックを作成してくれる人気のツールTwine。

今回触れたのはほんの基本の基本のことなので、もっと奥深い機能を徐々にご紹介していきたいと思います。