個人製作インディーゲーム”ジラフとアンニカ” のUE4 制作事例紹介【UNREAL FEST EXTREME 2020 WINTER】

個人製作インディーゲーム ”ジラフとアンニカ” の UE4 制作事例紹介 アトリエミミナ 斉藤 敦士

自己紹介 斉藤 敦士 ゲーム会社でデザイナーとして20年従事したあと、 独立して現在フリーランスです www.atelier-mimina.com 2020年「ジラフとアンニカ」を PS4、Nintendo Switch、 XboxOne、Steam(PC)にて リリース

「ジラフとアンニカ」 紹介

「ジラフとアンニカ」 紹介 • 3Dアドベンチャー＋リズムゲーム • プレイ時間 ５～１０時間 • 個人製作のインディーゲーム • 制作期間４年半

主に一人でゲーム制作している小さな個人スタジオです

「ジラフとアンニカ」制作体制 斉藤 原作・ディレクター・プログラム キャラクターデザイン レベルデザイン コンシューマー移植 UE4の作業全部 フルタイム 音楽 1名 3Dモデル 1名＋1社 デザイン，作画 4名 リズムゲームチャート 1名 キャラクターデザイン 4名 サウンド（ＳＥ） 1名 アニメーター 2名 QA 1名

開発風景 コワーキングスペースでの開発風景

ノンプログラマーによる プログラム編 ノンプログラマーでも出来る！ そう、ＵＥ４ならね…！

ジラフとアンニカは 99％ BluePrint で制作しています ＼ 無理は禁物！／ 最初から全編をBluePrintのみで制作するつもりだ ったため、ゲームデザインもBluePrintとUE4標準 の機能のみでなるべく実現できるように設計しま した

ジラフとアンニカは ３Ｄアドベンチャー ＋ リズムアクション ゲームです 3Dアドベンチャー リズムアクション 会話ダイヤローグ リズムゲーム システム

会話ダイヤローグ フィールドにいる キャラクターに話しかける と会話がスタートする 質問分岐を表示して、内容によって アイテムをもらう アイテムを使って 次に進む この最低限のゲームループが実装できれば、 これを拡張していくことで完成まで持っていけると考えました。

会話ダイヤローグ アセットBlueprint Dialoguesを最初は利用。 ジラフとアンニカで使用するには不要な機能が多かったため ＢＰを参考にして１から作り直すことにしました。

会話ダイヤローグ ダイヤローグコンポーネントを 会話の発生するキャラクターや オブジェクトに割り当てる

会話ダイヤローグ コンポーネント化しているので、キャラ以外のものにも 割り当てるだけでダイヤローグを実装できる

会話ダイヤローグ 対象のアクターが ダイヤローグコンポーネントを 持っていると判定したら、 ボタンＨＵＤを表示 ※検出しやすいようBoxトレースを使用しています

会話ダイヤローグ ダイヤローグの内容はデーターテーブルで実装 • • • • • • キャラの名前 / 立ち絵 ID 会話本文 質問分岐 イベントタグ ＳＥ Etc..

データーテーブルCSV 立ち絵ID 本文 質問分岐 イベントタグ

会話ダイヤローグ データーテーブルのイベントタグをみてイベントを実行する

会話ダイヤローグとイベントの機能完成！

テキストの中のボタンなどのグラフィック みつまめ杏仁さんブログ：UE4のフォントで足りない文字を補充する https://limesode.hatenablog.com/entry/2018/05/25/024457

タイプライターアニメ使用時に綺麗に自動改行 最初の行のnap の部分が右端で改行する際に消えています 修正後 • タイプライターアニメ使用時に綺麗に改行（ワードラップ）する機能 http://kamipallet.hatenablog.com/entry/2018/09/10/231426

会話ダイヤローグ機能 解説おわり

リズムゲーム

リズムゲームのゲーム譜面のエディット リズムゲーム譜面作成にはミドルウェアのＦＭＯＤを使用

FMODのタグ機能 タグによってリズムマーカーを指定

FMODからBlueprintのOnTimeLineMarkerイベントでタグの情報を所得できる

リズムマーカーの軌跡アニメの実装 リズムマーカーはシーンに配置したスプライン上を沿う仕組み

リズムゲーム制御用のアクター 制御用のアクターを配置してリズムゲームのパラメーター調整を細かく出来るようにした

問題：パフォーマンスが充分出ていてもフレーズマーカーにスキマが出来る時があった ガベージコレクションのタイミングで スキマができていた。 gc.TimeBetweenPurgingPendingKillObjectsの値を 600に設定（デフォルトは61） リズムゲーム中はＧＣが起きないようにして解決

