タグ: mermaid

ボードゲームとmermaid記法(シーケンス図による『キャリコ』セットアップ)

はじめに

  • 土曜日に開封
  • そのままプレイ
  • 日曜日にレビュー投稿

を行ったボードゲーム『キャリコ』。その勢いが冷めぬうちに、セットアップ方法をメモしていきます。

用いたのはここ1ヶ月ですっかり虜になってしまったmermaid記法のシーケンス図。

シーケンス図による『キャリコ』セットアップ

sequenceDiagram participant t as タイル類 participant f as フィールド participant p as プレイヤー participant T as トークン<br>ボード note over t,f:猫タイル3種をフィールドにセット<br>(難易度に合わせ1枚ずつ) note over t: 模様タイルを6枚用意 t->>f: 模様タイルを<br>猫タイルに各2枚セット note over T: 猫タイルと一致する<br>トークンを用意 T->>f: 猫トークンをフィールド脇に置く note over T: キルトボードを<br>人数分用意 note over f,T: プレイヤーの前に<br>キルトボードを置く note over t: 目標タイルを<br>人数分用意 t->>+p: 目標タイル6枚を受け取る note over p,T:目標タイル3枚を配置 p-->>-t:余分の目標タイルをしまう note over T:ボタントークンを用意 T->>f:ボタントークンをフィールド脇に置く alt 袋に入れる場合 note over t: キルトタイルを<br>全て袋に入れる note over t,f: 袋に入れたタイルをフィールドに置く else 袋に入れない場合 note over t: キルトタイルを<br>全てシャッフル note over t,f: シャッフルしたタイルを<br>裏向きにしてフィールドに置く end t-->>p: キルトタイルを2枚をランダムに受け取る note over p: 受け取ったタイルを<br>裏向きにして<br>手元に置く note over f: キルトタイル3枚を<br>表向きに公開 note over f,p: ゲーム開始

mermaid記法&ボードゲーム、今後の展望

こういったセットアップにとどまらず、

  • クラス図でのコンポーネントを整理
  • ジャーニーでゲーム中の感情の流れを追う
  • 戦術や選択の判断

等も可能になったので、ボードゲームにおけるつまづきを整理し、すんなりと頭に入るようなシステムを構築できそうだと思いました。

前にも言っていますが

  • 矩形サイズや矢印を調整することなく
  • テキストエディタで
  • すっきり書けて
  • 可読性が高い

のは、自分が図に求めていたものです。

(次ページはどう書いたかです)

条件と流れ。(mermaid記法による『大鎌戦役』戦闘フロー)

Markdownを本格的に書き始めてから習いだしたmermaid記法。ボードゲームのルールを表現するにはもってこいでしたので、

自分が一番好きな重ゲーの一つである『大鎌戦役』の戦闘に焦点を合わせたいと思います。

通常戦闘のフローチャート

