『シャドバ エボルヴ』コラボパック“カードファイト!! ヴァンガード”新カード2枚（ビショップクラス）をファミ通App独占公開！
2024-06-03 17:00
そのほかのおすすめ記事
初心者向け記事
『シャドウバース』の美麗カードが生まれるまで
東京国際フォーラムで行われたUnity開発者のためのカンファレンスイベントUnite Tokyo 2017。
今回はそこで行われた講演のひとつ“『Shadowverse』開発事例。 ～美麗カードが動く！ 制作テクニックのすべて～”をリポートしていこう。
 |
いま流行の本格カードバトルゲーム『シャドウバース』の魅力のひとつ、美麗なグラフィック演出はどのようにして作られたのか？ その謎に迫ってみよう。
講演を行ってくれたのは、サイゲームスの大道賢人氏と島村亜空氏だ。
 |
▲サイゲームス エンジニアリーダー/クライアントサイドの大道賢人氏（写真右）と、同社サブマネージャー/3DCGアーティストの島村亜空氏（写真左）
開発体制も個性的、TCGプランナーとは？
『シャドウバース』は、手札40枚のカードを駆使して戦う言わずと知れたカードゲーム。高い競技性や奥深い戦略要素だけなく、美麗なカードも評価を得ている作品で、今回の講演ではその美しさの秘密が明かされるとあり、会場には多くの人が訪れていた。。
まず講演で話題となったのが、開発体制について。『シャドウバース』は、プランナー、エンジニア、サウンド、アーティスト、TCGプランナーという5ラインの開発体制となっている。
 |
この中でもカード作成の中核を担っているのは、アーティストとTCGプランナー。アーティストはそのまま、カードの絵柄やエフェクト付けなどを行う人たちだが、TCGプランナーというのは聞きなれない。
TCGプランナーとは、つぎにどのようなカードを実装するかを検討し、それを一度実際に紙のカードゲームにしてテストプレイをすることで調整を行っている人たちだという。言うなれば、すべてのカードの生みの親だ。
 |
開発はこのTCGプランナーとアーティストを筆頭に始まり、そこで作られた仕様書がプランナーに渡るころにはつぎのカードパックのカード仕様を練り、エンジニアに渡るころにはさらにつぎのカード仕様の制作に入っているという。
 |
これが『シャドウバース』のカード制作ワークフローとなるわけだが、では美しさの秘密はどこにあるのだろうか？
プレミアムカードが出来るまでの試行錯誤
その秘密を語ってくれたのは島村氏。氏は、俗にキラカードとも呼ばれるプレミアムカードの制作方法について詳しく語ってくれた。
プレミアムカードとは、通常のカードとは異なり、カードそのものに派手なエフェクトがかかっており、一目見ただけでもそれとわかるようになっている。
すべてのカードにプレミアムカードバージョンが実装されているため、その数はかなりのものになる。
 |
事実、このプレミアムカード作りは大仕事らしく、話によると3ヵ月に200枚以上作成するスピードが求められることもあり、そのコスト管理とクオリティの担保は非常に大変だったという。
またそのほかにも、開発当初はエフェクトのパーティクルがカード裏面にまで透過してしまうという不具合もあったりと、プレミアムカード作りはかなりの手間がかかっていたそうだ。
ではそれらの問題をどのように解決していったのか？
結論として、すべてを解決したのは特殊なシェーダーの利用だという。島村氏はこれについて「シェーダーといえば3Dグラフィックのものというイメージがありますが、2Dでもかなり有効なものです。3Dツールを必要とせず、Unityとペインタだけで作成が可能なので、コストもかなり抑えられます」と語る。
 |
それだけでなく、これはカードを見てもわかることだが、リッチな表現にも耐えられるものになっている、つまりはクオリティが担保されているということも理解できるだろう。
また、パーティクルの透過問題も、2Dシェーダーを用いたことにより、エフェクトが平面で完結。これも解決したという。
では、具体的にはどのようにしてシェーダーを活用しているのだろう？
その前に、シェーダーがいまいち分かっていないという人のために、簡単に説明しておこう。
シェーダーとは、オブジェクトを描画するのに使用されるピクセルへのプログラム。陰影処理はもちろん、グラデーションなどもシェーダーによって行われディスプレイに出力される。
前述の通り、通常は3Dグラフィックで用いられるものだが、2Dピクセルに動きを与えることも可能だ。これを踏まえた上で、作成として提示されたものを見てみよう。
まず作例として出されたものは、バハムートのカード（進化後）。
プレミアムカードでは、口からブレスが出ているところが表現され、さらに背景には雷が走り、ブレスや雷によって生まれた光がバハムートを照らしている。
このプレミアムカードには、4種類のシェーダーが用いられているという。
ひとつめは、ブレスの模様となるもので、これは画面全体にモヤを回転させることで表現。また、ブレスが揺らめいて見えるように歪みを与え、それを見せたい部分だけ表示（マスク）させることで、ブレス部分にのみ摘要。さらに雷を光らせたい部分と、それによって明るくなってほしい部分を選択（マスク）して、このようなものが出来上がっている。
 |
 |
 |
