かっこいいメカがタワーオフェンスを繰り広げる『VOIDCRISIS』開発事例から見る、ロボット好きの心を動かす動きやプラモデルの外箱のような絵作りの秘訣【UNREAL FEST WEST ’22】

2023.01.24
注目記事ゲームの舞台裏講演レポートUNREAL FEST 2022アンリアルエンジン
この記事をシェア!
Twitter Facebook LINE B!
Twitter Facebook LINE B!

Epic Games Japan主催のUnreal Engine大型勉強会「UNREAL FEST WEST ’22」が、2022年11月19日(土)から11月20日(日)までの日程で開催されました。

2日目の「GAME DAY」に行われた『かっこいいメカのCo-opタワーオフェンスゲームを作ってみた;VOIDCRISIS開発事例』と題した講演では、タワーオフェンスゲーム『VOIDCRISIS』を開発したヘキサドライブのテクニカルアーティスト 岡本 鯉太郎氏とプログラマー 山田 健太郎氏が登壇。

ロボットが登場する本作において、あえて見せ場を誇張したケレン味のあるアニメーションの制作過程や、物理ベースレンダリングを得意とするUnreal Engineでプラモデルのパッケージイラストのような絵作りをする工夫などの解説が行われました。

TEXT / 田端 秀輝

EDIT /  神山 大輝

目次

『VOIDCRISIS』とは

VOIDCRISISは、作中で戦闘生体機官 Vital-Armor(以下、VA)と呼称されるロボットが活躍するアンジュレーション(高低差がある)タワーオフェンスゲームです。配信プラットフォームはSteamで、ネットワークを介したマルチプレイも可能です。

アートディレクションにはアニメーションだけでなくパッケージデザインも実績があるヤマモトヒロユキ氏など、岡本氏が「ロボットのゲームが大好きであればご存知のような名前が並んでおります」と紹介する面々がスタッフとしてクレジットされています。

本作で登場するVAのデザイン画は以下のようなものです。このデザイン画の機体がゲーム内ではどのように描画され、アニメーションするようになったのでしょうか。

ケレン味のあるアニメーション

本作でのVA、かっこよさを追求した決めポーズが特徴的なアニメーションについて、岡本氏は「ケレン味のあるアニメーション」と表現しています。

ケレン(外連)とは、歌舞伎や人形浄瑠璃におけるワクワクする表現や意表を突いた演出などを意味する言葉で、本作でのVAのアニメーションは敢えて見せ場を誇張した形で作られています。

VAのアニメーションについて、アートディレクションのヤマモトヒロユキ氏により、どのタイミングでどのような動きをするかという資料が用意されました。

両手に持ったエネルギーブレードで二連撃を行うアニメーションの資料。1撃目の右腕の振り下ろし始めのタイミングでは脱力していた左腕が、右腕を振り下ろしきったタイミングには一瞬で上腕を返し次の攻撃の一撃の準備に入っている。この細かな動きにもトレイルのエフェクトを追加する指示がある

アニメーションを付けた結果。右腕による斬り下ろしのエフェクト(画像上中央から右下へ)と同時に、左腕上腕の返しのトレイル(画像右上から左へ)も描かれている

アニメーション指示書と実装例

ダイナミックメカニカルアートシェーダー

本作の絵作りの特徴として、ロボットプラモデルのパッケージイラストを再現するというものがあります。それを実現するのが「ダイナミックメカニカルアートシェーダー」です。

「ダイナミックメカニカルアートシェーダー」を詳しくみていくと、以下のような技術に分けることができます。

  • ベースカラー疑似シェーディング
  • 疑似フレネル
  • スタジオハイライト
  • 疑似環境反射
  • 疑似ライティング
  • タイリングエミッシブ

ベースカラー疑似シェーディング

「モデル内の頂点位置」「光源(レベルの代表的なディレクショナルライト)と法線との内積結果」に基づいてトゥーンシェーディングのようなグラデーションをかけています。

「Physical Based RenderingではBase Colorに手を入れるのは邪道だと思う」と山田氏は言いつつも、プレイヤーの視線をVAの上部に誘導させる効果を優先するために採用しています。

「モデル内の頂点位置」「光源と法線の内積結果」から算出されたUVにて、画像右下のようなシェーディングマップを参照している

足元に近いところほど影がついている

疑似フレネル

基本的な計算は通常のフレネルと大きな違いはないのですが、色や明るさ、適用範囲をテクスチャで細かく設定できるようにしています。

スタジオハイライト

明暗がはっきりとしたキューブマップを用いた環境マッピングです。VAが宇宙空間にいるような表現をすると同時に、機体に細かい点が反射しているように見せることでVAの巨大さも表現しています。

後述のタイリングエミッシブに近い表現だが、こちらはVAのアニメーションに応じて光っている部分が変化するため、見た目が単調にならないようにする効果もある

疑似環境反射

法線が上を向いている方向に対して、マテリアルパラメーターで設定した色を上乗せしています。疑似的に地球の空の青色が反射しているような見た目にすることで、世界に対してVAがどの方向を向いているのかを表現しています。

疑似ライティング

レベル上に配置したライトとは別に、カメラ空間を基準した方向からライトを当てています。画面に対して常に同じ方向から光が当たっているように見せることで、プラモデルのパッケージ絵のような絵作りを実現させています。

