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

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

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

-開発者マニュアル目次(http://d.hatena.ne.jp/sorcerian/20171221

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

[2]シーンを追加する

左ペインが、ゲームブックの流れ図を設計するためのチャートエリアです。水色の楕円がシーン(パラグラフ)、シーン同士を繋いでいる矢印がリンクを、表します。つまり、最初は0、1番のシーンが片方向のリンクで繋がっている訳です(0番から1番に移動できます)。

シーン/リンクを追加するには、チャートエリア左肩の[Edit]ボタンを押してみましょう。

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

[Add Scene][Add Link]というボタンが表示されるので、ここでは[Add Link]ボタンを押します。

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

上のようなメニューに変化したら、チャートエリア上の適当な箇所(なにもない場所)をクリックします。

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

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

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

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

[3]リンクを追加する

追加されたシーン10に対して、シーン1からリンクしてみましょう。これには、[Add Link]ボタンを押します。あとは、目的のシーン同士をドラッグ&ドロップで繋ぐことで、リンクが生成されます。

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

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

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

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

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

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

個々の入力内容については、ラベルをダブルクリックすると、マニュアルの該当ページに移動するので、そちらを参照してください。

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

[アイテム]~[ライセンス]タブでは、スプレッドシートからそれぞれのデータを入力できます。それぞれのシートのタイトル行をダブルクリックすることで、入力内容をマニュアル表示できます。詳細は、そちらから確認してください。

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

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

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

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

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

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

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

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

なお、個々の項目の意味については、他のタブと同じく、ラベルのダブルクリックでマニュアルを表示&確認できるので、合わせて確認してみましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • .json:Playgroundネイティブな保存形式
  • .xml:ゲーム画面上で動作する実行形式
  • .html:Kindleなどに変換するための形式(SText固有の機能は利用できない)
  • ブラウザーに保存:ブラウザー内部のストレージに保存されます

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

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

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

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

  • 投稿データの上限は全データ合計8Mb以内です。
  • 一度投稿した後は、そのシナリオが掲載されるまで他のシナリオのUpはできません(投稿自体はできますが、上書きされます)。
  • メールアドレスは後日の連絡用なので、お間違いのないよう入力ください。
    • 投稿後はAckメールが入力アドレスに届きます。届かない場合は入力の誤りも考えられますので、お手数ですが再投稿ください。
  • 紹介文、難易度などは、他のシナリオとのバランス上、スタッフ側でリライトさせて戴く場合があります。ご了承ください。

その他の機能

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

テンプレートを選択

Playgrond Flowの記法を理解するために、標準で以下のようなテンプレート(サンプル)が用意されています。

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

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

シナリオをインポート

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

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.」のセットで定義しておきます。

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

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

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

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

Editorで編集

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

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