見出し画像

【徹底解剖】Unreal Engine5を使用したノベルゲーム背景活用事例 ~ カットシーン制作も添えて ~

皆様、いかがお過ごしでしょうか。
Studio To:NEMOで企画/シナリオ/演出を担当している大桐トウゴです。
現在はリバースド・パストラルADV「在りし日のわたし達へ」というタイトルを開発中。

今回は#ゲ制クリエイターズアドベントカレンダー2024
12/08(日)  8記事目を担当しています。
12/25(水)まで目が離せない記事が目白押し!
ノベル&ADVゲーム制作にご興味のある方はぜひチェック!

▼企画ページはこちら!
https://sticky-parsnip-124.notion.site/adventcalendar2024


はじめに

背景制作については以前に記事でも触れているので、そちらにも目を通していただけると、今回の内容にもすんなり入れると思います!

以前の記事ではどちらかというと「背景制作の経緯+α」的ニュアンスでしたが、今回は【徹底解剖】とあるように、もう少し踏み込んで『実践的な内容』+『実際の活用事例』を掘り進めていきますよ!

なお、本記事は『Unreal Engine』『Unity』を使用していない方や『これからノベルゲームを制作したい』という方でも読み進めていける内容なので是非お目通しください!

①準備編

本題に入る前にざっとおさらいします。

現在開発中のADVゲーム「在りし日のわたし達へ」は、

背景制作『Unreal Engine5(以下UE5)』https://www.unrealengine.com/ja/unreal-engine-5

ゲーム本編制作『Unity+宴(アセット)』

『UE5で制作した背景のスクリーンショット』→『Unityのプロジェクト』へ流し、それを背景として使用しています。

要は「3Dモデルを背景に使用すればリソース無限!」が、この制作手法の強みとなります。
そして背景だけでなく『ノベルゲーム』もとい『ADVゲーム』のスチルにも活用できるんです…!

これ、実はADVのジャンル問わず応用が利くのですが…詳細は後述。

使用予定のスチル(チョイスに邪な意図はないです)
背景の鉄道橋。

「でもモデル作らないとだし、プログラミングも難しそう」と思っているそこのアナタ!…あなたにお話があります。 いいですか?
どうか落ち着いて…。

これはノーコードで実現可能です。

(歓喜に震えたのち苦痛を訴える)

まずい! ナース!……。

ちなみに…。
同じUnity宴の民ということで…同企画に参加している『ザクロ弁当屋』の『ザクロスケ』さんが宴を使ったLive2Dの動かし方についてレクチャーしています。

▼宴でゴリゴリにキャラを動かしたい方は要チェック!


これだけは押さえておきたい基本ポイント!

慌てず騒がず落ち着いて(A・S・O)
まずは背景制作に欠かせない基本を一通り紹介します。

・PostProcess

背景のクオリティを左右する物であるが故に一番重要です。

ポストプロセス エフェクトを使用することで、アーティストやデザイナーは、色付けやトーンマッピング、ライティングなどのプロパティおよび機能の組み合わせを通じて、シーンの全体的な外観や雰囲気を定義することができます。

Unreal Engine 公式ドキュメントから引用

言い換えると「見栄えを調整するためのエフェクト」です。
以下にサンプルを用意しました。

大胆に調整しましたが、違いが分かると思います。

「エフェクトなし」は色味ものっぺりとしており、イマイチ空気感が伝わって来ません。
対して「エフェクトあり」だと一目見て「その場の空気」が伝わると思います。
こちらはポストプロセス内で
・Lens>Bloom
・Lens>Exposure>露出補正
・Lens>Local Exposure
・Color Grading>Temperature
・Color Grading>Global を弄った形となります。
要するに、光の露出調整+ブルーム効果付与+色味調整を加えました。

また、ポストプロセスは大まかに分けて「配置」「内蔵」の二種類あります。

この立方体は「ポストプロセス ボリューム」くん。
直接フィールドに配置すれば、カメラが入った瞬間に画面を調整した色味に変えてくれるぞ。
グリグリ動く3Dゲーム向きの優等生。

基本的に背景制作では「Camera Actor」に内蔵されたポストプロセスを使用します。