この画像の場合、カメラの向きに関わらず常に右手の方からライトを当てている

タイリングエミッシブ

夜空のような細かい点のテクスチャを貼り付けることで、VAの巨大さを表現しています。

プラモデルのパッケージのような絵作りのために、シェーディング以外にも以下のような技術が取り入れられています。

エッジハイライト

エッジ部分を強調するイラストでの表現をモデルでも実現するため、機体のエッジ部分にポリゴンを仕込み、タイリングテクスチャで発光を表現しています。

この表現はマテリアルだけでは解決しなかったため、ポリゴンを追加したとのこと

関節光

機体内部での高エネルギー反応を表現するために、関節部分にパーティクルライトやエミッシブテクスチャが仕込まれています。

マテリアル設定例

アルファを使わない疑似半透明の表現

本講演では岡本氏から、処理負荷を下げるためアルファを使わずに疑似的な半透明の表現を実現させる、ディザリングを用いた手法についても解説がありました。

ディザリングとは、使用できる2つの色のピクセルをばらつかせて配置することで別の色調を表現する手法です。これをテクスチャにしてオパシティマスクで利用し、描画をところどころ細かく「抜く」ことで、全体的に見ると半透明のようになるよう描画されます。

エミッシブカラーは黄色でも、ところどころ描画をさせないことで球体の向こうが透けて見える表現ができる。半透明に弱いディファードレンダリングでも有効だ

講演では、「パソコンで使える色数が少なかった時代によく使われていた配列ディザリングについて紹介。

画僧右下のようなしきい値マップを使う事で、画像左下のようにグラデーションを2色のピクセルの配置で表現できる

他にもDitherTemporalAAやBlueNoiseなどを利用したディザリングの挙動を、「カメラがオブジェクトに近づいたときにオブジェクトを半透明にする」といった事例をもとに紹介しました。

画像右下がBlueNoiseのテクスチャ

画像右下のようなマテリアルでも、エフェクトをかければ粗さを目立たせさせずに「抜け」の表現ができる

Epic Online Serviceの活用

VOIDCRISISは最大5名でのマルチプレイが可能ですが、Epic Online Service(以下、EOS)を活用することで自社サーバを設置することなくオンラインプレイを実現させています。

EOSは、マルチプレイゲームで必要となる高品質なバックエンド機能を無料で提供するサービスです。公式のプラグインも用意されています。(VOIDCRISIS開発開始時には用意されてなかったため、別の有償プラグインを利用)

EOSの実装時にはIPアドレスやポート、プロトコルの設定も必要がないので、ネットワークやインフラの知識が無くてもオンラインゲームを作ることができ、しかも無料のためスモールスタートにも適しているそうです。

検証時に同一ネットワーク内のPCでプレイすると、P2Pサービスを介さず直接接続になるため注意が必要とのこと

かっこいいメカのCo-opタワーオフェンスゲームを作ってみた;VOIDCRISIS開発事例 | UNREAL FEST(アンリアルフェス) 公式サイトVOIDCRISIS 公式サイト

©2022 HEXADRIVE Inc.

田端 秀輝

「ゲームと社会をごちゃまぜにして楽しんじゃえ」がモットーの、フリーのコンテンツ開発者。節電ゲーム「#denkimeter」やVRコンテンツ、体験型エンタメの開発をしています。モニター画面の中だけで完結しないゲーム体験が好きで、ここ十数年注目しているのはアイドルマスターです。

関連記事

UE公式の大型イベント「UNREAL FEST 2024 TOKYO」の講演アーカイブ動画・スライド資料が公開
2024.11.15
Unreal Engine 5.5がリリース。Selectノードなしで複雑な選択ロジックを作れる「Chooser」正式導入のほか、Navmesh間を橋渡しするNavLinkの自動生成機能が追加
2024.11.13
プレイヤーの動きによって波立つ水面をNiagaraで実装。ホラーゲーム『Still Wakes the Deep』開発者による水の表現手法を解説する記事が、UE公式ブログにて公開
2024.11.11
「UNREAL FEST 2024 TOKYO」最速フォトレポート。約2,000人のUE5ユーザーが集ったリアル会場の雰囲気を写真でお届け
2024.11.02
UE・Unity・GodotをサポートするIDE「Rider」が「WebStorm」とともに非商用に限り無料で使用可能に
2024.10.25
UE5&Houdiniを用いた効率的なプロップ制作や“TAが教えるUE5 お役立ちテクニック”を一挙紹介。第4回「Unreal Engine Meetup Connect」講演資料が公開
2024.10.24

注目記事ランキング

2024.11.14 - 2024.11.21
VIEW MORE

連載・特集ピックアップ

イベントカレンダー

VIEW MORE

今日の用語

フォワードシェーディング(Forward Shading)
フォワードシェーディング オブジェクト毎にライティングの計算を行い、その計算結果を描画するレンダリング手法。フォワードレンダリングともいう。ディファードシェーディング(Deferred Shading)に比べてポストプロセスの自由度は低いが、(何も物を配置しなかった際にかかる)最低限の描画コストが低く、アンチエイリアス処理などにおいてフォワードシェーディングの方が有効な分野も存在する。
VIEW MORE

Xで最新情報をチェック!