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

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

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

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

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

チュートリアル

[1]New Playgroundにアクセスする

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

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]ゲームブックの基本情報を入力する

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

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

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

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)を入力します。これでシーン1で敵「m01」が登場する、という意味になります(その他の項目については、ラベルのダブルクリックでマニュアルを表示&確認できるので、合わせて確認してみましょう)。

[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]デバッグモードを利用する

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

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

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

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

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

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

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

その他の機能

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

テンプレートを選択

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

  • 空のテンプレート:最低限の骨組み。初期起動時のものと同等です。
  • シンプルサンプル:最低限動作するミニシナリオが組み込まれたテンプレートです。
  • 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

[Filter Range]ダイアログが表示されるので、表示するシーン範囲を入力し、[絞り込み]ボタンをクリックします。これで該当するシーンのみがチャート表示されます。

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

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

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

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