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

関連記事

UEを使った2Dアニメ制作ツール「Odyssey」が無料化。UE5.6向けのプラグインとしてFabで提供開始
2025.06.12
UE・UEFNでY-Up座標系への変更が決定。UEFNでは6/7から適用、UEはUE5~6にかけて段階的に移行される
2025.06.06
「State of Unreal 2025」フォートナイト クリエイター向けの発表まとめ
2025.06.04
「MetaHuman」正式リリース。MayaやHoudiniなどあらゆるツールで利用できるようライセンス形態が変更
2025.06.04
UE5.6の新機能を紹介するチュートリアル記事、Epic Gamesが公開。文字列内のユーザー名などを置換できる「Naming Tokens」など3つの機能を解説
2025.06.04
Unreal Engine 5.6リリース!「次世代ハードウェアで60fpsを維持できるオープンワールドの構築」を目標に作られたバージョン
2025.06.04

注目記事ランキング

2025.06.05 - 2025.06.12
VIEW MORE

連載・特集ピックアップ

イベントカレンダー

2025

TimeEvent
all-day
WWDC25【カンファレンス】
all-day
【第4回:カラー】ゲームクリエイターのための数学講座 supported by TA Night【勉強会】
all-day
6月12日 Developers Night Cafe ~第8回 開発ツール x AI の今~【勉強会】
all-day
GitHubを使いこなすためにソニーの開発現場が取り組んでいるプラクティス - TL#13【勉強会】
all-day
PLATEAU Hands-on 19【勉強会】
all-day
Respect Training(6/12開催回)【勉強会】
all-day
エンジニアのためのMCP勉強会 #2【勉強会】
all-day
オートデスク新製品リリース!映像チェックバックツール『Autodesk Flow Capture』ローンチイベント
all-day
WWDC25【カンファレンス】
all-day
【締切】『神エボlab2025』エントリー【コンテスト】
all-day
【開始】『愛知ゲームキャッスル2』出展申込【展示会】
all-day
【開始】のこす!いかす!! マンガ・アニメ・ゲーム展 in Tokyo 2025【展示会】
all-day
blenderはじめの一歩by作るちゃんサポート【勉強会】
all-day
Sphinx+翻訳 Hack-a-thon 2025.6【勉強会】
all-day
TA Night × GUNCY’S「プロシージャル × モーキャプ × インフラ設計最前線!リアルな制作現場のいま」セミナー【勉強会】
all-day
アニメから得た学びを発表会【勉強会】
all-day
川越インディーゲーム + イラスト・まんが もくもく会 第16回【勉強会】
all-day
第11回なごやインディゲームもくもく会
all-day
第125回【オンライン開催】フリースタイルもくもく会【学生歓迎!】【勉強会】
all-day
[非公式] Kyoto.go remote #60 プロポーザルネタ出し会【勉強会】
all-day
【終了】【定期開催】技術に出会える - 技術書典18スペシャルオンラインイベント【勉強会】
all-day
【終了】技術書典18(オンライン開催)【展示会】
all-day
Apple Vision Pro & XRもくもく勉強会 #43[オンライン]【勉強会】
all-day
【開始】Eastern Martial Artists Week【展示会】
all-day
WWDC25 Recap for Spatial Computing【勉強会】
all-day
UV Study : Rust LT会 ~お好きなCrate紹介してください~【勉強会】
all-day
【オンライン】XRミーティング 2025/06/18【AR/CR/MR/SR/VR】【勉強会】
all-day
【ゲーム開発者の自分時間を考える】ゲーム開発者読書会 vol.6【勉強会/座談会】【勉強会】
all-day
【福岡】XRミーティング 2025/06/18 #XRMTG 【Zoom】【勉強会】
all-day
【終了】『日本のゲームは世界の教養になるのか ──コンテンツを「送り出す」最前線』オンライン配信(シラス)【勉強会】
all-day
【締切】『BIC Festival 2025』出展申込(ルーキー部門)【展示会】
all-day
【締切】『GPB: Connect@BitSummit 2025』エントリー【コンテスト】
all-day
iPadでSwift Playgroundsを学ぼう#62(2025-06-18)【勉強会】
all-day
PLATEAU Hands-on 20【勉強会】
all-day
Respect Training(6/18開催回)【勉強会】
all-day
Tokyo Indies【勉強会】
all-day
福岡オフィス移転記念イベント「DevelopersIO Fukuoka Day One」【勉強会】
all-day
第54回 Tokyo Jazug Night【勉強会】
VIEW MORE

今日の用語

ブレンド(Blend)
ブレンド 2つ以上のものを混ぜ合わせることを意味する英単語。 ゲーム制作においても、2つ以上の要素を特定の割合によって合成することを示す。
VIEW MORE

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