・Camera Actor

いきなり聞き慣れない物が飛び出してきましたが、こちらも超重要

Unreal Engine 5 で作成するあらゆる種類の体験には、ゲームでもゲーム以外の場合でも、ユーザーがそれを表示することができるカメラが最低 1 つ必要です。
Unreal Engine はこの目的のために使用できるさまざまな種類の カメラ アクタ を備えています。
Unreal Engine では、次のタイプのカメラ アクタを使用できます。
カメラ アクタ
固定また可動ビューポイントとして使用できる汎用タイプのカメラです。
Cine カメラ アクタ
シネマティックスの作成に使用する特殊なタイプのカメラです。詳細については、「Cine カメラ アクタ」ページを参照してください。

Unreal Engine 公式ドキュメントから引用

「何故重要なのか?」という部分について、先に書いておきます。
背景制作で撮影を行う際には欠かせない物であり、
画角を決めやカットシーン作成にも欠かせないからです。

なお、背景制作で使用するアクタは「Cine Camera Actor」
理由は高機能だから!…これに尽きます。

本作品のキャラクター達が住まう家。
手早く仕上げる際には通常の「Camera Actor」を使用しています。

「PostProcess」を直接配置をしてしまうとレベル内(フィールド)の管理がエラいことになるので手間がかかります。
なので、それぞれの背景に合わせてカメラを用意し、内蔵された「PostProcess」を弄るのがベターです。

余談ですが、上記に貼った画像のレベル内には約50台ほどの「Camera Actor」が配置されているとか。(多・す・ぎ・る!)

・Landscape&Folige

「Landscape」…それは地形を自在に操り天地開闢の始神になれるツール…。

Unreal Engine の ランドスケープ システムは、屋外環境の作成を可能にするツールのコレクションです。
以下のトピックは、ランドスケープ アクタをスカルプトし、カスタマイズされたマテリアルを作成し、ランドスケープにペイントして、独自の没入型の世界を作成するのに役立ちます。

Unreal Engine 公式ドキュメントから引用

一方で「Folige」は草を生やすツールです。(地形に)

フォリッジ モードを使用すると、素晴らしい風景をすばやく作成できます。
[Foliage Mode (フォリッジ モード)] は、テレイン上に森や林をすばやく作成し、リアルな風景を作成する方法を提供します。
フォリッジ ツールを使用して、プロジェクトに木、茂み、花などを追加する方法を決定します。
この編集モードは、ランドスケープ モード と連動します。

Unreal Engine 公式ドキュメントから引用

使い方はわんころのUE5勉強会さんの動画に基礎が詰まっており、非常に参考になるのでオススメです!

▼余談:「Landscape」作成時にあると便利なツール

「World Machine」と併用することで更に地形作成のハードルが下がります!

下記に生成方法を載せます。

こんな感じに。

生成したheight mapを「Landscape」作成時に読み込ませることで、
平べったい地形を始めから立体的な状態で出力することができます。

さて、一通り基本的な要項は書き終えました。(満身創痍)
次からは実際の制作風景を交えた実践編となります!

②実践編

お待たせしました!
これから制作の流れを順に説明しています。

レベル作成から始めると完全にUnreal Engineの講習になってしまうため、モデルの配置が終わった状態から始めます!

・背景を準備しよう

以下は廃墟の背景です。 これが…。

制作途中の風景。
立っているおじさんはサイズ感を見失わないための指標 デニスくん。

▼こうなる!

ほぼ完成。

現状は地形を整え、モデルの配置を終えている状態。
こういった建物や自然物はアセットストア(Fab)から購入して手を加えています。

・「Cine Camera Actor」を設置しよう

画角が決まったら「Cine Camera Actor」を作成。
画像右下に注目。 一枚目の画像が写っていますよね?
これで「Cine Camera Actor」の画角を設定することができました。

▼必須操作▼
「パースペクティブ」>「配置されたカメラ」を選択することで、
カメラを携えた状態で設定した画角へ戻ることができます。
背景を撮影する際は必ず上記操作でカメラを選択してください。

・試しに撮影してみよう

それでは撮影に入ります。
ビューポートより下部にある「Cmd」という部分を確認!