ほかのプレミアムカードも、基本的にはこのように、エフェクトとなるマテリアルを作成して効果を付け、それをマスクし、合成して作られているとのこと。
このシェーダーの利点は、マスクに濃淡をつけることで表現の幅が広がること。RGBチャンネルを使い、それぞれに違うシェーダーを与えることで簡単にリッチなエフェクトが作れることだという。
 |
 |
 |
3ヵ月に200枚以上という膨大な数のカードを効率的にエフェクト付けできる背景には、このような秘密があったのだ。
最適化によりインフラにもやさしいアプリに
しかしこうなってくると予想される問題がある。それは、カード1枚1枚のデータの肥大化だ。カードそれぞれにマテリアルが与えられ、それぞれがシェーダーを通るとなると、1回のバトルで読み込まれるデータ量は相当なものになってしまう。
この容量の問題はやはりひとつのハードルとなったようだ。そこで活躍したのが大道氏率いるエンジニアたち。
彼らは複数のカードにまったく同じテクスチャが使用されていることに気付き、エフェクトのアセットバンドルをカードごとに用意するのではなく、素材となるものを別のアセットとして処理することを提案。
 |
 |
その後、個別ビルドをすると参照が外れるといった事態も命名規則を共通化させることでカードのクオリティ低下やエラーを起こすことなく容量を削減することに成功したという。
そうして行われた最適化の結果、1回のバトルで使われる容量を30MBにまで抑えることができたほか、サーバー転送量も大幅に削減できるようになったという。
 |
 |
結果として、動作がよくなっただけでなくインフラにもやさしいものに仕上げることができたが、そこに行き着くまでにはたくさんの衝突があったという。
大道氏「エンジニアの作業、とくに最適化の部分はちりも積もればというものが多く、簡単には結果が出ないので理解されにくい部分です」と、その苦悩を語りつつも、結果として大きな成果挙げたことを語った。
スキル設計にも作業効率化が
システム的な話は以上となるが、そのほかにカードのスキルたちはどのように作られているのかという興味深い話もなされたので、これも簡単にまとめておこう。
『シャドウバース』に実装されているカードはユニット、スペル、アミュレット、トークンなど、そのすべてを合わせると1000枚以上にもなるというが、カードにはそれぞれしっかりと個性あるスキルが持たせられている。
では、どのようにして被りのないよう、カードたちにスキルを持たせているのだろうか？
カードに備えられるスキルは、スキル、オプション、発動条件、ターゲット、タイミング、発動前処理という6つの要素により構成されているという。
 |
スキルはダメージを与える、ドローするといった効果を指すもの、オプションはその詳細となり、ダメージをいくつ与えるか、何をドローするかなどのこと。
発動前条件、ターゲット、タイミングは文字通り、どういう条件下でスキルが発動するのか、何を対象とするか、どのタイミングでスキルを発動させるかを指す。
発動前処理とは、たとえばネクロマンサーが使用する、墓場を消費するスキルなどで利用される項。スキル発動に墓場を○消費という条件がここに当たる。
これらをどう組み合わせるかによって、カードは作り出されているそうだ。
バランス調整の効率化も図れるかもしれないが、このシステムの最大の利点は、エンジニアの負担を減らせるという点にあるという。カードのスキルという複雑なパラメーターをたった6項目にまとめることによって、カードに簡単にデータを載せられるようになるのだ。
 |
 |
 |
新カードパック実装となると、たくさんのカードを一気に実装するため、かなりの作業を求められるところだが、サイゲームスの『シャドウバース』チームはこのような最適化を図ることによって、クオリティを損なうことなく問題を解決していっているという。
最新YouTube動画
そのほかのおすすめ記事
初心者向け記事
シャドウバースの最新記事
シャドウバース
| 対応機種 | iOS／Android |
|---|---|
| 価格 | 無料（アプリ内課金あり） |
| ジャンル | カードゲーム |
|---|---|
| メーカー | サイゲームス |
| 公式サイト | https://shadowverse.jp/ |
| 公式Twitter | https://twitter.com/shadowverse_jp |
| 配信日 | 配信中 |
| コピーライト | (c) Cygames, Inc. |
