2014年12月14日に大阪で行われたUE4背景アーティスト勉強会で使用したスライドになります。 勉強会当時よりも少し補足解説が追加されています。 ゲーム開発における背景のワークフローの解説をレベルデザインパイプラインの流れに沿って解説をします。 最初に軽くレベルデザインパイプラインの説明をし、その中で背景制作でもっとも重要なアートプロトタイプの工程について解説をしています。 勉強会当時の動画がYoutubeにアップしてありますので、あわせてご覧ください。 https://www.youtube.com/watch?v=huJ69V-FGog

1. UE4 背景アーティスト勉強会
in 大阪
ハッシュタグは
＃UE4Study

2. 自己紹介
茄子（TwitterID : nasubi_s）
ゲーム制作会社で背景アーティストを
7～8年していました。
UE4は仕事で使用していましたが、今でも勉強中。
今日の話をネタにディスカッションがしたいです！

3. 本日の時間割
・背景ワークフロー解説（前半）
1時間
・アートプロトタイプの制作実演＆解説（後半）
1時間 X ２
間に１０分ずつ休憩

4. アジェンダ
・レベルデザインパイプラインについて
・アートプロトタイプについて
・実例で紹介
・まとめ

5. パイプラインとワークフローの関係

6. レベルデザインパイプラインの参考
ContentsExampleに入ってる
Leveldesign_WorkFlow.umap

7. レベルデザインパイプラインの参考
Youtubeの解説動画もあります。
Intro to Level Design

8. レベルデザインパイプラインの参考
小規模開発向けとして説明されています。

9. レベルデザインパイプラインの参考
UDN EPIC Games社のデザインワークフロー

10. もう少し具体的に
解説していきます

11. レベルデザインパイプライン
茄子のオススメ

12. レベルデザインパイプライン
茄子のオススメ

13. ホワイトボックス（White Box)
ホワイトボックスとは、
ゲームやアートのコンセプトを元に、BSPや
キューブ、シリンダーのようにシンプルな形状の
アセットを使って、ゲームをどのようにプレイ
ヤーに遊ばせるかを組んだもの。

14. ホワイトボックス（White Box)
ゲームプレイの面白さを確立させるために
簡単な形状のアセットで
ゲームプレイのTRY＆ERRORを行う工程
いわゆるレベルデザイナーが作成する仮レベル。

15. ホワイトボックス（White Box)

16. レベルデザインパイプライン
茄子のオススメ

17. アートプロトタイプ（ArtPrototype)
ホワイトボックスから描かれる
プロダクションアートやペイントオーバー
にもとづいて作成される、
ホワイトボックスよりもビジュアル化された
仮モデルによるレイアウト

18. アートプロトタイプ（ArtPrototype)
仮モデルを作成するだけではなく、
ライティング、ポストプロセスまで入れて
完成絵のイメージがわかるようにする。
また、グラフィックのTry＆Errorを行う工程。

19. アートプロトタイプ（ArtPrototype)
『The Last of Us メイキング動画』 より
©2013, 2014 Sony Computer Entertainment America LLC. Created and developed by Naughty Dog, Inc.

20. レベルデザインパイプライン
茄子のオススメ

21. １st Pass
ゲームプレイに関係のある部分（コリジョンに触
れる可能性のある箇所）を優先的に制作した状
態。
遠景や小さい小石などのプレイに影響のないもの
はアートプロトタイプのままだったりまだ配置さ
れていない。

22. レベルデザインパイプライン
茄子のオススメ

23. ２nd Pass
１st Passから更に制作が進んだもの。
ゲームに乗るアセットはすべてほぼ出来上がって
いる状態。（メモリに載っている）
ライティングやポストプロセスもほぼ出来上がっ
ている。
エフェクトやサウンドも入ってる。

24. レベルデザインパイプライン
茄子のオススメ

25. 磨き（Polish）
描画やメモリなどの細かい調整。
グラフィックではマテリアルやライティング、ポ
ストプロセスの調整をしてより絵をよく仕上げる
工程。

26. そして、完成！！

27. レベルデザインパイプライン
それぞれの工程にはゲートがあります。