リズムゲーム機能 解説おわり

残り１％のＣ++の使用箇所 • 非同期ローディング画面 →ActionRPGサンプルプロジェクトのコードを参考に制作 • コンシューマー機の機種固有の機能で ＢＰに公開されていない物 • エンジンのバグの修正…

非同期ローディング画面については最近良さそうなプラグインがマケプレで公開！

UE4のＣ++の習得は、こちらのAlweiさんの記事を参考に始めました。 https://unrealengine.hatenablog.com/entry/2014/09/10/202645

Ｃ＋＋でないと出来ないと思っていた「セーブデーターへの画像の保存」 マーケットプレイスのプラグイン LE Extended Standard Libraryで 解決 ジラフとアンニカの写真撮影機能の制作事例 https://www.slideshare.net/atsushisaito31/ss-147626476 SceneCaptureComponet2Dを byteの配列に変換

プログラム編 まとめ • ゲームを実現するのに最低限必要なものから作り始める • 標準で出来ない機能はプラグインがないか探してみる • どうしても自分で出来ない箇所は早めに つよつよプログラマーさんに相談する

グラフィックス編

グラフィックス編 以下の項目についてお話します • • • • • • キャラクター コミック風イベントシーン マーケットプレイスの活用 カラーコレクションによる色補正 モーションキャップチャーの活用 Ultra Dynamic Sky

キャラクターはPBRベースで絵つくり 1キャラ2～5万ポリゴン

主人公アンニカのマテリアル

ノーマル補正 適用前 適用後

ノーマル補正のノードです！ 蝋燭さん@Rousokucのツイートを参考にして作成しました

クロス機能の利用 適用前 適用後

シュミュレーション用ローポリゴンモデル シュミュレーション用 ローポリゴンモデル

クロス用物理アセット 使用シーン別にクロス用物理アセットを適用

クロスウェイトの制御 ポーズによって乱れてしまう箇所のみ クロスブレンドの値を小さくして調整しています クロスＭＡＸ（服崩れすぎ） クロス小（手付スカートアニメ）

リセット 70% 100% ジャンプ時には服が乱れやすいため、 ジャンプ中のクロスの影響度を低めにするのと、 着地するたびにクロスをリセットするようにしています

モーションキャップチャーの活用 モーションキャップチャーにはアドバンスドテクノロジーラボ（ATL）さん施設を無料で利用させ て頂きました。 https://atl-hiroo.recruit-tech.co.jp/2018/10/giraffe-and-annika/ 振付/モーションアクター: 水越朋 @tomo_koshi

ダンスシーンや待機モーションなど多くのモーションをモーションキャプチャーを使用して アニメーション作成コストを削減しています

コミック風イベントシーン

作画 コミックシーンの作画はCLIP STUDIO PAINT EX

背景の作画 背景はＵＥ４の画面のキャップチャーを加工して使用

パーツに分割 バラバラのパーツにしてUE4にインポートして２Ｄスプライト化

パーツを配置 インポートしたパーツをUE4上に配置

噴出しのアニメーション、コマ間の移動、エフェクトなどをシーケンサーで編集

テクスチャそのままの色の再現 色調が正しくない 正常な色調 デフォルトではポストプロセスがかかっていてテクスチャの色がそのままでないため、 r.TonemapperFilm 0 でポストプロセスを無効にします

シーケンサー編集時のＴＩＰＳ 適用スケールの値を変更 登録アクター数が多くなると縦がどうしても長くなるので ウイジェットリフレクタを使用して解像度を一時的にＵＰする

画像インポート時の注意! テクスチャサイズは４の倍数にしよう！ 圧縮がかからずデーターサイズが大きくなります。

4の倍数テクスチャ作成の自動化 自動で4の倍数に リサイズしてくれる スクリプトを作りました。 preferences.rulerUnits = Units.PIXELS; var doc = app.activeDocument; doc.resizeCanvas(Math.ceil(doc.width/4) * 4, Math.ceil(doc.height/4) * 4, AnchorPosition.MIDDLECENTER); • テクスチャサイズは４の倍数にしようの巻 http://kamipallet.hatenablog.com/entry/2018/10/16/140557

マーケットプレイスアセットの活用

アセット使用比率 アセット

アセット使用比率 アセット

アセット使用比率 アセット

オリジナルの箇所 キャラクター ユニークな形状の建物 制作: 中村 基典 @motonak_jp

マーケットプレイスアセットをアレンジ

アレンジ 例１: ダンジョンの扉 InfinityBladeGrassLandsの門と扉のアセット 扉部分だけSPでテクスチャを書き換え

アレンジ 例2「吊り橋」