これがCmd(コンソールコマンド)!

Cmd内に以下のコマンドを打ち込みます。
HighResShot 1920x1080』
すると…。

ビューティホーな写真がトレチャッタヨ…。

撮影する方法は他にもあるのですが、Cmd撮影が個人的に安定
理由は幾つかありますが、一番の理由は柔軟で手っ取り早いからです。

では『HighResShot 1920x2500』と入力してみましょう。

画像が縦に長いので縮小しました

といった具合に、画面サイズを自由に調整することが可能です。
(他にもコマンドが存在するので調べてみてね)

「在りし日のわたし達へ」第二弾キービジュアル

こちらのキービジュアルは上記の方法で撮影を行いました。
「東京ゲームダンジョン5」ではB0サイズのポスター(デカ過ぎんだろ…)を印刷して持って行きましたが、画質の粗は気になりませんでした。

・Chameleon Post Processを使ってみよう

はてさて…「Chameleon Post Process」とは何ぞや?
ということでこちらも解説します。
※前述した「Post Process」とは違うので注意。

https://www.fab.com/ja/listings/8cfcceb1-eea1-4990-8377-cf3af7b18ff2

「Chameleon Post Process」はアセットです。
トゥーン調にしたり少し特殊なエフェクトを加えたりと自由自在。

主に使用しているエフェクトは以下の通り。
・Emboss
・Kuwahara
・Look! Color Grading
・Sharpen
・Toon Sharding

早速、先ほどの背景に設定してみましょう。

・完成ッ!

写実的な雰囲気から一転、イラスト風味に近付きました。

これで大まかなプロセスは終了です。
「Post Process」で更に調整を加えると更に洗練された雰囲気になりますよ!

➂「在りし日のわたし達へ」での活用事例

本記事のメインコンテンツ(?)になります。
勿論、UEで撮影した背景をフルで使用しています!

プレイ画面
主人公 シンは他二人が畑仕事に来ず、様子を見に行くことに。
家を通るのが面倒だと感じ、倉庫と家の間を突っ切るシーン。
音に驚き二人は後方を注視。
近付いた瞬間にドアが開きエレナが飛び出してくる を表現。
主人公 シンが昏睡から目覚めるシーン。
意識が朦朧としている中、躓いてベランダに倒れ込んでしまう。

人物の「動的な流れ」が伝わるかと思います。
「絶対にこれ以降使わないだろう」という背景でさえも用意できるので表現の幅が広がります。

ゲーム内で実際に使用されるスチル

スチルは「キャラクターイラスト」をマテリアルとしてplaneにアタッチ。
サイズ調整したのち、レベルの空間内に物理的に配置

直接配置をすることでレベル内のライトが女の子(エレナ)を照らすため、
背景とキャラクターが浮くことを防いでいます。

構図自体かなり融通が利くので、エレナを背負い投げぇ~!

※本編には存在しないシーンです。(作成時間15分)

…ということも自由自在です!

下の画像は現在調整中のスチル。

ELDEN RINGのボス「神肌の使徒」じゃん!

これはキャラクターが立体物を跨ぐ場合に有用な方法です。
光源が上にあるのに対し、影が出来ないのは不自然なためオブジェクトで影を落とすようにしています。

これを応用することで「手をこちらへ伸ばす」等のスチルも、
腕をパーツとして分離させてカメラへ近付けることで大胆なパースを付けることが可能です。(ズームパンチ!)

マイフェイバリットでベリベリキュートなイチオシの一枚。

本気(マジ)なシーンです。
こちらのスチルは、「上から見下ろしている感」を出すために微量ながらエレナにパースを付けています。
(何故こうなっているかは、早期アクセス開始後にその目で確認していただきたい…!)

棄てられた鉄道橋から見える景色。
制作風景。
目に見えない場所に力を入れても動作が重くなるだけなのでとにかくカット。
ミニマム+凝縮を意識。

基本はエリア毎に分けてレベルを作成します。
丸々一つの世界を作る!…も不可能ではありませんが、破綻が生まれやすいのでオススメしません。(あと重くなるので!)

➃可能性は∞!

