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

かっこいいメカがタワーオフェンスを繰り広げる『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コンテンツ、体験型エンタメの開発をしています。モニター画面の中だけで完結しないゲーム体験が好きで、ここ十数年注目しているのはアイドルマスターです。

関連記事

SideFX、Copernicusを使ってHoudiniでプロシージャルにトーンのそろったアセットを作成する学習用技術デモ「Project Skylark」を公開。UE5用プロジェクトもダウンロードできる
2025.06.20
Epic Games、UEでゲームのアクセシビリティを向上させる実装事例を解説。「GDC 2025」などの講演内容を紹介する記事がEpic Developer Communityで公開
2025.06.20
UE5で2.5Dゲームを開発するチュートリアルがEpic Gamesから公開中。アセット一式が入ったプロジェクトファイルも配布
2025.06.13
UEの自動車業界向け公式無料イベント「Build: Tokyo’25 for Automotive」、8/5(火)に開催。「AFEELA 1」などのセッションを含む8講演を実施
2025.06.13
UEを使った2Dアニメ制作ツール「Odyssey」が無料化。UE5.6向けのプラグインとしてFabで提供開始
2025.06.12
UE・UEFNでY-Up座標系への変更が決定。UEFNでは6/7から適用、UEはUE5~6にかけて段階的に移行される
2025.06.06

注目記事ランキング

2025.06.16 - 2025.06.23
VIEW MORE

連載・特集ピックアップ

イベントカレンダー

2025

TimeEvent
all-day
レトロゲームDEアソビバ in東京【展示会】
all-day
【終了】のこす!いかす!! マンガ・アニメ・ゲーム展 in Tokyo 2025【展示会】
all-day
【終了】大カプコン展【展示会】
all-day
AkarengaLT vol.34(2025-6-22)【勉強会】
all-day
第18回 目黒インディゲームもくもく会 | 協賛:株式会社アカツキゲームス【勉強会】
all-day
Indie Game Hub(インディーゲーム交流会)6/23【勉強会】
all-day
VS Code Monthly Update - May 2025 (version 1.101)【勉強会】
all-day
「プロセカ」のアートディレクターが解説!心に響くイラストメイキング【勉強会】
all-day
ADX / ADX LE勉強会 vol.3【勉強会】
all-day
Clineの実力と使いどころ -現場から見る!スピード開発実践事例-【勉強会】
all-day
PLATEAU Hands-on 21【勉強会】
all-day
Unreal Fest Bali 2025 【カンファレンス】
all-day
【XRトレンドウォッチ&体験会!】LODGE XR Talk Vol.28 / WWDC25 & AWE USA 2025 Report【勉強会】
all-day
【終了】Eastern Martial Artists Week【展示会】
all-day
iPadでSwift Playgroundsを学ぼう#63(2025-06-25)【勉強会】
all-day
Unreal Fest Bali 2025 【カンファレンス】
all-day
AI時代のナレッジマネジメント最前線 - Obsidianではじめる、知の構築 -【勉強会】
all-day
DroidKaigi.collect { #20@Tokyo }【勉強会】
all-day
SIG-AUDIO 2025 Vol.03 オンラインセミナー 「オーディオプラグイン開発」【勉強会】
all-day
visionOS Engineer Meetup: after WWDC25 オンライントーク会【勉強会】
all-day
日本と西洋のゲームデザインの違いを探る ~キャラクターとバイオーム設計~【勉強会】
all-day
PLATEAU Hack Challenge 2025 for ルーキー【勉強会】
all-day
【#XRm鹿児島】XRコンテンツをつくってみる会 #4【勉強会】
all-day
【オンライン】Unreal Engine もくもく会 in 富山#33【勉強会】
all-day
【開始】『大阪ゲームダンジョン』出展申込【展示会】
all-day
AI Codingを極める会 - VS Code Meetup × GitHub dockyard【勉強会】
all-day
Bluesky Meetup in Osaka vol.3【コンテスト】
all-day
京都ゲーム制作全般もくもく会 #4【勉強会】
all-day
銀座インディゲームもくもく会 第49回(協賛:株式会社コナミデジタルエンタテインメント)【勉強会】
VIEW MORE

今日の用語

法線
ホウセン 頂点がどの方向に向いているのかを決定するベクトル情報。ライティング情報を受けて、どのような方向に陰影を作リ出すかを決定する処理に利用する。 マテリアル内で、計算やテクスチャ情報により法線をコントロールすることで、メッシュそのものを弄らずに立体感を出すことが可能。 面の表裏を表す面法線もある。
VIEW MORE

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