sequenceDiagram title: 戦闘の通常ルール participant a as 攻撃側 participant d as 防御側 a->>d: 攻撃ユニットが<br>戦闘可能ユニットの<br>ヘックスに侵入 opt 戸川の罠が発動 note over a: 罠の処理を解決 end note over a: 移動完了 note over a,d: 侵入したヘックスで戦闘開始 opt ヘックスが複数ある場合 note over a: 戦闘の順番を指定 end opt メック能力開放済みの場合 note over a,d: 能力の処理を解決<br>砲術[ノルディック]<br>斥候[クリミア]など end note over a,d: 戦闘ダイアルを秘密裏に指定(最大7) opt 戦闘カードを用いる場合 note over a,d: 戦闘カードをユニットの数だけ<br>裏向きで公開 opt 戦闘カードを追加できる場合[ロスヴィエトなど] note over a,d: 条件に応じて<br>戦闘カード追加 end end note over a,d: 戦力値を互いに公開<br>戦力値+カードの数値合計 note over a,d: 勝敗判定 alt 合計値が異なっていた場合 note over a,d: 数値が高い勢力の勝利 else 合計値が同じ場合 note over a: 攻撃側の勝利 note over d: 防御側の敗北 end note right of a: 戦闘終了処理 note over a,d: ダイアルで指定した分だけ戦力を減らす note over a,d: 利用した戦闘カードを捨て札 alt 攻撃側の勝利(防御側にワーカーがいない) note over d: ユニットが本拠地に撤退 d-->>a:資源は攻撃側が所有 else 攻撃側の勝利(防御側にワーカーがいる) note over d: ユニットとワーカーが本拠地に撤退 d-->>a:資源は攻撃側が所有 note over a: ワーカーの数だけ支持減少 opt ポラニアの場合(友愛解放済み) note over d: ユニットとワーカーが本拠地に撤退 d-->>a:資源は攻撃側が所有 note over a: ワーカーがいても<br>支持は減少しない end else 防御側の勝利 note over a: 戦闘ユニットが本拠地に撤退 opt メックがワーカーを乗せていた note over a: メックとワーカーが本拠地に撤退 end opt メックが資源を運んでいた note over a: 資源は侵入したヘックスにとどまる a-->>d: 資源は防御側が所有 end end note over a,d: 戦闘終了 alt 勝者側が戦闘による星章を1つまでしか獲得していない note over a,d: 勝者側が戦闘による星章を獲得 else 勝者側が戦闘による星章を2つ獲得している note over a,d: 星章は獲得されない opt ザクセン帝国が勝利した note over a,d: 戦闘による星章を獲得 end end

と、感覚で「ダイヤル設定してカードと合わせるだけ」思ってましたが、

  • メック能力解放による事前処理
  • 戦闘終了後の処理

が複雑。この、複雑さがまた醍醐味ではあります。

戦闘撤退時のノルディック

で、このフローでは書ききれなかったノルディック(北方)王国は以下のような条件分岐が発生します。

graph TD S[ノルディックが敗北]-->I{航海適正} I--未解放-->R(本拠地に撤退) I--解放済み-->L{湖} L--が隣接していない-->R L--で戦って敗北した-->R L--が隣接している-->j{隣接した湖に<br>敵ユニットが} j--いる-->R j--いない-->e>隣接した湖に<br>移動可能]

割合に条件が厳し目な用に見えますが、標準マップは湖が思いのほか多いので逃げられやすいというのが厄介です。

まとめ

基本セットwith『彼方よりの侵攻』はまだルールがわかりやすいので、このペースで行けばすべてのルールをmermaid記法で書けそうです。

(次のページから、どうやって書いたかを記します)

思考の整理、考察の広がり。(mermaid記法によるゲームの考察)

ゲームの楽しみがまた広がりました。(ネタバレは極力避けています)

きっかけとなった2要素

1. 『ライザのアトリエ』フィギュア入手

この2種により、また「このゲームを最初から攻略したい」という気運が高まりました。

2. Markdownとmermaid記法

先月、ドハマリしてしまったMarkdown記法とmermaid.jsによるシーケンス図。

せっかく覚えた技術なので、この記法で『ライザのアトリエ2』のゲーム考察をしてみようと思ったわけです。

考察に当たって-「遺跡」

ゲーム『ライザのアトリエ2』では、ストーリーの要として「遺跡の探索」があります。

  • 各所にある遺跡の欠片を集める。
  • 欠片を正しい位置に配置。
  • これにより遺跡の鍵となるアイテムやスキルが解放されていく。

この遺跡の欠片は、「過去、どんな人がどのような行動を取ったか」の残留思念。

様々な思念が散らばっている上に時系列が一致していません。更に、「登場人物の始まりと最期」が同じ遺跡に存在することもざらにあります。

これらをひとまとめにできないものかと、書き方を考えてみました。

記録フォーマットの策定

この画像のように、

  • 左ペイン:ファイルエクスプローラーを利用して遺跡や考察ごとにファイルを作ります。
  • 右ペイン:
# 遺跡名