…と書くと大袈裟にし過ぎですね。

今まで散々書きましたが、この手法はまだまだ改善の余地があります。
「在りし日のわたし達へ」ではメイン運用していますが、「全てのノベルゲームで活用できるか?」と聞かれると、う~ん…。
それぞれ求めるカタチがあるしなぁ…となるので言い切れません。

しかし、方法を変えることで制作に掛かる工数をある程度軽減できるかも。
例えば――
①「撮影した背景をトレスする」
②「撮影した背景をベースにレタッチして求めている画風に近付ける」
➂「背景だけ組みフィールドを闊歩して想像を膨らませる」…とか。

▼ここにヒントが隠されている…!?
UE4を使った漫画・アニメ・イラスト制作について学びましょう!『UE4 Manga Anime Illustration Dive Online』開催!https://www.unrealengine.com/ja/blog/epicgamesjapan-manga-anime-illustration-dive-online-01
過去に開催された講演内容のリンクです。
目から鱗な情報が満載!

また、3次元的な動きを表現できるので「探索的要素」を兼ね備えたADV作品にもシナジーがあります。

シンの自室。

少し横長な背景ですが、ここの上下左右には空間が存在しています。
故にもっと長めの背景を用意してみる…とか。
机の引き出しをクリックした際は「引き出しが開いている背景」を用意して表示する…とか。
インタラクティブ可能な要素を手軽に用意できるのが真の強みだったり。

「ノベル/ADVゲーム」に何かしらの探索的要素を加えたい場合においても、この手法は一定の効果を発揮します。

いつでも探しているよ
どっかにアイテムの光を

「在りし日のわたし達へ」では「軌跡紡ぎ」というアイテム収集システムを用意しています。
道端に落ちているアイテムを拾って手記の内容を拡充させていくのですが…上記の話を踏まえると、果たして拾うだけだろうか。

おまけ:カットシーンを作ってみよう

UEで背景を作るもう一つのメリット。
それは映像も撮影できてしまうこと…!

最早書くよりも、UEの神々があまりにも豊富なリファレンスを用意しているためそちらの参照を推奨。

カサハラ CGさんが映像出力に関して詳細を出してくださっています!

没カット。 せっかくなので供養。
雨は「Ultra Dynamic Sky」というアセットで空間全体に降らせています。
どうしてこんな暗い雰囲気が多いん?

動画として出力することで、かなりリッチなカットを用意できます。
とても重要なシーンや、導入部などで活用してみてはいかが?
初代PSのバイオハザードみたく、ドアを開ける映像なんかも用意できちゃいます。
(選択肢によって流れる映像が変わる…とかも導入してみると面白いかも?)

◆おわりに&宣伝

畑を耕し、山羊の世話をして、家事に勤しむ――繰り返しの中で積み重ねていく一握りの幸せ。

しかし、そんな生活の裏には前文明の名残が影を落としています。
遺された手記を頼りに閉ざされた記憶、そして世界に隠された謎をキャラクターと共に読み解いていきましょう。

本作は「反転/逆転」をテーマとしており、抱える理想と背負う現実の境界がゲームプレイを通したドラマとして描かれていきます。
時には予想外の展開が待ち受けることも……?

「在りし日のわたし達へ」Steamストアページ概要

▼ウィッシュリスト登録求ム!

いかがでしたか?
本作の背景はこの一連のプロセスの元で進めています。

ノベルゲーム制作にも色々な形があるので一概に「これが正解!」とはいえませんが、コレも一つの形ではないかと思います。

この手法は極めて個人的にですが、開拓していきたいと考えています。
(情報交換していきたい…)

背景はノベルゲームもといADVG制作においても悩むポイントの一つだと思いますので、その一助として、そして選択肢として頭の片隅に置いて下されば冥利に尽きます。

まだまだ続く#ゲ制クリエイターズアドベントカレンダー2024
ノベル/ADVゲーム開発者さんのココでしか読めない記事が多くあります!
是非とも企画を追ってくださいませ!

今回は以上です!
ここまで読んでくださりありがとうございました!

それでは良きゲームライフを…。

執筆者:大桐トウゴ


いいなと思ったら応援しよう!