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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

23.
リズムゲーム

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

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

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

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

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

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

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

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

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

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

34.
Ｃ＋＋でないと出来ないと思っていた「セーブデーターへの画像の保存」
マーケットプレイスのプラグイン
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.
クロスウェイトの制御
ポーズによって乱れてしまう箇所のみ
クロスブレンドの値を小さくして調整しています
クロスＭＡＸ（服崩れすぎ） クロス小（手付スカートアニメ）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

66.
アレンジ 例2「吊り橋」

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

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

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

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

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

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

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

74.
Ultra Dynamic Sky

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

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

77.
レベルデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

92.
レベルデザイン編 おわり

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

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

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

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

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

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

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

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

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

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

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

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

105.
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
PS4 ＸＢＯＸＯＮＥ
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
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
Switch (DOC)
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
r.Shadow.MaxResolution=1024
r.Shadow.MaxCSMResolution=1024
r.Shadow.CSM.MaxCascades=2
r.ShadowQuality=5
スケーラビリティ設定値（一部）

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

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

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

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

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

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

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

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