### ☆遺跡の欠片 (エリア名:エリアx)

#### ○欠片の各セクション

- 記憶の粒子名
  - 文字全文(**太字**は手がかり)
- *自動的に埋まる考察*
  - *考察全文*

***

のフォーマットを作り、各所をメモしていくことにしました。

テーブルによる時系列整理

こうして攻略を進めていき、メモが完了したら本番。Markdownに備わるテーブル機能が威力を発揮。

ネタバレ回避のためマスクしています

様々な遺跡に点在する「思い出」を、その順番に沿って配置。こうすることで、残留思念がどのような足跡をたどっていったかが一目で分かるように。

シーケンス図による関係性整理

その後、mermaid記法のsequenceDiagramを用いて

  • その遺跡で誰が登場したのか
  • または誰がどこに行ったのか

を並べてみます。(以下、最初の定義例)

mermaid
sequenceDiagram

sequenceDiagram
participant a as 骨董屋
participant c as 蒐集家
participant h as 狩人
participant ch as 薬師
participant m as 魔石掘り
note over m: 天体現象を肴に宴会
ch->>m: 災いを警告
m-->>ch: 警告を無視
note over a,m: ケルドラ領で奇妙な石が採掘されるようになった
note over a,m: 後略
sequenceDiagram title : ケルドラ城 participant a as 骨董屋 participant c as 蒐集家 participant h as 狩人 participant ch as 薬師 participant m as 魔石掘り note over m: 天体現象を肴に宴会 ch->>m: 災いを警告 m-->>ch: 警告を無視 note over a,m: ケルドラ領で奇妙な石が採掘されるようになった note over a,m: 後略

あとは、テーブルを見比べながら関係性を配置。

整理によって見えてきたもの

「登場人物の足取りを追体験」が大きいです。

  • 誰が(誰と)
  • いつ
  • どこで
  • 何を行い
  • なぜそれを行ったか
  • どのように行ったか

の5W1Hが時系列に沿って流すことで理解度や没入感が飛躍的にアップ。

「だからここにこのアイテムが置いてあるのか」もおぼろげながら見えていきました。

「要素を組み合わせて形にしていき、一つの大きな物語にする」は、「素材を組み合わせて一つのアイテムにする」本作のアイテムクリエーションにつながるものがあります。

「物事を整理することで広がりが見える」の入り口に立てた気がします。

WordPressにプラグイン:[WP Mermaid]追加と、ボードゲーム『アリスガーデン』簡易フローチャート。

これで、一手間が省けます。

プラグイン[WP Mermaid]

テキスト主体でフローチャートやシーケンス図、はたまたZENタイル(的な感情の動き)まで表示できるため重宝するようになったmermaid記法。

これを自ブログでもっと効率的に表示できないか?

と検索したところ、そのものズバリを発見しました。

WP Mermaid
https://ja.wordpress.org/plugins/wp-mermaid/

Mermaid導入

導入方法は通常のプラグインと同じく

  1. ダッシュボード>プラグイン
  2. 「新規追加」から「mermaid」を検索
  3. 出てきたものをインストール。

で完了です。

埋め込み

ブロックエディタから

「WP Mermaid」を選択。ここにスクリプトを以下のように埋め込みます。

```mermaid
  journey
    title 2021/09/28 ZENタイル
    section 出勤前
      5-6:1:  嫌
      7-8: 4: 味
      8-9: 5: 驚
    section 勤務中
      10-11:0: 怒
      11-12:4:恩
      15-16: 1: 惑
     section 帰宅
      17-18:5:癒,独
       19-20:5:新,美
```

すると、表示結果はこうなります。

journey title 2021/09/28 ZENタイル section 出勤前 5-6:1: 嫌 7-8: 4: 味 8-9: 5: 驚 section 勤務中 10-11:0: 怒 11-12:4:恩 15-16: 1: 惑 section 帰宅 17-18:5:癒,独 19-20:5:新,美

これにより、LiveEditorで画像変換する必要はなくなりました。