FBXにエクスポート TopDown_Caves の板の足場のアセット

DCCツールでパーツを再配置 UE4に再度読み込み

アレンジ 例３ 「休憩所」 Tropical Villageの小屋アセット オリジナルデザインの看板

オリジナルデザインの看板を追加することでユニークな小屋が完成！

マーケットプレイスアセットを部分利用 例４「オカーノのアトリエ」 アセット 樽や観葉植物、家具などはアセット、個性を持たせたい箇所はオリジナル

カラーコレクション https://docs.unrealengine.com/ja/Engine/Rendering/PostProcessEffects/UsingLUTs/index.html

カラーコレクション https://docs.unrealengine.com/ja/Engine/Rendering/PostProcessEffects/UsingLUTs/index.html

Ultra Dynamic Sky

アセットのBPを利用 Ultra Dynamic Skyの 時間パラメータを時計に反映 機能追加箇所 ジラフとアンニカの時間システムはUltra Dynamic Skyの時間パラメータを参照して構築しています

グラフィックス編 まとめ • キャラクターの絵作り PBRアセットとも合うよう制作しました • コミック風イベントシーンを採用 ユニークな表現+通常のカットシーンよりも低コスト • マーケットプレイスのアセットを最大限活用 すでにアセットにあるものはなるべく作らない

レベルデザイン

ランドスケープ 地形のベースは標準のランドスケープ機能で作成しました。 マテリアルはLandscapeAutoMaterialアセットを利用しています

単調な箇所のなじませ ランドスケープは崖のような高い段差のあるところは単調になりがちなので、 岩のアセットを追加してなじませる

色調を合わせる ランドスケープのマテリアルと岩は別のアセットのため色調が合わなかったため、 テクスチャのAdjustmentsで色調調整

モジュラータイプのアセットの活用 建物の内部やダンジョンはモジュラータイプのアセットを多く利用

モジュラータイプのアセットの活用 ジラフとアンニカで利用したモジュラー形式になっているアセットです

敵、ギミックの作成 ダンジョンに配置する敵やギミックは動作テスト用のレベルで確認してから本番レベルに実装

補助コリジョン 補助コリジョンはBlockingVolumeでなく、マテリアルを割り当てられる軽量化したコリジョン設定用のメッシュを利用

プレイヤーコリジョンによるチェック プレイヤーコリジョン表示に切り替えて最終チェック

カメラ透過壁の設定 狭い箇所や森の木の幹など、カメラの急激な移動を抑えたい箇所に適用

カメラ透過壁の設定 よしかわはずれ@yoshikawahazureさんのツイートを参考に作成しました https://twitter.com/yoshikawahazure/status/1170559914877440000

イベント時のキャラクターの移動 キャラクターのイベント時の自動移動はＡＩで実装

マーカーによるナビゲーション キャラクターを移動させたい箇所にマーカーを配置して実装

カスタムアイコン イベント時の各移動先やその他マーカーは、 カスタムアイコンを作って視認性をＵＰさせました。

高速スクロール機能のあるマウスが便利 レベルデザイン時にあると便利なもの高速スクロール機能のあるマウス！

レベルデザイン編 おわり

オーディオ ミドルウェアのFMODを 使用しています プラグイン形式になっていて 導入がしやすいです https://www.fmod.com/

スムーズなイントロループ

フィールドのBGM 朝 昼 夜 朝・昼・夜の時間帯による遷移処理

地形による足音の変化処理 土 草 木 石 水 金属

リバーブ トンネルなど反響する箇所に適用

問題：シーケンサーの絵とＦＭＯＤの音がズレる場合がある シーケンサーとくらべてFMODのほうが再生時のスタートが重いためにズレやすい 再生後、絵が表示される前にシーケンサーの再生位置を強制的にＦＭＯＤに合わせることで対処

FMODインディーライセンス • 50万ドル以下のプロジェクト • １年目まで無料。 ２年目から1タイトルにつき$2,000

マルチプラットフォーム対応

マルチプラットフォーム対応 Nintendo Switch 、PS4、XboxOne それぞれ約２ヶ月、合計約６ヶ月で ３機種分を一人で移植しました。 • ＰＣ版リリース後に移植作業に着手 • ６ヶ月のうち半分はデバッグとテスト。手動でやったため大変だった

コンシューマ機 移植をスムーズにするためにしたこと • 本格的な移植作業に入る前に事前に実機動作テストをして 問題のある箇所を割り出しておいた • 機種固有のアセットをなるべく作らない • レンダラーを全機種ディファードで固定 • 1プロジェクトで作成・内部スイッチで切り替え（開発後半は分けました）

