2013年08月16日

ZTAB Editorの使い方02

「ZTAB Editor(Ze Text Adventure Builder)」の説明を前回で書きました。

ではこの記事では実際にゲームブックを作成してみましょう。


新規にファイルを作成した所まで前回では説明したと思います。

新規ではスタートのパラグラフ一つしかありません。スタートのパラグラフは題名と作者名だけ記入してタイトルページにしたいと思います。今回のタイトルは「ハイジの冒険」とします。

WS000001.JPG

このZTABではフローチャート上で選択肢を作るため、選択肢を作る前にリンク先であるパラグラフを作らないと選択肢は作れません。

WS000003.JPG

新たにパラグラフを作るにはフローチャート上の開いている所を右クリックで「Add fact」を選んでクリックして下さい。

15.jpg

灰色の四角いオブジェが作られました。オブジェの四角い外枠が太くなっている事を確認して下さい。(画像はStartがアクティブになってます)これはこのパラグラフがアクティブになっているという意味です。アクティブになっていればそのパラグラフ内容は右側の情報欄に表記されます。

ではパラグラフタイトル欄でタイトルをつけましょう。最初は<Enter fact label>になっているはずです。
画像では「はじまり」と題しました。

オブジェの周りに円が書かれていますが、黄色い円はそこでリンクが途切れているという意味です。ゲームオーバーやエンディングなど以外にこの円があればリンクが貼っていないという意味です。

赤い円は他のパラグラフからリンクで指定されていないという意味です。指定されていないとゲームブック上には何も意味がありません。リンクを繋げたり繋げられたりすれば円は消えます。

Startとはじまりのふたつのパラグラフを設置しました。
Startのタイトル画面からはじまりのパラグラフへ移動しないといけませんから、リンクを貼りたいと思います。

まずStartに対しはじまりへ行く選択肢を設定するので、ここではリンクの出元のStartのオブジェをクリックしアクティブにした後、今度はそのオブジェを右クリックします。

出てきたメニューの上から二番目の「Add action」をクリックしましょう。
これが選択肢を作る命令です。

14.jpg

するとフローチャート画面に戻り、カーソルが+になったと思います。
この+のカーソルを今度はリンク先のパラグラフのオブジェへと持っていってクリックします。

13.jpg

するとStartとはじまりの二つのオブジェが矢印で繋がりました。
矢印の途中に丸い緑のオブジェがありますがこれは選択肢のオブジェです。これをアクティブにするとリンク元のパラグラフの情報を表示します。画像で言うとStartのパラグラフですね。

そんなStartのパラグラフの情報を見てみましょう。

16.jpg

ウィンドウ右下の選択肢の欄に一行付け加えられました。これがStartのパラグラフに加えられた選択肢のリンクです。
「Desoription」と書かれたゲージの下が選択肢のテキストになります。最初は<Enter action>となっています。
これを選択肢にする文章へ変えましょう。画像では「スタートだよ!!」と書きました。
選択肢の丸いオブジェの下のタイトルも変わりました。

WS000006.JPG

はじまりの文章を書きます。
主人公のハイジが買い物をする為に山の向こうの町までいくストーリです。
途中で魔法使いと出会い誘拐されそうになるシーンまで書きました。

画像や音楽も入れることができます。本文にはHTMLタグが打ち込めるのでフラッシュやYouTubeを入れる事だって可能です。

WS000009.JPG

そこで公式で配布されているサンプルゲームの画像を拝借して使います。
いかにも悪どそうな魔術師のイラストがあったのでそれを入れてみましょう。

メディアを挿入する場所は右上のパラグラフタイトル欄の下です。
緑十字のアイコンをクリックすると任意のファイルを選べます。

17.jpg

選ぶと「All media」の欄の下にリスト表示されます。この欄にあるメディアはあくまでソフトウェアが認識した状態です。パラグラフの本文に表示させるにはその右隣の「Fact media」欄に入れないといけません。
All media欄から表示させたい画像を選びAll media欄とFact media欄の間にある右矢印をクリックでセットします。
Fact media欄に選択したファイルがリスト表示されました。
右端のプレビュー欄で掲示される画像が確認出来ると思います。

この画像類は複数Fact media欄に入れる事で重ねて表示出来ます。風景画のjpgに人物のgif画像を合わせて、あたかもその風景にその人物がいるように加工できるわけです。
Fact media欄の上へ行くほどその画像は手前に表示されます。
重ね順を変えたい場合は変えたいファイルを選び右と左のアイコンの下にある上と下のアイコンをクリックすることで移動できます。