そこで、これを描いてみます。

ボードゲーム『アリスガーデン』簡易フローチャート

シンプルなルールながらも遊び応え十分なタイルプレースメント『アリスガーデン』。

これを以下のように書いてみました。

コード

graph TB
A((ラウンド開始))-->B(ボーナスタイル以外の袋を全て左側に置く)-->C(1.左側の任意の袋から2枚をピックする)
C-->D[2.タイル1枚をボードに配置する] 
D-->E[3.配置しなかったタイルを脇によける<br />ボーナスチップは手元に置く]
E-->F[4.1の袋を右側に置く]
F-->G{5.左側に袋がある}
G--Yes-->C
G--NO-->H{6.ボードにボーナス<br />タイル以外を配置できる}
H--YES-->I[全ての袋を左側に戻す]
I--次のラウンドへ-->A
H--NO-->J[ボーナスチップを<br />任意のスペースに配置<br />配置できないチップは手元に置く]
J-->K((得点計算))
K-->L>ゲーム終了]

表示結果

埋め込んだ結果が下記。

graph TB A((ラウンド開始))-->B(ボーナスタイル以外の袋を全て左側に置く)-->C(1.左側の任意の袋から2枚をピックする) C-->D[2.タイル1枚をボードに配置する] D-->E[3.配置しなかったタイルを脇によける<br />ボーナスチップは手元に置く] E-->F[4.1の袋を右側に置く] F-->G{5.左側に袋がある} G--Yes-->C G--NO-->H{6.ボードにボーナス<br />タイル以外を配置できる} H--YES-->I[全ての袋を左側に戻す] I--次のラウンドへ-->A H--NO-->J[ボーナスチップを<br />任意のスペースに配置<br />配置できないチップは手元に置く] J-->K((得点計算)) K-->L>ゲーム終了]

まだ詰めるところはありますが、形になっているとは思います。

まとめと今後の課題

元々はMarkdownエディタ「Typora」の使い勝手がいいということで連鎖的に見つけたフローチャートやシーケンス図。

これがエディタで書けるのは革命的な出来事ですし、更にブログに表示できるようになったのは更なる驚きと喜び。

  • 横長だと文字が潰れる
  • まだサンプルのコピペに過ぎない

など、改善点は山積み。ではありますが、これは一つのマイルストーン達成です。

コードでメモするZENタイル。(Typora & mermaid記法)

このエディタを使うようになって、「表現力の豊かさ」に驚かされる日々。

まさか、これをメモすることができるとは思いませんでした。

mermaid - journey記法

きっかけはこれを知ったこと。

https://github.com/mermaid-js/mermaid

  • 区切りをつけられる流れ
  • 感情の上下をつけられる
  • 登場人物を複数決められる

そこで、思ったことがこちらです。

ZENタイルとの親和性

この、記法、ZENタイルに使えるのではないか?

そうと決まれば、サンプルコードから置き換えてみます。

コード案

  journey
    title 2021/09/28 ZENタイル  # タイトルを決定
    section 出勤前 # 時間帯の主だったイベント区切り
      5-6:1:  嫌 # 時間帯:感情の上下(大きいほど上機嫌) : 気持ちタイル
      7-8: 4: 味
      8-9: 5: 驚
    section 勤務中
      10-11:0: 怒
      11-12:4:恩
      15-16: 1: 惑
     section 帰宅
      17-18:5:癒,独
      19-20:5:新,美

これがTyporaで表現するとこうなりました。

  • タイルではなく気持ちタイルを置けない
  • 同じ時間帯では並列

という条件はありますが、

  • 移動中にメモができる
  • その後、再現ができる

のは本当に助かります。

今後の展望

自分が思うよりも様々なフローが文字入力だけでできることに感動を禁じ得ません。

この記法を使って

  • 旅行記
  • ボードゲームの各種ルール整理
  • 内容の整理

など、表現を増やしていきます。

