新時代のソーサリアンを提案する

30周年を越えたソーサリアンの夢と妄想を語り続ける

ソーサリアンText 開発者向けマニュアル(Playground Flow編)

Playgrond Flow(PgFlow)は、ブラウザー上で動作するシナリオ開発環境です。 マウス操作でパラグラフ同士を接続することで、ごく直観的にリンカブルなゲームブックを作成できます。

チュートリアル

[1]Playgrond Flowにアクセスする

Playgrond Flowには、以下のアドレスからアクセスできます。

https://www.web-deli.com/sorcerian/text/playground/

   ▼

http://www.web-deli.com/sorcerian/text/image/blog/npg_main.png

各部の名称は、以下の通りです。

  • ツールバー:PgFlowの基本コマンドを実行するボタン群
  • チャートエリア:シナリオのフローチャートを表示する領域
  • ドキュメントエリア:シナリオの基本情報から本文までを編集する領域

[2]ゲームブックの基本情報を入力する

まずは、ゲームブックの基本情報を入力してみましょう。

Playgrond Flowの右ペインは、ゲームブックの基本情報を入力するためのドキュメントエリアです。以下のようなタブから構成されます。

タブ 内容
基本 ゲームブック全体の設定情報
グループ シーンを分類するための情報
アイテム 利用できるアイテムの一覧
フラグ 利用できるフラグの一覧
内部パラ 利用できる内部パラメーターの一覧
敵/罠 登場する敵/罠の一覧
実績 利用できる実績の一覧
ライセンス ゲームブック内で利用した画像/楽曲のライセンス情報
シーン 選択されたシーンの設定/テキスト
リンク 選択されたリンクの設定

たとえばゲームブックのタイトル/著者名を指定するならば、[基本情報]タブから[タイトル][作者]欄を入力します。

http://www.web-deli.com/sorcerian/text/image/blog/npg_basic.png

個々の入力内容については、ラベルをクリックをクリックすることでヘルプダイアログが表示されるので、そちらを参照してください。

[3]モンスター情報を入力する

[アイテム]~[ライセンス]タブでは、スプレッドシートからそれぞれのデータを入力できます。それぞれのシートのタイトル行をクリックすることで、ヘルプがダイアログ表示できます。個々の項目に関する詳細は、そちらを確認してください。

ここでは、一例として[敵/罠]タブからモンスター情報を入力してみましょう。セルを編集するには、該当するセルをダブルクリックします。また、既存の情報を削除するならば、右端の[×]ボタンを選択してください。

http://www.web-deli.com/sorcerian/text/image/blog/npg_enemy.png

[4]シーン情報を入力する

[シーン]タブは、既定では無効になっています。チャートエリア(左ペイン)で編集したいシーンを選択することで、有効になります。ここではシーン1を選択して、以下のように、本文を入力してみましょう。

http://www.web-deli.com/sorcerian/text/image/blog/npg_scene.png

また、[敵]欄から、先ほど[3]で入力した敵情報(m01)を入力します。スプレッドシートから選択した情報は、[シーン]タブで対応する項目を選択すると、サイドバーが開いて選択できるようになります。目的のモンスターを選択&確定することで、敵情報が[敵]欄に反映されます。

http://www.web-deli.com/sorcerian/text/image/blog/npg_select.png

[アイテム][フラグ]欄なども同様ですし、[HP]~[FREE3]欄のようにフォーカスすると入力候補が表示されるものもあります。さまざまな入力支援機能が用意されているので、活用ください。

なお、個々の項目の意味については、[基本]タブと同じく、ラベルクリックでダイアログ表示できるので、合わせて確認してみましょう。また、本文の書き方については、ページ中央の[?]から確認できます。

[5]シーン/リンクを追加する

シーンを追加するには、[シーン]タブ中央付近の[シーン追加]ボタンをクリックします(もしくはチャートエリアで該当するシーンを選択した上で右クリックすると、コンテキストメニューが表示されるので、そこから[シーン追加]を選択しても構いません)。

http://www.web-deli.com/sorcerian/text/image/blog/npg_addscene.png