解像度 Nintendo Switch : Doc 700p～864p / Handheld 396p～720p PS4 : 810p～1080p / PRO 1080p or 2160p XboxOne : 700p～900p / X 1080p or 2160p UE4.24 全機種 30fps

スケーラビリティの 設定の調整である程度動作 するように詰めてから、 機種固有の最適化対応を していきました。 参考：拡張性のリファレンス https://docs.unrealengine.com/ja/Engine/Performance/Scalability/ScalabilityReference/index.html

スケーラビリティ設定値（一部） Switch (DOC) sg.ViewDistanceQuality=2 sg.AntiAliasingQuality=1 sg.PostProcessQuality=1 sg.TextureQuality=2 sg.EffectsQuality=2 sg.ShadowQuality=2 r.RefractionQuality=0 r.HalfResReflections=1 r.Upscale.Quality=1 r.LightFunctionQuality=0 r.LightShaftQuality=0 r.Shadow.MaxResolution=1024 r.Shadow.MaxCSMResolution=1024 r.Shadow.CSM.MaxCascades=2 r.ShadowQuality=5 r.AmbientOcclusionLevels=0 r.AmbientOcclusionMaxQuality=1 r.AmbientOcclusionRadiusScale=0.8 r.AmbientOcclusion.HalfRes=1 r.DepthOfFieldQuality=2 r.MotionBlurQuality=0 r.SSR.Quality=0 r.VolumetricFog=0 r.SSS.Scale=0 r.SeparateTranslucency=0 foliage.DensityScale=0.5 grass.CullDistanceScale=0.7 grass.DensityScale=0.5 grass.DisableDynamicShadows=1 foliage.MinLod=0 PS4 ＸＢＯＸＯＮＥ sg.PostProcessQuality=1 sg.PostProcessQuality=1 r.BlurGBuffer=-1 r.AmbientOcclusionLevels=3 r.AmbientOcclusionRadiusScale=1.0 r.DepthOfFieldQuality=2 r.LensFlareQuality=2 r.SceneColorFringeQuality=1 r.EyeAdaptationQuality=2 r.BloomQuality=5 r.FastBlurThreshold=7 r.Upscale.Quality=3 r.Tonemapper.GrainQuantization=1 r.PostProcessAAQuality=1 r.BlurGBuffer=-1 r.AmbientOcclusionLevels=3 r.AmbientOcclusionRadiusScale=1.0 r.DepthOfFieldQuality=2 r.LensFlareQuality=2 r.SceneColorFringeQuality=1 r.EyeAdaptationQuality=2 r.BloomQuality=5 r.FastBlurThreshold=7 r.Upscale.Quality=3 r.Tonemapper.GrainQuantization=1 r.PostProcessAAQuality=1 r.Shadow.MaxResolution=1024 r.Shadow.MaxCSMResolution=1024 r.Shadow.CSM.MaxCascades=2 r.ShadowQuality=5

実績、トロフィー、セーブの扱いなど機種固有の対応 C++が必要だったのでちょっと大変でしたが、サンプルコードを見てなんとかすべて実装しました。

最適化１ FileOpenOrderでロード時間短縮 適用後、８秒近く早くなりました

死んだ時にRestart Gameでなく手動でアクターの状態を戻してリスタートの高速化 Restart Gameはなるべく使わない 手動で敵の位置や箱の位置などを初期値にリセット 複雑なイベントがあるダンジョン４などは完全にリセットするのが難しかったた め、例外でRestart Gameを使っている箇所もあります

その他の最適化 Zprepass有効 / LODをすべて設定 不要なtickは全部OFFに / 遠くのアクタは自動でTickoff 遠くの見えないレベルは非表示にする ライトマップ解像度をギリギリまで小さく / Asyncloadでアセットの先読み 草木のマテリアルを軽く / リフレクションキャップチャを必要に応じてＯＦＦに Imposter…はやってみたがかえって遅くなったので無し 常に読み込まれていた巨大テクスチャをソフトリファレンスに メモリリーク箇所をLMMで調査して問題になっているアセットを特定 機種によってダイナミックライトの数と設定を増減

貴重な情報を共有して頂いた方々がいなければ とても一人で作れなかったと思います。 情報を共有して頂いた皆様、 本当にありがとうございます！

告知1 デジゲー博２０２０出展 2019年の展示の様子 ２０２０年１１月２９日 秋葉原UDX2階 アキバ・スクエア Ａ－０８ アトリエミミナ ブース

告知２ ジラフとアンニカ展 原宿デザインフェスタギャラリー 1-F 2021年 3月19日～21日 実物大「ねこじゃらしになりたい看板も」展示予定です

おわり ご清聴ありがとうございました