講演動画はこちら https://youtu.be/ltDNG1mhuno 本スライドは2020年7月18日に行われた勉強会「 UNREAL FEST EXTREME 2020 SUMMER」の講演資料となります。 https://www.unrealengine.com/ja/events/unreal-fest-extreme-2020-summer

1. #ue4fest#ue4fest
Bloodstainedで
世界のバッカーの期待に応えた
UE４事例紹介
株式会社 ArtPlay
クリエイティブディレクター/テクニカルアーティスト
渡邉 昌夫

2. #ue4fest#ue4fest
• 名前：渡邉 昌夫
• 役職：クリエイティブディレクター/テクニカルアーティスト
自己紹介
セガAM-2でアーケードのQuest of D シリーズのキービジュアルや
ムービーなどを担当。その後、アートから離れてmixiのサンシャイ
ン牧場のプロデューサーをしたりと放浪する。
ArtPlayの起業に参加し、Bloodstainedではテクニカルアートを担当

3. #ue4fest#ue4fest
• ArtPlayは悪魔城シリーズで知られる弊社IGAが
代表兼プロデューサーを務めるゲーム会社です。
• 代表作
• Bloodstained : Ritual of the Night
• Bloodstained : Curse of the Moon
• Revolver’s 8 (世界観・キャラクター監修)
会社紹介

4. #ue4fest#ue4fest
• IGAVANIAと呼ばれる探索型のアクションRPGです。
• キックスターターで550万ドル以上を集めたユーザー参加型のゲームプロ
ジェクトです。
• 全世界で１００万本のヒットを達成しました。
Bloodstained紹介

5. #ue4fest#ue4fest
• 単純なゲーム開発ではなく、バッカーと呼ばれる個人の支援
者の要望も取り入れながら開発を進めました。ユーザーとの
合作とも言えるゲーム事業です。
ユーザー参加型のゲーム開発

6. #ue4fest#ue4fest
• 途中経過をバッカーに報告
• ユーザー考案の敵やアイテム、部屋が登場
• そのほか、色々なストレッチゴールに対応
ユーザー参加の中身（アートのみ抜粋）

7. #ue4fest#ue4fest
どんな期待に応えたの？

8. #ue4fest#ue4fest
1. 描画は60fpsを達成
（PS4 1080P、Xbox One 900P、switch 720P?)
2. 途中経過を報告しつつ、
1600画面を悪くない品質に。
どんな期待に応えたの？

9. #ue4fest#ue4fest
描画60fps達成の
ためにしたこと

10. #ue4fest#ue4fest
1. 規約
2. 描画 / Config設定
3. 計測
4. ポリゴン数削減
5. マテリアル軽量化
6. 影の軽量化
60fpsのためにしたこと

11. #ue4fest#ue4fest
規約

12. #ue4fest#ue4fest
1. 画面ポリゴン数30万（背景15万＋キャラ15万）
2. キャラ、背景の奥はunlit マテリアルを使用する（画面の
30～40%はunlit）
主な描画負荷の規約

13. #ue4fest#ue4fest
画面の例：教会エリア
背景 134,107 prim
キャラ 48,851 prim
合計 182,958 prim

14. #ue4fest#ue4fest
横から見ると （後述する画角対処のために横に大きく伸びています）
奥はUnlit
画面手前 奥
手前はlit
半透明の
フォグ板

15. #ue4fest#ue4fest
描画設定

16. #ue4fest#ue4fest
✓ Forward Rendering
✓ Occlusion Culling
✓ Bloom
✓ FX AA
✓ 影の品質：2
描画設定
外したもの
× ボリュームライト
× SSR
× SSAO
× Eye Adaption
× レンズフレア
× モーションブラー
× 被写界深度
× フォグ
× Early - Z path
大失敗

17. #ue4fest#ue4fest
計測

18. #ue4fest#ue4fest
1. 実機(Xbox One)に近いPC環境で計測
• GPU Visualizer + r.RHISetGPUCaptureOptions で詳細を表示しておおまか
に計測（大きな問題はこの段階で解決）
2. 実機で計測
• Render Docで詳細を測定
実機に近いPCで計測

19. #ue4fest#ue4fest
じつは半年ほど、
実機計測してない時代があった

20. #ue4fest#ue4fest
しかも半年後、
PCのCPU性能が実機より
８倍も高速だと発覚した。

21. #ue4fest#ue4fest
実機計測は忘れずにね！

22. #ue4fest#ue4fest
ポリゴン数削減（背景）

23. #ue4fest#ue4fest
1. 背景：標準のLOD作成機能を利用
• 装飾はモデリングせず、金属にして誤魔化す
• Occlusion Cullingを入れたら急に改善
2. キャラ：Houdiniを使って削減
• マニュアル化して他の人に手伝ってもらう
ポリゴン数削減

24. #ue4fest#ue4fest
標準機能でLOD作成 (1)
1: LODの数を入れる
2: チェックを外す
3: 画面内のサイズ

