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

9K Views

November 17, 20

スライド概要

講演アーカイブ:https://www.youtube.com/watch?v=QoRH4E2ZFcw

講演内容:
個人+少人数で制作したインディーゲーム”ジラフとアンニカ”がUE4の機能をどのように活用してPCとコンシューマー向けにリリースしたか、制作事例を紹介します

講演者:
斉藤 敦士 ( atelier mimina ゲーム作家 / デザイナー )

UNREAL FEST EXTREME 2020 WINTER 再生リスト
https://www.youtube.com/playlist?list=PLr_Cbd4sUDTzxG9a4TrU0Rg6-ApCJBCsI

https://unrealengine.jp/unrealfest/
#ue4fest

profile-image

エピック ゲームズ ジャパン

@EpicGamesJapan

スライド一覧

Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

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

2.

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

3.

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

4.

「ジラフとアンニカ」 紹介 • 3Dアドベンチャー+リズムゲーム • プレイ時間 5~10時間 • 個人製作のインディーゲーム • 制作期間4年半

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

リズムゲーム

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

グラフィックス編

37.

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

38.

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

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

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

46.

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

47.

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

48.

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

49.

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

50.

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

51.

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

52.

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

53.

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

54.

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

55.

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

56.

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

57.

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

58.

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); • テクスチャサイズは4の倍数にしようの巻 http://kamipallet.hatenablog.com/entry/2018/10/16/140557

59.

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

60.

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

61.

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

62.

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

63.

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

64.

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

65.

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

67.

アレンジ 例2「吊り橋」

68.

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

69.

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

70.

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

71.

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

72.

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

73.

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

74.

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

75.

Ultra Dynamic Sky

76.

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

77.

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

78.

レベルデザイン

79.

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

80.

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

81.

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

82.

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

83.

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

84.

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

85.

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

86.

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

87.

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

88.

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

89.

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

90.

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

91.

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

92.

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

93.

レベルデザイン編 おわり

94.

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

95.

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

96.

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

97.

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

98.

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

99.

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

100.

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

101.

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

102.

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

103.

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

104.

解像度 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

105.

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

106.

スケーラビリティ設定値(一部) 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 XBOXONE 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

107.

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

108.

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

109.

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

110.

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

111.

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

112.

告知1 デジゲー博2020出展 2019年の展示の様子 2020年11月29日 秋葉原UDX2階 アキバ・スクエア A-08 アトリエミミナ ブース

113.

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

114.

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