28. レベルデザインパイプライン
承認者（ディレクターなど）からOK出たら
次の工程に入ります。
OK♥

29. で、レベルデザインパイプラインが
わかったところで…

30. レベルデザインパイプライン
今日、お話しをするのはココ！

31. ぶっちゃけ言うと・・・
アートプロトタイプが
出来上がれば、
背景はほぼ出来上がったも同然！

32. なぜなら・・・
背景のアセットを後は作るだけ！！
になるからです。

33. 結論
アートプロトタイプをしっかり作成
することが大事です。

34. ということで、ここからが
背景ワークフロー解説の本題です。

35. アートプロトタイプ ワークフロー
私が個人的によいと思っている、
ホワイトボックスからアートプロトタイプまでを
仕上げていくフローを紹介します。

36. アートプロトタイプ ワークフロー

37. コンセプトアート
『Gears of War3』より
『Halo 4』より
『Halo 4』より
© 2014 Microsoft
© 2014 Microsoft
© 2014 Microsoft

38. これをそのまま作り始めるのは
ちょっとハードルが高すぎる…

39. まずは、
どのようなもので構成されているか
を分析する必要がありそうです。

40. アートプロトタイプ ワークフロー

41. 気になるワード
ブロックアウトって何？
？

42. ブロックアウト
ブロックアウトとは？
コンセプトアートの上からパーツがどのように構
成されているかを描き、作成する物量の洗い出し
を行う作業。

43. ブロックアウト
おおお

44. ブロックアウト
おおお

45. ブロックアウト

46. ブロックアウト
基本的に設計はモジュラーアセット。
考えながら作るのは非効率。
まずは、画像ベースで設計するのがよい。

47. ブロックアウト
使い回しを考慮することができ、
無駄なパーツを作らなくてすむ。
ホンマやね！

48. ブロックアウト
最初からブロックアウトをせずに
ざっくりとしたビジュアル作成を優先してから、
ブロックアウトの工程にはいるのもありです。
状況に合わせて
判断が必要やね

49. アートプロトタイプ ワークフロー

50. 気になるワード
モジュラーアセットって何？
？？

51. モジュラーアセット
モジュラーアセットとは？
レゴブロックのように各パーツを組み立てて作成
することができる背景アセットパーツの事。
ようわからん

52. モジュラーアセット

53. モジュラーアセットの参考
Modular Level and Component Design

54. モジュラーアセットの参考
【GDC2013】
Modular Level Design for Skyrim

55. モジュラーアセットの参考
UDN:モジュラー環境の作成

56. モジュラーアセットの参考
Polycount Forum
[UE4] Modular Building Set Breakdown

57. モジュラーアセット
どのぐらいのサイズで分けるのがよいのか？
プレイヤーとの距離や作成するものの種類によっ
て異なる。
壁などのパーツはテクスチャのサイズを考慮して
分けたりすることも。
【例】500cmｘ500cm
（テクスチャは512ｘ512など）

58. 仮モデル作成
グリッドに合わせたパーツを作成することで、
UE4のグリッドスナップを使って配置するだけで
綺麗にレイアウトを組むことができます。
らくちんやな

59. 仮モデル作成
この段階で作成する仮モデルは
テクスチャは貼りません。
貼ったとしても色のみ合わせる程度にします。

60. アートプロトタイプ ワークフロー

61. 仮レイアウト
作成した仮モデルを並べてレイアウトする工程。
スナップサイズを100～500ぐらいがいいかも
（パーツのサイズに合わせて変更）
小さいサイズ（1～10）をモジュラーアセットの
配置に使用しない。

62. 仮レイアウト
レイアウトではプレイヤーを操作して、
空間のサイズに問題がないか、
コンセプトアートの印象に合っているかを確認。

63. アートプロトタイプ ワークフロー

64. 仮ライティング
背景制作において一番重要なのはライティング。
どの時間帯か？屋外か？屋内か？
コンセプトアートからこれらの情報を読み取り、
ライティングを行う。

65. 仮ライティング
同じような背景でもライティングによって
印象が大きく異なる

66. 仮ライティング
早い段階でライティングを決めると作りこむ範囲
も明確になり、無駄な作り込みがなくなる。