25. #ue4fest#ue4fest
標準機能でLOD作成 (２)
LODの設定をコピーして 複数のアセットにペーストできます
LOD設定コストが予想より大幅に下がる

26. #ue4fest#ue4fest
Occlusion Cullingを入れたら大幅に改善
何かの手違いでOFFになっていた。
ONにしたらポリゴンが大幅に減って感動。

27. #ue4fest#ue4fest
装飾は低ポリにするためにモデリングしてません。
例：王宮エリアの場合 装飾はモデリングしてません

28. #ue4fest#ue4fest
金属を織り交ぜた装飾の方が質感を出しやすい
Metal=0 だとRoughness=0でも光沢がない 装飾部分だけMetal=1にした場合
低ポリ感を防ぐため、金属の装飾を敢えて加える場合もあった

29. #ue4fest#ue4fest
Bloodstainedの非metalで光沢が出なかった理由
1. ForwardだとSSRは使えない。反射による光沢が出ない。
2. 処理負荷軽減のため、Stationary Lightが当たらない場合が多い。
Lightmapだけだとspecularが出ない。
3. MaterialのHigh Quality Reflectionをオフにしていたので、複数の
Reflection Captureが効かなくなっていた

30. #ue4fest#ue4fest
ポリゴン数削減（キャラ）

31. #ue4fest#ue4fest
キャラはHoudiniで減ポリ
• 当時のunrealでは骨付きのモデルの減ポリ機能はなかった
• 背景量産のために導入したHoudiniで骨付きのモデルを簡単に減らせ
ることが分かる
• マニュアル化して、ディレクターとアーティストにも手伝ってもらい、
キャラの最適化に大いに貢献

32. #ue4fest#ue4fest
Bloodstainedのキャラ減ポリの流れ
1
UEから
FBX書き出し
2
HoudiniでFBX読み込み
減ポリし、FBX書き出し
3
UEに
FBX読み込み

33. #ue4fest#ue4fest
当時のHoudiniのノードを少し紹介
読み込んだ状態 ノードを追加
UVをVertexにする
頂点結合で壊れないようにする
Weightを元のモデルから転写する
減ポリ

34. #ue4fest#ue4fest
削減具合をpaintするノードもあります
名前をretentionにする
Retain Density by Attribute
のチェックを入れる

35. #ue4fest#ue4fest
マテリアル最適化

36. #ue4fest#ue4fest
マテリアル最適化に寄与した主な施策
背景
• Materialをシンプルにする。使うtextureを少なく
• High Quality Reflectionをオフにする
• Customized UVの使用
キャラ
• Unlitのトゥーンを使用

37. #ue4fest#ue4fest
シンプルでtextureが少ないのが軽かった
Textureを2つしか使っていない
最も軽かった
氷のmaterial

38. #ue4fest#ue4fest
High Quality Reflectionをオフに
チェックを外すとReflectionCapture
の処理が軽くなる。
ただし、Captureを複数置いて反射を
調整することができなくなる

39. #ue4fest#ue4fest
複数の質感を重ねる時は Custom UV を使用
２つの質感を異なるUVで
重ねている
質感ごとにCustom UVを
作成して処理負荷を軽減

40. #ue4fest#ue4fest
キャラはunlitのトゥーン風
Vectorで陰影の方向を設定できる
シーン全体の陰影と
個別の陰影をブレンドする
陰影の色と強さを調整
フレネルを調整

41. #ue4fest#ue4fest
Maskedで全ての状態を常時計算するため、結構重い
親はすべての状態異常を常時計算している
１つ１つの状態異常もかなりの量のノードがある。 キャラのトゥーンシェーダー部分

42. #ue4fest#ue4fest
影の軽量化

43. #ue4fest#ue4fest
キャラ
• 影の多重計算バグを解消
• 影用のモデルを用意して減ポリ
背景
• 最低限のアセット以外は影をオフにする
影の軽量化のためにしたこと

44. #ue4fest#ue4fest
影の多重計算
３体で１組の
モデル構成
本体モデル
アウトライン
モデル
影モデル
Cast shadow Off Off ON
Visible ON ON Off
表示はOffでも負荷は存在する謎のバグがあった

45. #ue4fest#ue4fest
影用モデルのポリゴン数は少なく
21500 polygon 1600 polygon
本体モデル 影モデル

46. #ue4fest#ue4fest
背景で必要のない影をOffにする
例えば、逆光のみで影が落ちる自然地形エリアの場合
背景のDynamic Shadowは全てOff

47. #ue4fest#ue4fest
負荷軽減で
本当はやりたかったが
できなかったこと

48. #ue4fest#ue4fest
1. 実機で処理負荷を計測し、初期に負荷設計する
2. エフェクトの負荷設計をする
3. Materialの負荷設計をする
4. Early-Z pass
本当はやりたかったが出来なかったこと