[Add Scene With Link]ダイアログが表示されるので、シーン番号(id)、サマリーを入力して、[追加]ボタンをクリックします。

シーン番号は、シーン同士を識別するものなので、シナリオ内で一意でなければなりません(現時点では、0、1以外の番号です)。サマリーは、シーンの概要です。チャート上で表示されるだけのものなので、なるべく簡潔なテキストを入力しておきましょう。

http://www.web-deli.com/sorcerian/text/image/blog/npg_addscene2.png

新規のシーン(id=10)が追加されると共に、シーン0からのリンクが貼られていることが確認できます。

■Note■

既存のシーンにリンクを追加したいならば、
[リンク追加]ボタンをクリックしてください
(同じくチャートエリアのコンテキストメニューからも選択できます)。
[リンク追加]ボタンからは、既存のシーンへのリンクしか指定できません。

[6]リンク情報を入力する

同じく、[リンク]タブも、チャート上で該当するリンクを選択状態にすることで、有効になります([シーン]タブの[リンク]欄から選択しても構いません)。ここではシーン0から10をつなぐリンクを編集してみましょう。

http://www.web-deli.com/sorcerian/text/image/blog/npg_link2.png

[キャプション]を編集すると、チャート上のリンクにも反映が確認できます。

リンクを貼りなおしたい場合には、[from](始点)、[to](終点)を編集してください。

[7]ゲームブックを実行する

ここまでの内容を実際にゲーム画面で確認してみましょう。画面上部のツールバーから[▶](シナリオを実行)をクリックすると、新規のタブが開いて、ゲームを開始できます([続きから開始しますか?]が表示された場合には、[最初から]ボタンをクリックします)。

http://www.web-deli.com/sorcerian/text/image/blog/npg_play.png

[8]デバッグモードを利用する

Playgrond Flowでは、既定でデバッグモードが有効になっています。デバッグモードでは、シナリオ実行領域の上部にデバッグウィンドウが追加されます。

以下の情報を入力して[Reload]ボタンをクリックすることで、指定のシーンに強制的に移動できます。デバッグの効率化にご利用ください。

  • Scene:移動したいシーン番号
  • Items:所有しているアイテム番号(カンマ区切り)
  • Flags:所有しているフラグ(カンマ区切り)

また、デバッグモードが有効になっている場合、シーンでのアイテム/フラグ(scene要素のitems/flagsなど)が、シナリオ定義(items/flags要素)と対応関係にあるかを自動でチェックします。問題がある場合には、シナリオ開始時にエラーを通知します。

[9]ゲームブックデータを保存する

動作を確認できたら、ツールバーから[シナリオを保存](パソコンマークのアイコン)をクリックします。用途に応じて、形式を選択してください。

まずは、データは.json形式を基本に管理することをお勧めします(ネイティブ形式なので、将来的にも完全なデータであることが保証されます)。そのうえで必要に応じて、.xml、.html形式のデータを生成してください。

特に、.html、.txt形式はSText固有の機能のほとんどを割愛した形式なので、あくまで出力にのみ利用してください(マスターにしてはいけません!)

[10]ゲームブックデータを投稿する

作成したゲームブックデータは、ツールバーから[シナリオを投稿](ポストマークのアイコン)をクリックすることで、ソーサリアンTextに投稿できます。

http://www.web-deli.com/sorcerian/text/image/blog/npg_post.png

以下は、投稿時の注意事項です。

  • 投稿データの上限は全データ合計8Mb以内です。
    • 8Mbを超えるデータは複数回にわけての投稿をお願いします(データは追加書き込みされます)
  • 一度投稿した後は、そのシナリオが掲載されるまで他のシナリオのUpはできません(投稿自体はできますが、上書きされます)。
    • (例外的に)ブラウザーを利用することで、内部的には別idが振られ、複数シナリオを投稿できます
  • メールアドレスは自動返信メール用なので、お間違いのないよう入力ください。
    • 自動返信メールには仮のURLが記されているので、最終的な動作確認にもご利用いただけます。
    • 自動返信メールが届かない場合はメールアドレスの誤りも考えられますので、お手数ですが再投稿ください。
  • 紹介文、難易度などは、他のシナリオとのバランス上、スタッフ側でリライトさせて戴く場合があります。ご了承ください。

