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

関連記事

トイロジック、UE4のRPC関数をベースにしたプレイヤー同期処理を解説。大規模オンラインゲーム『FOAMSTARS』に導入した管理の仕組み
2024.04.26
Unreal Engine 5.4がリリース。アニメーション関連の新機能「Modular Control Rig」の追加、「Motion Matching」の正式リリースなど
2024.04.24
UE6にはフォートナイト用の言語「Verse」が導入される?GDC 2024のVerse講演から見るアンリアルエンジンの今後
2024.04.22
オーディオミドルウェア「Wwise」のサウンドをUnreal Engineで再生。「書かれた通りに設定すれば必ず動作する」ガイド、Audiokineticが公開
2024.04.18
ヒストリア、日本で唯一「Unreal Engine サービス パートナー プログラム」で「ゴールド ステータス」を獲得。Epic Gamesが定める技術支援プログラム
2024.04.11
Adobe、「Substance 3D Connector」をオープンソースとして公開。Blender・Maya・3ds MaxやUE5・Unityなどの間でのアセット共有を目指す
2024.04.08

注目記事ランキング

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

イベントカレンダー

VIEW MORE

今日の用語

乱数
ランスウ プログラムにおいてランダムに生成される数値。アルゴリズムによって導かれ、実際には完全なランダムではないため疑似乱数とも呼ばれる。
VIEW MORE

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