49. #ue4fest#ue4fest
途中経過を報告しつつ、
1600画面を悪くない品質に

50. #ue4fest#ue4fest
1. 低画角にする
2. 要望を聞いて改善
1600画面の量産と品質改善のための主な施策

51. #ue4fest#ue4fest
低画角にする

52. #ue4fest#ue4fest
なぜ低画角？高画角の問題点（1）
画角20 画角90
• 足場が分かりにくい
• 画面端で意図せず落ちたり、キャラが隠れてしまう

53. #ue4fest#ue4fest
なぜ低画角？高画角の問題点（2）
画面左端 画面右端
• 画面の左右でキャラの向きが変わってしまう
• 上記により、攻撃判定が分かりづらくなる

54. #ue4fest#ue4fest
低画角だと背景の見た目が…
• 背景の立体感が無くなり、板ポリを貼ったような印象に
画角20画角90

55. #ue4fest#ue4fest
手前を低画角、奥を高画角にする必要がある
奥の背景を奥に伸ばすことで低画角と高画角を両立
修正した背景 斜めから見ると、奥に伸びている

56. #ue4fest#ue4fest
奥に伸ばすと、ライティングに問題が…
• 奥までライトが届かず、真っ暗になってしまう
• 理由）光は距離の2乗で減衰する

57. #ue4fest#ue4fest
ライトを奥に並べるBPを作る
強さを弱めながら奥にライトをコピーする
Bloodstained以外では役に立たない技術…

58. #ue4fest#ue4fest
何が正しかったのか？
良い点 悪い点
奥を伸ばす あまり良い点がない ライティング、カメラの回転で問題
手前を縮める ライティングは解決。 カメラの回転には耐えられない
画角50度ぐらい 遊びやさ、迫力もそこそこある。 遊びやすさ、迫力が若干落ちる
頂点シェーダーで
イイ感じに歪める
ライティングは解決。
カメラもある程度回転できる
影、カリングで問題発生。
エンジン改造しないと実用に耐えない
プレイヤーを常に
画面の中心に
カメラ、ライティングの問題を解決
やや間合いが取りづらい
オープンワールドの技術が必要

59. #ue4fest#ue4fest
要望を聞いて改善する

60. #ue4fest#ue4fest
完成までに途中経過をみせるスタイル
第1回炎上
第2回炎上
「 かよ」
「絵がUgly」
「 かよ」
世界のメディアから酷評

61. #ue4fest#ue4fest
かよ

62. #ue4fest#ue4fest
提出したキャラのプレビューを酷評される
キャラをトゥーンシェーダーに

63. #ue4fest#ue4fest
かよ

64. #ue4fest#ue4fest
提出した背景のプレビューを酷評される
× 手描きテクスチャの
品質の差が激しい
× ライトマップ軽視
２Dライクだし、こんなもんだと油断した…

65. #ue4fest#ue4fest
ひとまず応急処置をしてやりすごす
✓ ライトマップ見直し
✓ 質感の見直し
✓ ノイズを自動で入れて
ディティールがある
ように見せる

66. #ue4fest#ue4fest
手描きテクスチャの問題に直面
コンセプトアート 手描きテクスチャによるプレビュー
アーティストの個性が出すぎて、雰囲気を一定に保てるか不安に

67. #ue4fest#ue4fest
カラーテクスチャをやめて、色を後で調整する方針に
修正した画面
✓ 手描きのカラーテクス
チャをやめる
✓ 基本的な建築のアセッ
トをHoudiniで自動生
成し、品質を統一する

68. #ue4fest#ue4fest
絵がUgly
世界のメディアが酷評

69. #ue4fest#ue4fest
今度は世界のメディアから酷評を浴びる
× やはり全体の品質が…
× ライトディングが陳腐
× 開発が遅れる中、次々と
強烈なライバルが…

70. #ue4fest#ue4fest
さらにアセットをプロシージャル化
ハンドメイド中心 プロシージャル中心
改善し続けたプロシージャルが終盤に真価を発揮し始める

71. #ue4fest#ue4fest
各エリアのライティングを総見直し
バッカーから希望の多かった逆光、嘘ライトの削除を推進

72. #ue4fest#ue4fest
ライティングを効率化する仕組み
✓ プログラマーがJenkinsで複数エリアのライトマップを
一括ベイクする仕組みを作ってくれた
✓ BPで大量のライトを自動配置する仕組みがあった
（Bloodstainedの背景は奥に伸びているので大量のライトが必要）

73. #ue4fest#ue4fest
まとめ
ご清聴ありがとうございました。
世界のバッカーさんたちの期待に応えるのはつらかったけど、
そのおかげで納得のできる作品になったと思います！
https://artplay.co.jp/jobs/
✓ ArtPlayではベテランの方から若い方まで幅広く人材を募集して
います。ご興味があれば、弊社ウェブサイトをご覧ください！