概要
2021年から愛用しているmermaid.js。
- 可読性が高く
- markdownとの親和性が高く
- 再利用もしやすい
ため、ゲーム『ライザのアトリエ3』の序盤をシーケンス図にしてみました。
凡例
- 【】内:メインクエスト
- 〔〕内:ランドマーク名
- “”内:素材
- 《》内:調合アイテム
としています。
シーケンス図
今後の展望
こちらのシーケンス図、『ライザのアトリエ3』4周目の課題として都度、別サイトに起こしていきます。
2021年から愛用しているmermaid.js。
ため、ゲーム『ライザのアトリエ3』の序盤をシーケンス図にしてみました。
としています。
こちらのシーケンス図、『ライザのアトリエ3』4周目の課題として都度、別サイトに起こしていきます。
昨日の続きとなります。「キチッとした手順でお茶を入れると更においしくなる」と改めて気づいて以来、しっかりとした手順でお茶を入れたいと早見表を作ってみました。
こういうときにmermaidのシーケンスダイアグラムは頼りになります。
sequenceDiagram
participant m as マグカップ
participant p as ティーポット
participant k as ケトル
note over m,k: 開始
note over m,k: それぞれが清潔な状態であることを確認
note over k: お湯を沸かす
note over p,m: 暖めておく
note over p: 暖め完了
note over p: 茶葉を入れる
note over k: 水沸騰
note over p,k: お湯をティーポットに注ぐ
note over p: 抽出
note over m: 暖め完了
opt ミルクファーストの場合
note over m: 牛乳を注ぐ
end
note over m,p: お茶をマグカップに注ぐ
opt ティーファーストの場合
note over m: 牛乳を注ぐ
end
opt 必要に応じて
note over m: 砂糖などを入れる
end
note over m,k: 完了
こう、流れを書くときに使えるスクリプトは便利です。
を行ったボードゲーム『キャリコ』。その勢いが冷めぬうちに、セットアップ方法をメモしていきます。
用いたのはここ1ヶ月ですっかり虜になってしまったmermaid記法のシーケンス図。
こういったセットアップにとどまらず、
等も可能になったので、ボードゲームにおけるつまづきを整理し、すんなりと頭に入るようなシステムを構築できそうだと思いました。
前にも言っていますが
のは、自分が図に求めていたものです。
(次ページはどう書いたかです)
Markdownを本格的に書き始めてから習いだしたmermaid記法。ボードゲームのルールを表現するにはもってこいでしたので、
自分が一番好きな重ゲーの一つである『大鎌戦役』の戦闘に焦点を合わせたいと思います。
と、感覚で「ダイヤル設定してカードと合わせるだけ」思ってましたが、
が複雑。この、複雑さがまた醍醐味ではあります。
で、このフローでは書ききれなかったノルディック(北方)王国は以下のような条件分岐が発生します。
割合に条件が厳し目な用に見えますが、標準マップは湖が思いのほか多いので逃げられやすいというのが厄介です。
基本セットwith『彼方よりの侵攻』はまだルールがわかりやすいので、このペースで行けばすべてのルールをmermaid記法で書けそうです。
(次のページから、どうやって書いたかを記します)
ゲームの楽しみがまた広がりました。(ネタバレは極力避けています)
この2種により、また「このゲームを最初から攻略したい」という気運が高まりました。
先月、ドハマリしてしまった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: 後略
あとは、テーブルを見比べながら関係性を配置。
「登場人物の足取りを追体験」が大きいです。
の5W1Hが時系列に沿って流すことで理解度や没入感が飛躍的にアップ。
「だからここにこのアイテムが置いてあるのか」もおぼろげながら見えていきました。
「要素を組み合わせて形にしていき、一つの大きな物語にする」は、「素材を組み合わせて一つのアイテムにする」本作のアイテムクリエーションにつながるものがあります。
「物事を整理することで広がりが見える」の入り口に立てた気がします。
これで、一手間が省けます。
テキスト主体でフローチャートやシーケンス図、はたまたZENタイル(的な感情の動き)まで表示できるため重宝するようになったmermaid記法。
これを自ブログでもっと効率的に表示できないか?
と検索したところ、そのものズバリを発見しました。
WP Mermaid
https://ja.wordpress.org/plugins/wp-mermaid/
導入方法は通常のプラグインと同じく
で完了です。
ブロックエディタから
「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:新,美
```
すると、表示結果はこうなります。
これにより、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>ゲーム終了]
埋め込んだ結果が下記。
まだ詰めるところはありますが、形になっているとは思います。
元々はMarkdownエディタ「Typora」の使い勝手がいいということで連鎖的に見つけたフローチャートやシーケンス図。
これがエディタで書けるのは革命的な出来事ですし、更にブログに表示できるようになったのは更なる驚きと喜び。
など、改善点は山積み。ではありますが、これは一つのマイルストーン達成です。
このエディタを使うようになって、「表現力の豊かさ」に驚かされる日々。
まさか、これをメモすることができるとは思いませんでした。
きっかけはこれを知ったこと。
https://github.com/mermaid-js/mermaid
そこで、思ったことがこちらです。
この、記法、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エディタで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>ガイアフェイズ終了]
```
の3点が実感です。
これを元に、書き方を改善しながらチャート/シーケンス図が翔となると楽しみが止まりません。
Powered by WordPress & Theme by Anders Norén