制作しているストーリーはハイジが出会った魔導士に「1ユーロあげるからおじさんと遊ぼう」と誘われているシーンです。リアルに書かれている魔導士の画像とストーリー上の魔導士のイメージが一致しておりませんwww

そこで「1ユーロ貰っておじさんと遊ぶ」選択肢と「断って町へ買い物へ行く」という選択肢の二つを設定する事にしました。
選択肢を作る前にリンク先のパラグラフを設置します。二つ新規で立ち上げて「あそぶ」と「お買い物」とタイトルを付けてみました。本文も入力します。

WS000008.JPG

「あそぶ」を選ぶと遊んで1ユーロ貰ってから「お買い物」へ行くようにします。

WS000010.JPG

「お買い物」のパラグラフではハイジがゲームソフトを買うというストーリーですが、ゲームソフトが11ユーロでハイジの所持金が10ユーロしかないというストーリーにします。

おじさんと遊んでから町へ買い物に出かけた場合1ユーロ貰っているために所持金の10ユーロと合わせてゲームを買えますが遊ばないで町へ出かけた場合、所持金の10ユーロしかなくゲームを購入出来ないという設定にします。
もちろん使うのはフラグ分岐です。

そこで「ゲームを買う」と「買えないわ」の二つのパラグラフも新たに設置します。
「ゲームを買う」は所持金が足りなかったけど魔導士から1ユーロ貰ってたのを足せば買えたという話で
「買えないわ」は所持金が足りなくて買えなかったという話です。

WS000011.JPG

一通りパラグラフが揃ったところでリンクを繋げていきます。
「はじまり」から「あそぶ」と「お買い物」それぞれにリンクを繋げます。
「はじまり」の選択肢を「一緒にあそぶ」と「町へ買い物へ行く」の二つを入力し、
「あそぶ」から「お買い物」へリンクを繋いで選択肢を「町へ買い物へ行く」と入力。

WS000012.JPG

するとこんなフローチャートになりました。

「お買い物」のパラグラフでフラグ分岐するようにして、変態と遊んで1ユーロ貰っている場合は「ゲームを買う」にリンクし、遊ばずにそのまま町へ来た場合は「買えないわ」へリンクするようにします。

ZTAB Editorでは変数は使えないものの、指定したパラグラフを通過したことによるスイッチはあります。
要するにこのパラグラフを通過しましたか?しませんでしたか?
そして通過したらこちらのページで通過してないならあちらのページへ行って下さい
というシステムが備わってます。

まず「お買い物」から「ゲームを買う」と「買えない」の二つにそれぞれリンクします。

お買い物のパラグラフで選択肢テキストをどちらも「ゲームを買う」と入力してください。この時点でハイジは買うものが予定していた所持金よりも高いとは知らなくて、買う気まんまんですから「ゲームを買う」という選択肢で充分です。

選択肢は二つ同じテキストでも問題ありません。
ただ制作者側が混乱すると思います。

18.jpg

選択肢テキストを入力する「Desoription」ゲージの隣にある「Printed prefix」ゲージは選択肢に対する注釈を入れる場所で、それは制作側に見えてもプレイヤーには見えないのでそれを使って区別するのも一つの手です。内容はフローチャート上でも括弧付きで表示されます。

12.jpg

二つリンクされました。
このままプレイしても「お買い物」のパラグラフの選択肢は「ゲームを買う」という同じ選択肢が二つ表示されて選べてしまいます。
そこでフラグ分岐させることにします。

「ゲームを買う」にリンクされている方の矢印の中間にある緑色の丸いオブジェを右クリックしてください。
上から三番目の「Add condition」をクリック。これがフラグ分岐設定の命令です。

11.jpg

するとリンクするときと同じくカーソルが+に変わります。
指定するのは通過したか判断するパラグラフです。
今回は魔導士に1ユーロ貰ったか否かを判断するので魔導士と遊んで1ユーロ貰ったと本文に書いてある「あそぶ」というパラグラフを指定しクリックします。

10.jpg

すると上の画像のように「お買い物」と「ゲームを買う」のパラグラフを繋げる矢印線の間にもう一個丸い?マークの付いたオブジェが設置され「あそぶ」とそのオブジェが点線で結ばれました。下には<あそぶ not visited? yes>と書かれています。

