シャドバ1人回しアプリをつくった

こんにちは。tdTomato(@tdTomato628)です。
本記事はsvアドカレ2021の12日昼の部の記事になります。
今月は毎日記事がアップされるので要チェック! 昼の部 夜の部

作成したシャドバ1人回しアプリの作成動機と実装についての自分語りをしていきます。


どんなアプリ?

アプリはこちら → シャドバシミュレーター Shadowverse Simulator
簡単に説明すると、シャドバに実装されているカードを自由に追加し、ドラッグアンドドロップでゲームをシミュレーションできるアプリです。


作成動機

シャドバのリプレイがつらい

みなさん、リプレイ機能使ってますか?
競技志向の方はしっかりリプレイを見返し、チームメイトなんかと一緒に択の検討を行っているかと思います。

しかし、リプレイは単純に過去の対戦内容をなぞるだけなので、以前から限界を感じていました。

  1. 相手の手札、デッキ内容が見えない
  2. 手戻りができない
  3. 別択の操作が不可能

「このターン他にどういう動きができるだろう」とか、「その場合相手はどう動くか」とか、そういった情報は脳内or言葉のみにならざるを得ません。
もちろんテキストベースで議論を進めるのもいいのですが、あいにく私の脳の出来は良くなくて2手3手先になると「あれ、いまどういう状況だ」となるため、できれば視覚的に択の検討を行いたいわけです。

紙でのシャドバ、無理

じゃあ紙でシャドバしよう!
そう思い立ったが最後、あまりのトークンカードの量にあなたは発狂し何か訳の分らぬことを叫びつつ闇の中へ駆け出し虎になります。

TCGは物理的制約があるためかトークンカードは少ない傾向にあります。
また、トークンは単純な効果だったり、カードとは別の存在として扱われる場合が多いです。

一方シャドバには、トークンとして別のカードを加える効果を持つカードが非常に多く存在します。
特にデッキや手札にトークンを加える効果はDCGならではといっていいでしょう。
さらにカードそのものが分身したり変身したりと忙しく、アナログで再現すると紙とインクの消費がすごいことになります。

f:id:tdTomato628:20211212112050p:plain
トークン多すぎ部門代表AFネメシス

そのためデジタルかつアナログカードのように自由度の高い操作ができるシャドバのサポートツールが欲しいと思い、本アプリを作成した次第です。


1人回しは楽しい

いわゆる1人回しは、2つのデッキを1人で操作することを指します。
多くのTCGプレイヤーが調整のために取り入れており、デッキの勝ち筋やゲームの大局観を認識するために有効な練習方法の1つです。

私にはカードゲーム仲間がほとんどおらず、小学生で遊戯王に触れてからシャドバに出会うまでの約10年間は、図らずとも1人回しばかりやっていました。

孤独でしたが、2つの手札と盤面をいききしてあれやこれやと考えるのはとても楽しかった記憶があります。

f:id:tdTomato628:20211209103715p:plain:w200

ポケカ遊戯王MTGなどではデジタル1人回しツールが有志によって作成・提供されています。
ハースストーンやシャドバのようなDCGは対戦相手に困ることが少ないせいか、(私が知る限り)1人回しツールはみあたりませんでした。
大好きなシャドバで、ゆったり1人でデッキを回す時間が叶えばなあというのも作成動機のひとつです。

こだわったポイント

できるだけ使いやすく

当初は手札・盤面の枚数やターンまで厳密に管理することを考えていましたが、そのぶん操作の自由度が減ることを懸念しました。
あまりシャドバのルールに縛られず、シンプルかつ自由度を高くを目指して作成しています。

また、前述のように手動でゲームを再現する際、トークンカードの存在がネックになっていました。
なので今回のアプリでは、トークンカードをすぐに追加できる機能を実装しています。

ドラッグアンドドロップ操作

紙のカードをわちゃわちゃ触っている感じを再現したくて、ボタンではなくドラッグアンドドロップによる操作にしました。
アナログとデジタルの乖離をできる限り小さするため、基本的にマウス操作で完結するようにしています。

ガルラ様

盤面にガルラ様のカード3種いずれかを追加すると、コンソールにガルラ様が降臨します。


実装について

環境

React 17.0.2
Typescript 4.5.2
Hosting: Vercel

ドラッグアンドドロップ操作にはReact DnDCSSライブラリはmaterial-uiを採用しています。
特にreact-dndは利用場面が多そうなので今回をきっかけに学習できてよかったです。

余談ですがReactのロゴってシャドバのロゴに似てますよね。


作ってみた感想

パラメータありすぎ。この一言に尽きます。

「最大体力」「進化回数」「プレイ枚数」「ネクロマンスの合計」「破壊されたアーティファクトの数」……などなど、とてもじゃないですがすべてのカウンターを用意したら画面が埋まってしまうので、今回切り捨てました。

また、一見くくりが同じでもイコールでないパラメータも多く存在することを実感しました。
例えばネクロマンサーにみられるように「破壊されたカードの枚数」と「墓地の数」は別々ですし、エルフの「プレイ枚数」は「プレイしたカードの枚数」ではありません。

新しい弾が追加されるほど私達が意識すべきパラメータはどんどん増えており、要求される思考リソースは上がる一方ですね。

f:id:tdTomato628:20211212113452p:plain
表示項目数に限界を感じる


最後に

今後の機能追加

守護・必殺などの能力表示はやりたいと思いつつ、カードの見た目が混み合いそうでどこまでやるか悩んでいます(気が向いたらやりそう)。
英語対応も需要あればやる予定です。

他バグ報告や機能追加要望等あればTwitterまでご連絡ください。
Cygamesに怒られたらすぐ削除します。

謝辞

開発中意見をくれたり、想定外の使い方をしてくださりやがった友人たちに格別の感謝を。

f:id:tdTomato628:20211209111519p:plain