31K 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
Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/
個人製作インディーゲーム ”ジラフとアンニカ” の UE4 制作事例紹介 アトリエミミナ 斉藤 敦士
自己紹介 斉藤 敦士 ゲーム会社でデザイナーとして20年従事したあと、 独立して現在フリーランスです www.atelier-mimina.com 2020年「ジラフとアンニカ」を PS4、Nintendo Switch、 XboxOne、Steam(PC)にて リリース
「ジラフとアンニカ」 紹介
「ジラフとアンニカ」 紹介 • 3Dアドベンチャー+リズムゲーム • プレイ時間 5~10時間 • 個人製作のインディーゲーム • 制作期間4年半
主に一人でゲーム制作している小さな個人スタジオです
「ジラフとアンニカ」制作体制 斉藤 原作・ディレクター・プログラム キャラクターデザイン レベルデザイン コンシューマー移植 UE4の作業全部 フルタイム 音楽 1名 3Dモデル 1名+1社 デザイン,作画 4名 リズムゲームチャート 1名 キャラクターデザイン 4名 サウンド(SE) 1名 アニメーター 2名 QA 1名
開発風景 コワーキングスペースでの開発風景
ノンプログラマーによる プログラム編 ノンプログラマーでも出来る! そう、UE4ならね…!
ジラフとアンニカは 99% BluePrint で制作しています \ 無理は禁物!/ 最初から全編をBluePrintのみで制作するつもりだ ったため、ゲームデザインもBluePrintとUE4標準 の機能のみでなるべく実現できるように設計しま した
ジラフとアンニカは 3Dアドベンチャー + リズムアクション ゲームです 3Dアドベンチャー リズムアクション 会話ダイヤローグ リズムゲーム システム
会話ダイヤローグ フィールドにいる キャラクターに話しかける と会話がスタートする 質問分岐を表示して、内容によって アイテムをもらう アイテムを使って 次に進む この最低限のゲームループが実装できれば、 これを拡張していくことで完成まで持っていけると考えました。
会話ダイヤローグ アセットBlueprint Dialoguesを最初は利用。 ジラフとアンニカで使用するには不要な機能が多かったため BPを参考にして1から作り直すことにしました。
会話ダイヤローグ ダイヤローグコンポーネントを 会話の発生するキャラクターや オブジェクトに割り当てる
会話ダイヤローグ コンポーネント化しているので、キャラ以外のものにも 割り当てるだけでダイヤローグを実装できる
会話ダイヤローグ 対象のアクターが ダイヤローグコンポーネントを 持っていると判定したら、 ボタンHUDを表示 ※検出しやすいようBoxトレースを使用しています
会話ダイヤローグ ダイヤローグの内容はデーターテーブルで実装 • • • • • • キャラの名前 / 立ち絵 ID 会話本文 質問分岐 イベントタグ SE 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のタグ機能 タグによってリズムマーカーを指定
FMODからBlueprintのOnTimeLineMarkerイベントでタグの情報を所得できる
リズムマーカーの軌跡アニメの実装 リズムマーカーはシーンに配置したスプライン上を沿う仕組み
リズムゲーム制御用のアクター 制御用のアクターを配置してリズムゲームのパラメーター調整を細かく出来るようにした
問題:パフォーマンスが充分出ていてもフレーズマーカーにスキマが出来る時があった ガベージコレクションのタイミングで スキマができていた。 gc.TimeBetweenPurgingPendingKillObjectsの値を 600に設定(デフォルトは61) リズムゲーム中はGCが起きないようにして解決
リズムゲーム機能 解説おわり
残り1%のC++の使用箇所 • 非同期ローディング画面 →ActionRPGサンプルプロジェクトのコードを参考に制作 • コンシューマー機の機種固有の機能で BPに公開されていない物 • エンジンのバグの修正…
非同期ローディング画面については最近良さそうなプラグインがマケプレで公開!
UE4のC++の習得は、こちらのAlweiさんの記事を参考に始めました。 https://unrealengine.hatenablog.com/entry/2014/09/10/202645
C++でないと出来ないと思っていた「セーブデーターへの画像の保存」 マーケットプレイスのプラグイン LE Extended Standard Libraryで 解決 ジラフとアンニカの写真撮影機能の制作事例 https://www.slideshare.net/atsushisaito31/ss-147626476 SceneCaptureComponet2Dを byteの配列に変換
プログラム編 まとめ • ゲームを実現するのに最低限必要なものから作り始める • 標準で出来ない機能はプラグインがないか探してみる • どうしても自分で出来ない箇所は早めに つよつよプログラマーさんに相談する
グラフィックス編
グラフィックス編 以下の項目についてお話します • • • • • • キャラクター コミック風イベントシーン マーケットプレイスの活用 カラーコレクションによる色補正 モーションキャップチャーの活用 Ultra Dynamic Sky
キャラクターはPBRベースで絵つくり 1キャラ2~5万ポリゴン
主人公アンニカのマテリアル
ノーマル補正 適用前 適用後
ノーマル補正のノードです! 蝋燭さん@Rousokucのツイートを参考にして作成しました
クロス機能の利用 適用前 適用後
シュミュレーション用ローポリゴンモデル シュミュレーション用 ローポリゴンモデル
クロス用物理アセット 使用シーン別にクロス用物理アセットを適用
クロスウェイトの制御 ポーズによって乱れてしまう箇所のみ クロスブレンドの値を小さくして調整しています クロスMAX(服崩れすぎ) クロス小(手付スカートアニメ)
リセット 70% 100% ジャンプ時には服が乱れやすいため、 ジャンプ中のクロスの影響度を低めにするのと、 着地するたびにクロスをリセットするようにしています
モーションキャップチャーの活用 モーションキャップチャーにはアドバンスドテクノロジーラボ(ATL)さん施設を無料で利用させ て頂きました。 https://atl-hiroo.recruit-tech.co.jp/2018/10/giraffe-and-annika/ 振付/モーションアクター: 水越朋 @tomo_koshi
ダンスシーンや待機モーションなど多くのモーションをモーションキャプチャーを使用して アニメーション作成コストを削減しています
コミック風イベントシーン
作画 コミックシーンの作画はCLIP STUDIO PAINT EX
背景の作画 背景はUE4の画面のキャップチャーを加工して使用
パーツに分割 バラバラのパーツにしてUE4にインポートして2Dスプライト化
パーツを配置 インポートしたパーツをUE4上に配置
噴出しのアニメーション、コマ間の移動、エフェクトなどをシーケンサーで編集
テクスチャそのままの色の再現 色調が正しくない 正常な色調 デフォルトではポストプロセスがかかっていてテクスチャの色がそのままでないため、 r.TonemapperFilm 0 でポストプロセスを無効にします
シーケンサー編集時のTIPS 適用スケールの値を変更 登録アクター数が多くなると縦がどうしても長くなるので ウイジェットリフレクタを使用して解像度を一時的にUPする
画像インポート時の注意! テクスチャサイズは4の倍数にしよう! 圧縮がかからずデーターサイズが大きくなります。
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
マーケットプレイスアセットの活用
アセット使用比率 アセット
アセット使用比率 アセット
アセット使用比率 アセット
オリジナルの箇所 キャラクター ユニークな形状の建物 制作: 中村 基典 @motonak_jp
マーケットプレイスアセットをアレンジ
アレンジ 例1: ダンジョンの扉 InfinityBladeGrassLandsの門と扉のアセット 扉部分だけSPでテクスチャを書き換え
アレンジ 例2「吊り橋」
FBXにエクスポート TopDown_Caves の板の足場のアセット
DCCツールでパーツを再配置 UE4に再度読み込み
アレンジ 例3 「休憩所」 Tropical Villageの小屋アセット オリジナルデザインの看板
オリジナルデザインの看板を追加することでユニークな小屋が完成!
マーケットプレイスアセットを部分利用 例4「オカーノのアトリエ」 アセット 樽や観葉植物、家具などはアセット、個性を持たせたい箇所はオリジナル
カラーコレクション 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
イベント時のキャラクターの移動 キャラクターのイベント時の自動移動はAIで実装
マーカーによるナビゲーション キャラクターを移動させたい箇所にマーカーを配置して実装
カスタムアイコン イベント時の各移動先やその他マーカーは、 カスタムアイコンを作って視認性をUPさせました。
高速スクロール機能のあるマウスが便利 レベルデザイン時にあると便利なもの高速スクロール機能のあるマウス!
レベルデザイン編 おわり
オーディオ ミドルウェアのFMODを 使用しています プラグイン形式になっていて 導入がしやすいです https://www.fmod.com/
スムーズなイントロループ
フィールドのBGM 朝 昼 夜 朝・昼・夜の時間帯による遷移処理
地形による足音の変化処理 土 草 木 石 水 金属
リバーブ トンネルなど反響する箇所に適用
問題:シーケンサーの絵とFMODの音がズレる場合がある シーケンサーとくらべてFMODのほうが再生時のスタートが重いためにズレやすい 再生後、絵が表示される前にシーケンサーの再生位置を強制的にFMODに合わせることで対処
FMODインディーライセンス • 50万ドル以下のプロジェクト • 1年目まで無料。 2年目から1タイトルにつき$2,000
マルチプラットフォーム対応
マルチプラットフォーム対応 Nintendo Switch 、PS4、XboxOne それぞれ約2ヶ月、合計約6ヶ月で 3機種分を一人で移植しました。 • PC版リリース後に移植作業に着手 • 6ヶ月のうち半分はデバッグとテスト。手動でやったため大変だった
コンシューマ機 移植をスムーズにするためにしたこと • 本格的な移植作業に入る前に事前に実機動作テストをして 問題のある箇所を割り出しておいた • 機種固有のアセットをなるべく作らない • レンダラーを全機種ディファードで固定 • 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 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
実績、トロフィー、セーブの扱いなど機種固有の対応 C++が必要だったのでちょっと大変でしたが、サンプルコードを見てなんとかすべて実装しました。
最適化1 FileOpenOrderでロード時間短縮 適用後、8秒近く早くなりました
死んだ時にRestart Gameでなく手動でアクターの状態を戻してリスタートの高速化 Restart Gameはなるべく使わない 手動で敵の位置や箱の位置などを初期値にリセット 複雑なイベントがあるダンジョン4などは完全にリセットするのが難しかったた め、例外でRestart Gameを使っている箇所もあります
その他の最適化 Zprepass有効 / LODをすべて設定 不要なtickは全部OFFに / 遠くのアクタは自動でTickoff 遠くの見えないレベルは非表示にする ライトマップ解像度をギリギリまで小さく / Asyncloadでアセットの先読み 草木のマテリアルを軽く / リフレクションキャップチャを必要に応じてOFFに Imposter…はやってみたがかえって遅くなったので無し 常に読み込まれていた巨大テクスチャをソフトリファレンスに メモリリーク箇所をLMMで調査して問題になっているアセットを特定 機種によってダイナミックライトの数と設定を増減
貴重な情報を共有して頂いた方々がいなければ とても一人で作れなかったと思います。 情報を共有して頂いた皆様、 本当にありがとうございます!
告知1 デジゲー博2020出展 2019年の展示の様子 2020年11月29日 秋葉原UDX2階 アキバ・スクエア A-08 アトリエミミナ ブース
告知2 ジラフとアンニカ展 原宿デザインフェスタギャラリー 1-F 2021年 3月19日~21日 実物大「ねこじゃらしになりたい看板も」展示予定です
おわり ご清聴ありがとうございました