その他の機能

以上が、大まかなPlaygrond Flowの利用方法です。以降では、その他の主な機能について触れておきます。

テンプレートを選択

Playgrond Flowの記法を理解するために、標準で以下のようなテンプレート(サンプル)が用意されています(執筆時点での主なものをまとめています。随時、追加/変更していく予定です)。

  • 基本(開発時に利用する基本テンプレ)
    • 空のテンプレート:最低限の骨組み。初期起動時のものと同等です。
    • シンプルサンプル:最低限動作するミニシナリオが組み込まれたテンプレートです。
    • マイストレージ:過去に保存したデータを呼び出します(編集中のシナリオは[ブラウザーに保存]からブラウザーに保存できます)
  • 短編テンプレート(初心者向けの改変用テンプレ)
    • 20/30sceneサンプル:20/30sceneの骨組みからなる短編テンプレートです。文章を埋め込んでいくことで、簡単なシナリオを作成できます。
    • 機能テストデータ:PgFlowの主な機能を組み込んだ動作テストデータです。
  • 実践サンプル(本番公開されているシナリオデータ)

これらのテンプレートは、ツールバー右端の[テンプレートを選択]からロードできます(編集中のシナリオは消えてしまうので要注意)。

シナリオをインポート

保存した.json、.xmlファイルは、ツールバーの[シナリオをインポート]ボタンからロードできます(.html/.txtファイルは保存のみで、読み込みはできません)。

http://www.web-deli.com/sorcerian/text/image/blog/npg_import.png

ファイル選択ダイアログが表示されるので、目的のファイルを選択してください。

表示シーンの絞り込み

シーン数が増えてくると、チャートの見通しが悪くなります。そのような場合は、ツールバーの[表示シーンを絞り込み]ボタン(漏斗のようなアイコン)をクリックしてください。

http://www.web-deli.com/sorcerian/text/image/blog/npg_filter.png

サイドバーが表示されるので、表示したいグループを選択し、[再表示]ボタンをクリックします(グループは複数選択可)。これで該当するグループに属するシーンのみがチャート表示されます。

グループはシーンを束ねるためのしくみで、[グループ]タブから「開始No.」「終了No.」のセットで定義しておきます。

ダイナミックヘルプ

ドキュメントエリアから以下の領域をクリックすることで、対応するヘルプがダイアログ表示されます。

  • [基本][ページ]タブ:入力項目のラベル
  • [グループ]~[ライセンス]:グリッドのタイトル行

http://www.web-deli.com/sorcerian/text/image/blog/npg_help.png

スニペット機能

スニペットとは、SGML式の入力を簡単化するための機能です(小さなテンプレートとお考え下さい)。

シーンテキストを編集する際に、エディター上で[Ctrl]-[Space]を押すことで、スニペット一覧が表示されます。もしくはスニペットのキーワード(たとえばageの「a」など)を入力しても該当するスニペットが表示されます(具体的な文字を入力した場合には、合致したスニペットだけに絞り込まれます)。

http://www.web-deli.com/sorcerian/text/image/blog/npg_snippet.png

この例であれば「age」を選ぶと、年齢を表示するための${age?...}のような式がエディターに反映されます。可変部分(ここではyoung)が選択状態になっているので変更します。

http://www.web-deli.com/sorcerian/text/image/blog/npg_snippet2.png

変更後は[Tab]ボタンを押すことで、順に可変部分(ここではadult→old)を移動できるので、順に修正してください。

カーソル位置にタグを追加

[カーソル位置にタグを追加]ボタンを利用することで、エディターで本文を編集する際に、SText固有のタグ埋め込みを簡単化できます。

http://www.web-deli.com/sorcerian/text/image/blog/npg_tag.png

${input}~${msg}までは、エディター上のカーソル位置にタグを埋め込みます。それ以外のものは、テキストを選択した上でタグを選ぶことで、テキストを自動的に囲んでくれます。

※上のスニペット機能と似ていますが、既にあるテキストに対してタグを適用する場合には、こちらの方が便利かもしれません。将来的には、機能を整理する予定です。

