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

関連記事

「Steam Audio」がオープンソース化。UnityやUEに統合できる、ゲームやVRアプリ用の空間オーディオツール
2024.02.22
実写映像を3Dアニメーション化するAIツール「Wonder Studio」にUEエクスポート機能追加。カメラやキャラクターアニメーションなどの要素に分解も可能
2024.02.16
Unreal Engine向けゲーム制作コンテスト『第21回UE5ぷちコン』開始!テーマは「おす」。応募締切は4/7(日)
2024.02.16
揺れ物を手軽に「かわいく」揺らせる疑似物理プラグイン「KawaiiPhysics」がアップデート。ボーン間の距離を維持して、モデルのスカート貫通問題を緩和しやすく
2024.02.12
「Unreal Engine」2024年2月の無料マーケットプレイスコンテンツが公開!Steam APIを活用したブループリントアセットや、ファンタジックなインテリアを集めた環境アセットなど
2024.02.07
世界6か国で行われるアンリアルエンジン公式イベント『Unreal Fest 2024』の開催日が決定。『UNREAL FEST 2024 TOKYO』は11/2(土)に開催される
2024.02.02

注目記事ランキング

2024.02.19 - 2024.02.26
1
UEFNで使えるプログラミング言語「Verse」のノウハウが集結。『UEFN.Tokyo 勉強会 03 Verse Night』レポート
2
【2022年5月版】今から始めるフォートナイトの「クリエイティブ」モードープレイ開始から基本的な操作方法まで解説
3
『フォートナイト』で動く本格的なゲームが作れるツール「UEFN」とは?従来のクリエイティブモードから進化したポイントを一挙紹介!
4
【CHALLENGE1】「クリエイター ポータル」を使って、UEFNで作成した島を世界中に公開する
5
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.1「アイテム系」
6
フォートナイト クリエイティブとUEFNで使える仕掛け一覧
7
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.5「島の設定」
8
NIKEのAir Maxをテーマにしたフォートナイトの島『Airphoria』、制作に関するチュートリアルが公開
9
【STEP2】UEFNの基本的な使い方を覚えよう
10
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.10「UI系」Part1
11
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.7「NPC系」Part1
12
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.4「ゲームシステム系」
13
【CHALLENGE2-1】フレンドと一緒にゲームを作ろう――UEFNプロジェクトをチームメンバーとリアルタイムで共同編集する
14
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.2「ユーティリティ系」
15
まるで『マイクラ』?ボクセル地形を生み出す無料アセット「VoxelPlugin Free」で”地形を掘ったり積み重ねたり”して遊んでみよう
16
【CHALLENGE3】UEFNの機能「ランドスケープ」を使ってオリジナルの地形を作る
17
フォートナイトとUEFNがv28.20にアップデート。「キーの長押しによるチャージシステムの実装」などを実現する「入力トリガーの仕掛け」が登場
18
フルカラー書籍「UEFN(Unreal Editor For Fortnite)でゲームづくりを始めよう!」、ついに本日発売!全国書店で好評発売中!
19
【STEP6-1】「オリジナルキャラクターを登場させよう」――Fabでアセットをダウンロードしよう
20
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.7「NPC系」Part2
21
【STEP4-1】コース外に出たらデスする仕組みを作る
22
『フォートナイト』で建築ビジュアライゼーション!?UEFNでオリジナルの世界観をどう作り上げたか、その手法を解説【UNREAL FEST 2023 TOKYO】
23
フォートナイトとUEFNがv26.30にアップデート。ロビー画面が一新され、クリエイターが島ごとにロビー背景を自由にカスタムできるように
24
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.3「プレイヤー系」
25
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.6「チーム・対戦系」Part1
26
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.9「建築物系」Part1
27
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.10「UI系」Part2
28
【STEP3】オリジナルのアスレチックコースを作ろう
29
【STEP4-2】リスポーンとチェックポイントの仕組みを作る
30
【STEP5-1】スタート時のカウントダウンを作る
VIEW MORE

イベントカレンダー

VIEW MORE

今日の用語

ワイヤーフレーム(Wire Frame)
ワイヤーフレーム
  1. 3Dモデルのエッジ情報のみを表示するレンダリング手法。ゲーム開発においては、3Dモデルやシーンのポリゴン構造を確認することに用いることが多い。
  2. UIやWebページなどのレイアウトを決めるための設計図。
VIEW MORE

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