意味は「あそぶ」というパラグラフを通過してないなら通れるよ。という感じです。
でも「あそぶ」で1ユーロ貰っているから通過していない場合は通れないのではと思います。
そう思ったら?マークのオブジェをダブルクリックしましょう。

06.jpg

色が緑色からオレンジへ変わりました。
オブジェの下には<あそぶ visited? no>と書かれています。
さっきとは逆で「あそぶ」というパラグラフを通過したなら通れるよ。という感じです。

これで「お買い物」パラグラフへ到達したときに、「あそぶ」パラグラフを通過したかしてないかチェックが入り、通過していた場合のみ「ゲームを買う」に繋がる選択肢が現れます。ただもう一方の「買えないわ」という選択肢もフラグ設定していないために現れてしまいます。

当然これは「あそぶ」を通過していない時のみ表示されなくてはいけません。
同じ要領で「お買い物」から「買えないわ」に繋がる選択肢オブジェから「あそぶ」に対してフラグ分岐リンクを貼って下さい。

19.jpg

これはそのまま<あそぶ not visited? yes>で結構です。
「あそぶ」を通過していない時だけこの先へ進めるリンクが表示されるというわけです。

「お買い物」のパラグラフへ来た時に「あそぶ」を通過していれば「ゲームを買う」へ繋がるリンクひとつのみが表示され、「あそぶ」を通過していなければ「買えないわ」へ繋がるリンクひとつのみが表示されます。

以上がフラグ分岐のやりかたです。


完成したらテストプレイしてみましょう。

01.JPG

歯車のアイコンの隣にある下三角をクリックすると「Build and launch htmi」と出るのでクリックするとテストプレイできます。

WS000017.JPG

ブラウザが立ち上がりプレイ出来ます。表示サイズはちょっと大きいようです。公開ファイル作成時にCSSファイルやJSファイルと組み合わせも出来るみたいなので変える事もできるかもしれません。

画面左上にはやり直すリスタートと戻るコンテニューとセーブのリンクが備わってます。
枠の左上に本文、左下に選択肢、右半分に画像が表示されるみたいですね。

WS000018.JPG

「はじまり」のページです。
悪人顔した魔導士が杖から雷をほとばらせながら
「お嬢ちゃん。1ユーロあげるからおじさんと一緒に遊ぼうよ。」と言ってます。

WS000026.JPG

「あそぶ」のページです。
ハイジがおじちゃんとチャンバラごっこして遊びます。画像は切れ味鋭そうな剣です。
やましい遊びではなかったようです。
ここを表示させることによってフラグ立てが行われてます。

WS000021.JPG

「お買い物」のページです。
画像から察するにどうみてもゲームソフトを売ってそうなお店はありません。
「ゲームを買う」という選択肢はここには二つ設置されていますが、フラグ分岐処理によりどちらか一つの選択肢しか表示されません。

WS000022.JPG

「買えないわよ」のページです。
おじちゃんと遊んでない為にお駄賃を貰ってないことによるフラグ分岐の結果です。

WS000023.JPG

「ゲームを買う」のページです。
おじちゃんから1ユーロ貰い所持金と合わせてゲームを買う事ができましたとさ。



ちなみに歯車のアイコンを押すとHTMLやRTF方式にて出力できます。

WS000024.JPG

HTML Gameというのは先ほどプレイした画面でフラグ分岐ができます。
HTML Bookというのはネット上でHTMLとして表示されますが本のようにスクロールして読み進めていくものです。
各パラグラフには番号が設置されパラグラフはシャッフルしてくれます。選択肢もリンクされていてクリックすれば移動できますが、フラグ分岐は対応してなく全ての選択肢の情報が表示されます。
RTF BookはHTML Bookと同じですがリンクはなく全てテキスト情報です本を作りたい時などにどうぞ。

WS000025.JPG

HTML Bookで出力して表示したときはこんな感じになります。

変換の仕方ですが、変換したい方式の列の「Generate」をクリックするとコンパイルされ下のゲージの色が変わります。
「Launch locally」を押すとそのゲームがブラウザでプレイ出来ます。
「Publish」はその出来上がったファイルをPCに保存して
「Launch online」はそのままFTPにてネットワーク上のサーバに上げます。

ウィンドウ下部の欄はFTPを使った時に同時に上げるファイルを設定します。


以上が「ZTAB Editor(Ze Text Adventure Builder)」の使い方でした。
余計な機能がない分簡単だったと思いますね。
posted by 文芸遊戯研究会 at 19:28| 制作ソフト | このブログの読者になる | 更新情報をチェックする