MarkdownエディタTyporaによるボードゲーム『ガイアプロジェクト』のルール整理(1)。

MarkdownエディタでUMLが作成できると発見し、「流れが必要なものの記録に使える」と実感。

さっそく、練習がてらにやってみました。

ガイアプロジェクト:ガイアフェイズの整理

かなり難解なボードゲーム『ガイアプロジェクト』。その、1フェイズであるガイアフェイズを言ったん見直してみました。

一般的な流れ

まず、こんな感じでTyporaで書いてみました。

```mermaid
graph TB
A((収入フェイズ))
A-->B((ガイアフェイズ<br>開始))
B-->C{ガイアフォームが<br>次元横断星に}
C--ない-->D
C--ある-->c1{ガイアフォームの下に<br>ガイア惑星タイルが}
c1--ある-->D
c1--ない-->c2[ガイア惑星タイル下に<br>ガイア惑星タイルを置く]
c2-->D{ガイアエリアに<br>トークンがある}
D--ない-->E>ガイアフェイズ終了]
D--ある-->d1[全てのトークンを<br>エリア1に置く]
d1-->E
```

これがレンダリングされると、こうなります。
(参考: https://mermaid-js.github.io/docs/mermaid-live-editor-beta)

地球人の処理

```mermaid
graph TB
A((収入フェイズ))
A-->B((ガイアフェイズ<br>開始))
B-->C{ガイアフォームが<br>次元横断星に}
C--ない-->D
C--ある-->c1{ガイアフォームの下に<br>ガイア惑星タイルが}
c1--ある-->D
c1--ない-->c2[ガイア惑星タイル下に<br>ガイア惑星タイルを置く]
c2-->D{ガイアエリアに<br>トークンがある}
D--ある-->F{惑星首府を}
F--建てていない-->f1[全てのトークンを<br>エリア2に置く]
F--建てている-->f2[フリーアクションと<br>同じレートで<br>資源変換]
f2-->f1
f1-->E
D--ない-->E>ガイアフェイズ終了]
```

イタル人の処理

graph TB
A((収入フェイズ))
A-->B((ガイアフェイズ<br>開始))
B-->C{ガイアフォームが<br>次元横断星に}
C--ない-->D
C--ある-->c1{ガイアフォームの下に<br>ガイア惑星タイルが}
c1--ある-->D
c1--ない-->c2[ガイア惑星タイル下に<br>ガイア惑星タイルを置く]
c2-->D{ガイアエリアに<br>トークンがある}
D--ある-->F{惑星首府を}
F--建てていない-->f1[全てのトークンを<br>エリア1に置く]
F--建てている-->f2[4トークンを破棄して<br>技術タイル取得]
f2-->f1
f1-->E
D--ない-->E>ガイアフェイズ終了]

バル・タック人の処理

graph TB
A((収入フェイズ))
A-->B((ガイアフェイズ<br>開始))
B-->C{ガイアフォームが<br>次元横断星に}
C--ない-->D
C--ある-->c1{ガイアフォームの下に<br>ガイア惑星タイルが}
c1--ある-->D
c1--ない-->c2[ガイア惑星タイル下に<br>ガイア惑星タイルを置く]
c2-->D{ガイアエリアに<br>トークンがある}
D--ない-->E{ガイアフォームが<br>ガイアエリアに}
D--ある-->d1[全てのトークンを<br>エリア1に置く]
d1-->E
E--ある-->e1[ガイアフォームを<br>勢力ボードに置く]
e1-->F
E--ない-->F>ガイアフェイズ終了]
```

書いてみて思ったこと:

  • 単に「トークンを移動して入植準備をする」だけなのに、相当なフローがあったという気づき
  • Officeソフトよりも格段に楽にソートされた状態でチャートが書けるのは素晴らしい
  • 可読性(特に各セクションの定義)に難あり

の3点が実感です。

これを元に、書き方を改善しながらチャート/シーケンス図が翔となると楽しみが止まりません。

Powered by WordPress & Theme by Anders Norén