マルチプラットフォーム向け統合開発環境「Unity」を提供するユニティ・テクノロジーズ・ジャパンは、5月8日～9日の2日間、Unityに関する国内最大のカンファレンスイベント「Unite 2017 Tokyo」を東京国際フォーラムで開催した。日本では2012年から始まり、今年で6年目となるUnite 2017 Tokyoは、UnityユーザーによるUnityユーザーのためのテクニカルな講演やブース出展が数多く行われる、開発者同士の交流を体験できるイベントだ。
本稿では、5月9日12時50分より行われた、「『Shadowverse開発事例』～美麗カードが動く！制作テクニックのすべて～」についてのレポートをお届けしていく。
なお、本講演には、Cygamesのエンジニアリーダー／クライアントサイドの大道賢人氏、サブマネージャー／3DCGアーティストの島村亜空氏が登壇。『Shadowverse』における開発体制の公開や、カード制作の効率化、プレミアムカードの演出がどのような仕組みになっているかについての紹介を行った。
【講師紹介】
・株式会社Cygames エンジニアリーダー／クライアントサイド 大道賢人氏（写真右）
・株式会社Cygames サブマネージャー／3DCGアーティスト 島村亜空氏（写真左）
講演が始まるとまずは、大道氏・島村氏の自己紹介やゲーム概要を紹介した。
6月でリリース1周年を迎える『Shadowverse』は、『神撃のバハムート』に登場する1万枚以上のカードリソースを活かして制作された本格スマホカードバトルゲームだ。現在までに900万ダウンロードを突破しており、DAU（デイリーアクティブユーザー）も100万人以上だという。また、大道氏はUnityで開発している強みとして、同タイトルをApp Store、Google Play、DMM.com、Steamの4プラットフォームで展開していることを挙げた。
■開発体制・ワークフロー
『Shadowverse』の開発体制は、主に5つのセクションから成り立っているという。大道氏は、各セクションの役割について下記のように説明した。
プランナー：仕様やマスターデータの作成を行う
エンジニア：データの実装を担う
サウンド：SEやBGMの作成を行う
アーティスト：プレミアムカードの演出などカードごとのエフェクトを作成する
TCGプランナー：カードデザインを行う全てのカードの生みの親
また、大道氏はUnityでカードデザインを行わず、あえてアナログカードでゲームデザインを行っていることには主に2つの理由があると話す。
まずひとつ目は、『Shadowverse』のプレイ感を、アナログカードゲームで遊んでいるときの感覚に近付けたいという狙いがあるという。ふたつ目は、TCGプランナーにはアナログゲームのプロプレイヤーが多く、彼らがベストなパフォーマンスを発揮できるようこの形を取っているとのことだった。
▲TCGプランナーは、紙に印刷されたカードを実際に作成し、次にどのようなカードを実装するかをプレイしながらゲームデザインするポジション。
続いて、ワークフローについて紹介。『Shadowverse』ではまず、TCGプランナーがカードデザインをし、それと同時にアーティストがプレミアムカードやエフェクトの作成を開始する。カード案が完成したらプランナーが仕様とマスターを作成、これをサウンドとエンジニアが実装するという流れだ。またこの際、エンジニアはリソースの組込作業を行うため、アーティストが作成したプレミアムカードやエフェクトについても実装を行うとのこと。
▲こちらが、ひとつのバージョンをリリースするまでに行う作業工程。
ただ、TCGプランナーとアーティストは同タイトルにとって非常に重要なポジションであり、カードデザインの作製には時間を要するため、この2つのセクションにおいてはカード案が完成してプランナーに渡した段階で次のバージョンの作業を行っているという。そのため、エンジニアが実装を終える頃には、TCGプランナーとアーティストはさらに2バージョン先の作業を行っている。
▲実際の現場の作業工程はこのような形に。大道氏は、現在ゲーム内では第4弾までのカードパックがリリースされているが、TCGプランナーやアーティストは第6弾の作業をしていると説明した。
■プレミアムカード制作
ここからはプレミアムカードの制作技法についての話になるため、話し手を島村氏へバトンタッチ。まず島村氏は、プレミアムカードがどういったものかの紹介を行った。
▲プレミアムカードとは、効果は通常のものと同じだが、演出にオリジナルの動きやエフェクトが搭載された特殊なカード。『Shadowverse』では、ゲーム内に登場する1000枚以上のカード全てにプレミアムカードが存在する。
島村氏は、このプレミアムカードを制作するにあたって、下記の3つの課題を乗り越える必要があったと語った。
●制作コスト
3ヶ月に1度、アップデートにより200枚以上のカードを追加しているため、短期間でプレミアムカードを仕上げるフローを構築する必要がある。
●描画の懸念
各カードは画面上を移動したり回転したり激しく動き回るため、パーティクルなどを使ってプレミアムカードを制作した場合、カードの裏側にエフェクトがめり込んで見た目が崩れてしまう恐れがある。どのような角度・位置でも正しく表示される手段を考える必要がある。
●クオリティ
コストは抑えつつも、より良いもの、見たことがないものをユーザーに提供したいという想いから高クオリティを実現するために専用の実装方法を構築する必要がある。
これらの問題点を解決するために選んだのは”シェーダーのみで演出を作成する”という比較的シンプルな手段だったという。プレミアムカード制作専用に、特殊な機能を備えたシェーダーを開発したとのことだった。続いて島村氏は、シェーダーのみで演出作成をする利点について、下記3つのポイントを挙げた。
●制作工程がシンプル
3Dツールやアニメーションツールを必要とせず、Unityとぺインタのみで演出を作成可能なため、制作コストを抑えることができる。
●リッチな演出が可能
クオリティ面においても、シンプルながら必要な機能が備わっているため、多種多様な表現が可能。シェーダーを使用することでイラストに歪みを加えるという表現ができるようになったことが、臨場感のある演出を可能にした。
●描画順が崩れない
平面の中で演出が完結するため、オブジェクトが画面上を動き回ったり、回転したりしてもカード内の描画順が崩れる心配がない。
▲プレミアムカードの演出は、専用のシェーダーを使用してマテリアル内で全て完結しているため、シーン上の構造は非常にシンプルなものになっているとのこと。
この専用のシェーダーは通称「カードシェーダー」と呼ばれており、これについて島村氏は、Unity標準のシェーダー言語であるShaderLabを使用して作成されたものであることや、作成したシェーダーは1つであること、プレミアムカードの演出を作成するための機能が全て備わっていることなどを紹介した。これによりデザイナーは、カードシェーダーを適応したマテリアルインスペクターのみで演出を作成可能。
さらに、ここからはバハムートの事例をもとに作成したカードシェーダーの主要機能を紹介。そもそも、カードシェーダーにはベースとしてカード画像を表示する機能があり、その上から効果を重ねていくための3つの機能で構成されているとのことだ。
▲カードシェーダーを使用したマテリアルインスペクターは、写真右側のような見た目になっている。
1.テクスチャ合成
タイリング可能な素材をテクスチャとして作成し、カード画像の上に合成。合成タイプは「加算」、「減算」、「透明化」、移動タイプは「スクロール」、「回転」、「極座標」から選択が可能となっている。さらに、合成する際の色や速度が制限できる各種パラメータが用意されている。
▲こちらの画像では、まだ画面全体にテクスチャが合成されている状態。
2.歪み効果
歪み専用の素材テクスチャを使用してカード画像に歪みを与えている。テクスチャ合成と同じく「スクロール」、「回転」、「極座標」の移動タイプを選択可能で、歪みの強度や速度を指定できる各種パラメータが用意されている。
▲こちらも現状は画面全体に歪みが掛かっている状態となる。
3.合成、歪みの範囲指定
カードごとに専用のマスクテクスチャを用意し、各チャンネルにテクスチャ合成と歪みの範囲指定をしている。これにより、先ほどまで画面全体に適応されていた合成テクスチャと歪み効果がカード内の任意の箇所に適応できる。
カードシェーダーの主要機能の紹介が終わると、続いてはプレミアムカードで使用するデータについて紹介。プレミアムカードには、以下の4種類のデータの組み合わせで作成されているという。
1.カードイラスト
ベースとなるカードイラスト。プレミアムカード専用のものではなく、ノーマルのカードと共通のものを使用している。
2.マスク
RGBの各チャンネルに用途を分けて描き込んだ1枚のカラーテクスチャデータとして出力したもの。赤と緑のチャンネルはそれぞれテクスチャの合成ファイルを指定し、青のチャンネルは歪み効果の範囲を指定している。カードイラスト1枚につき、マスクを1枚作成しているとの話だった。
3.合成テクスチャ
タイリングされたテクスチャを用意し、合成に使用している。
4.マテリアル
カードシェーダーを使用したマテリアル。他3つのデータを組み合わせて演出を作成している。
【プレミアムカードの作例】
続いて島村氏は、これまでに紹介した機能やデータを用いて、実際にどのようなプレミアムカードを作成しているか、3つの作例をもとに紹介した。
「夜の魔術師」のプレミアムカードでは、杖の先が光り、その光を受けてキャラクターが照らされるような演出となっている。ここでは、赤のマスクは照り返しの表現に使用しており、マスクを描き込むことでイラストに対して実際に光が当たっているかのような幻想的な表現を可能にしている。緑のマスクは杖の先から溢れ出すオーラを表現するのに使用している。青のマスクは服や髪の揺れを表現するのに使用している。歪み効果を使いこなすことで、柔らかい揺れの表現を実現している。
「天輪のゴーレム」のカードは、地面を叩き付けている絵が描かれている。こちらのプレミアムカードでは、地面の割れ目から溢れ出す光の筋や、手前に描かれた兵士たちの照り返しを表現している。緑のマスクは、天輪のゴーレムの身体の溝部分に伝うエネルギーのような光の表現に使用している。青のマスクでは、地面を叩き付けたことによる地響きのような揺れを表現している。
最後に紹介された作例は「千年妖狐・ユエル」のプレミアムカード。カード全体に舞い散っている火の粉は赤のマスクを使用して表現している。丸で描かれているのは、流れる粒子をランダムに点滅させるため、さらに丸の濃度を変えて奥行きを作り出していることを島村氏は説明した。緑のマスクでは、キャラクターの左右にある火の玉を表現。マスクの描き方と合成テクスチャを上手く組み合わせることで、流体の表現も可能になっているとのことだ。広範囲に描き込まれた青のマスクは、服や髪の揺れに加えて、熱による大気の揺れも表現している。マスクの濃さやぼかし具合を描き分けることで、歪み表現の中でも別の揺れを同時に表現可能となっている。
これらの作例をもとに、島村氏は「同じカードシェーダーを使用していても、使い方次第で全く異なる演出を作り出すことが可能となっています」とコメントした。作例の紹介から、シェーダーは思っている以上に多くのことができるため、多種多様な表現を実現する可能性を秘めていることが見て取れた。一般的に3Dゲームに使用されているイメージがあるがシェーダーだが、2Dアニメーションにおいても非常に有用なことが実証された。最後に島村氏は、シェーダーはカスタマイズすることでカード作成以外の用途にも利用可能なため、今後は姿を変えて様々なタイトルで活用できるのではないかと語り発表の締めとした。
■最適化と開発効率化
最後に、アーティストが描いたものをエンジニアが工夫をしてゲーム内で実現している方法について、再び大道氏が登壇して説明した。
まず大道氏は、『Shadowverse』では、1枚のカードに対して最大4つのエフェクトを使用していることを紹介。プレミアムカードにおいては多量のテクスチャを使用していることがボトルネックになる問題だったと話す。ここで、通常ならばシェーダーのサイズを小さくして解決したくなるところだが、プレミアムカードのクオリティを落とさないためには別の解決法を模索しなければならなかったという。そこで登場したのが、アセットバンドルを使った最適化である。
▲カードの実装と共にエフェクトの種類も増えていく。
▲エフェクトA、エフェクトBそれぞれの中に「テクスチャA」「テクスチャB」が含まれており、これが非常にもったいないことだと大道氏は話した。
▲そこで考えられたのが、テクスチャの共有だ。アセットバンドルA、アセットバンドルBというエフェクトにそれぞれアセットバンドルC～Fのテクスチャを参照させることで、テクスチャが重複することがなくなったという。
次に問題が発生したのは”個別にビルドすると参照が外れる”ことだという。大道氏は、これを命名規則を共通化することで解決したと紹介した。
▲Shuriken、マテリアル、テクスチャ、アセットバンドルの命名規則を統一することで、必要ところに必要なものを適応させることができるようになったとのこと。
その結果、1回のバトルに対して全体として約30MBの最適化を行うことに成功。これはサービス全体で見ると約30TBという数値になるという。分かりやすく目に見えるところでは、データ量が少なくなることでダウンロード量が少なくなるためインフラに優しく、ユーザーにとってもダウンロードの時間短縮に繋がっている。
▲作業としては地道で即効性があるものではないことから、大道氏は、1MBでも軽くすることにこだわっている人がいることを忘れないでほしいとの想いを訴えた。
最後に、開発効率化について言及。現在、『Shadowverse』に登場している1000枚以上のカードのスキルは、以下の6つの要素と実装の組み合わせから成り立っているという。
スキル：どのようなスキルになるかという情報。ダメージを与える、回復をするなどが挙げられる。
オプション：より細かい、ダメージなら何ダメージ、ドローなら何を引いてくるのかという情報。
発動条件：コストが5である、相手の場にカードが出ているなど、特定の状態やスキルを発動する条件を示す情報。
ターゲット：スキルの対象にできるターゲットの情報。場に出ているカード、自分の手札、デッキ内のカードなどが挙げられる。
タイミング：いつスキルが発動するかの情報。手札からプレイされたときや、カードが破壊されたときなどが挙げられる。
発動前処理：スキルを発動する前にかかるコスト消費についての情報。ネクロマンサーのネクロマンス（墓場のカードを使用して効果を発動）がいくつ必要かなどが挙げられる。
さらに『Shadowverse』では、クラスの細分化をすることによって異なるスキル内容と発動条件を組み合わせることによってスキルを量産している。基本的には、ひとつのクラスにひとつの仕事をさせるという実装方針のもと制作を進めているとのこと。
ここからは実際にゲーム内に実装されているカードを例にスキル構築がどのようになされているかを紹介。
▲写真にある「ブレイジングブレス」は、下記のような内容となる。
スキル例1 スペルカード「ブレイジングブレス」
スキル：ダメージを与える
オプション：2ダメージ
発動条件：相手の場にカードがある時
ターゲット：相手の場に出ているカード
タイミング：プレイ時
発動前処理：なし
▲「森荒らしへの報い」も相手のフォロワーに2ダメージを与えることができるカード。しかしこちらは、ダメージを与える効果に加えてフェアリーをドローする効果も付いている。
大道氏は、複数のスキルやオプションを設定できることにより、より多彩なスキルを実現することができるようになっていると説明した。基本的には6つの要素により構築されているものだが、パラメータの組み合わせによって全く新しいカードが登場している印象を与えられると話した。その例として、下記の「わがままプリンセス」や「ネフティス」といったカードを紹介した。
▲「わがままプリンセス」は、プレイすることで場にもう1体フォロワーを出すことができるカードだ。
▲「ネフティス」は、プレイしたときに場がいっぱいになるまでフォロワーを出し、それをすぐに破壊するという複雑な要素が絡み合ったカード。
こういった開発効率化を図ることにより、「新カード追加時に新規実装が不要」「機能の再発名を防止」「改修コストの削減」「バランス調整の効率化」といった恩恵が受けられると解説した。
▲バグが発生した場合も問題の切り分けがしやすく対処しやすいとのこと。
最後に大道氏は本講演のおさらいとして、”アーティストが如何にプレミアムカードのクオリティを追求して作成していくか”、”エンジニアがどのような形で最適化し安定運用をしていくか”、最後に”効率化することによってプランナーやエンジニアを含む全員の工数軽減に繋げるか”を紹介してきたことをまとめた。そして、これらの努力や工夫は全て「最高のコンテンツを作るためのもの」とコメントし、講演の締めとした。
■関連リンク
■『Shadowverse』（国内アプリ版）
■『Shadowverse』（国内PC版）
Copyright (C) since 1998 DMM All Rights Reserved.