リンクの追加

現在のシーンから既存のシーンに対してリンクを貼るならば、[シーン]タブの[リンク追加]ボタンを利用してください。

http://www.web-deli.com/sorcerian/text/image/blog/npg_addlink.png

[Add Link]ダイアログからは、特殊なリンクも一括で作成できます。以下は、リンク種別による入力項目の意味です。

種別 id 追加情報 正解文字列
ランダム リンク先 追加のリンク先 ×
自由移動 リンク先 追加のリンク先 ×
テキスト入力 正解時のリンク先 間違い時のリンク先 正解文字列

特殊リンクは、PgFlow上では個々のリンクにばらけて管理されます。個々のリンクについて、編集したいならば[リンク]タブを利用してください([リンク]タブから[種別]欄を指定することで、特殊リンクを作成することも可能です)。

■Note■

特殊リンクのグループ化には、[表示順序]を利用しています。
[リンク]タブで個別に作成した特殊リンクを束ねるには、
ひとつにまとめたいリンクには同じ[表示順序]を指定してください。

リンクの表示順序

ひとつのシーンにリンクが複数存在する場合、どの順序で表示するかも決められます(既定では任意の順序)。

これには[リンク]タブから[表示順序]を入力しても構いませんが(その場合は数値の小さい順に表示)、[シーン]タブ中央の[並べ替え]ボタンを利用するのが便利です((チャートエリアのコンテキストメニューからも選択できます)。

http://www.web-deli.com/sorcerian/text/image/blog/npg_sort.png

サイドバーに現在のシーンを基点とするリンクがリスト表示されます。あとは、リンクを表すボックスをドラッグすることで前後を入替できます。

Editorで編集

PgFlowで編集したデータを、Playground Editorに移動して編集することも可能です。これによって、大まかなフロー作成はFlowで、シナリオ編集はEditorで、という使い分けも可能になります。ツールバーの[Editorで編集]を選択することで、現在のシナリオデータがEditorに移行されます。

ただし、現在のデータが保存されるわけではないので、移動に際してはデータの保存を忘れないように注意してください。

シーンidをシャッフル

ツールバーから[シーンidをシャッフル]を選択することで、シナリオ配下のシーン一式をランダムにシャッフルします([シーン]タブから[シャッフル除外]を有効にしたシーンを除きます)。

主に、電子書籍向けに保存する際に利用する機能です。シャッフルした場合、元のidに関わらず、0始まりの連番となります(.txt形式で出力する際には、必ず事前にシャッフルしてください)。

PgFlowの小技β

PgFlowは比較的自由に開発を進められるツールですが、以下の小技を知っておくことで、よりスムーズに開発を進められるはずです(まずはメモ的な走り書きですが、ノウハウが溜まったらきちんとまとめます)。

ストーリー/イベント単位にシーン番号はまとめる

Pg Flowでは、チャートを絞り込むためにシーンを束ねる「グループ」という機能があります。グループの範囲はシーン番号の範囲で定義します。

Pg Flowでは、シーン一覧をシーン番号順に並べます。

Pg Flowのチャート機能は複雑な構造のチャートを一部割愛して表示する場合があります。離れている度合いはシーン番号によって決まります。

以上の理由から、関連するシーン番号は近接して採番すべきです。

シーンを選択してからリンクを選択する

チャート図も込み入ってくると、選択すべきリンクが識別しにくくなります。

しかし、接続元のシーンを選択することで、関連するリンクがすべてアクティブになります。その状態であれば、数あるリンクを選択するのも簡単です。

インポート用シーンの管理方法

インポート用途で用意したシーンは、既定ではどのSceneにも紐づけられないため、チャートエリアで見つけにくくなる場合があります。これを防ぐためには、(たとえば)Scene 0に対して、未使用のフラグ付きで連結することをお勧めします。

これによって、未使用フラグ付きなので、ゲーム画面からは見えないが、PgFlow上では連結しているので行方不明にならないシーンを作成できます。

なお、別解として、[編集するシーンを選択]ボックスを利用しても構いません。インポート用シーンは90000番台などにまとめておくことで、選択ボックスからも対象シーンを見つけやすくなります。