67. 仮ライティング
レベル全体を通しての絵的な緩急をつけたり、
演出としても重要な要素になります。
『風ノ旅ビト』より
『Assassin's Creed Unity』より
『P.T.』より
©2014 Sony Computer Entertainment Inc.
©2014 Konami Digital Entertainment
© 2014 Ubisoft Entertainment.

68. アートプロトタイプ ワークフロー

69. 仮ポストプロセス
ポストプロセスの有無で
絵のクオリティが大きく変わる重要な要素。

70. 仮ポストプロセス
BloomやExposureなどライティングの印象に大
きく影響する項目も多いので、
ある程度ライティングの方向性が固まってから調
整を行う方がよい。

71. これで、アートプロトタイプが
完成したーー！！！
というわけではありません。

72. アートプロトタイプは
何回もイテレーションを回す必要が
あります。
なんやて！！

73. わかりやすい実例
GDC2010：Uncharted 2 Art Direction
必読や！

74. イテレーションを回すケース
レイアウトだけでは光と影の調整ができず、
仮モデルから調整が必要な場合。
光が入るように天井に穴を開けた
レイアウトに修正したい場合。

75. イテレーションを回すケース
レイアウトしてみて、
アセットのボリュームが足りなかった場合、
仮モデル制作に戻る。
コンセプトアートにない空間だった場合、
ゲームに合わせて空間サイズを調整する必要がある。

76. わかりやすい実例
（Uncharted 2 Art Direction より引用）
コンセプトアート

77. わかりやすい実例
（Uncharted 2 Art Direction より引用）
参考資料の画像

78. わかりやすい実例
（Uncharted 2 Art Direction より引用）
ホワイトボックス

79. わかりやすい実例
（Uncharted 2 Art Direction より引用）
ブロックメッシュの上に上書きされたアート

80. わかりやすい実例
（Uncharted 2 Art Direction より引用）
アートプロトタイプ（ライティング・ポストなし）

81. わかりやすい実例
（Uncharted 2 Art Direction より引用）
完成したシーンのメッシュ

82. わかりやすい実例
（Uncharted 2 Art Direction より引用）
コンセプトアート

83. わかりやすい実例
（Uncharted 2 Art Direction より引用）
ホワイトボックス

84. わかりやすい実例
（Uncharted 2 Art Direction より引用）
アートプロトタイプ1

85. わかりやすい実例
（Uncharted 2 Art Direction より引用）
アートプロトタイプ2

86. わかりやすい実例
（Uncharted 2 Art Direction より引用）
アートプロトタイプ3

87. わかりやすい実例
（Uncharted 2 Art Direction より引用）
アートプロトタイプ4

88. わかりやすい実例
（Uncharted 2 Art Direction より引用）
アートプロトタイプ5

89. わかりやすい実例
（Uncharted 2 Art Direction より引用）
完成

90. 当初の目標は宇宙船を作ること
個人制作における例
『Concept Ships』より

91. しかし、宇宙船の仮モデルを作ったら背景も作り
たくなってしまった。
個人制作における例

92. しかし、いまいちだったのでもっとSFよりの宇宙
基地に変更。
個人制作における例

93. 印象が良かったのでそのままディテールのパーツ
などを追加して雰囲気を上げていった。
個人制作における例

94. 個人制作における例
3D空間の中で直接コンセプトを制作している事
になります。
２Dのコンセプトアートを描くほうが効率的です
し、悩んだ場合露頭に迷うことが多いです。

95. 個人制作における例
コンセプトアートを勉強した事があるような方は
できるかもしれませんが、
基本的にはおすすめしません。
やらないほうがいいです!!!
（私もできません！）

96. まとめ
・全体のフローを知る事。今の段階を知ること。
・ホワイトボックス、アートプロトタイプに
時間を使い、レベルをしっかり設計することで
無駄な作業をなくすことができる。
・仮モデルと仮レイアウトだけではなく、
ライティング、ポストプロセスまで行うことで、
無駄な作業をなくすことができる。

97. まとめ
様々な点で効率を図ることができ、
不要な工程の後戻りがなくなる。
みんなハッピー！！！

98. 質疑応答

99. ご清聴ありがとうございました。
最後まできいてくれて
おおきに！