City Starter のビジュアル スタイル

City Starter テンプレートは、Unreal Editor for Fortnite (UEFN) 内で都市の外観をデザインするのに使用可能なプロセスとテクニックに焦点を当てています。

この島にはニューヨーク市の一部が収められており、ティーンエイジ・ミュータント・ニンジャ・タートルズ (TMNT) がまるで自宅にいるかのように感じられるようなライティングやスタイルが設定されています。 街を視点の高低を問わず見て回れるので、ぜひテンプレートをプレイしてみてください。

このガイドでは、チームがテンプレートの外観を概念化してビルドする際に実行した手順を確認します。 以下の領域をカバーします。

• コンセプトからビジュアルをデザインする

• アセット レイアウトへのアプローチ

• ポストプロセス テクニック

• スタイルに関する追加のテクニック：カスタム スカイボックス、ライティング、ウィンドウ

• 体験を広げるアイデア

ポストプロセス、スカイボックス、カスタム ライティングを見ていき、デザイン性の高いきれいなビジュアルを作成する方法をご紹介します。

テンプレートにアクセスするには、次の手順に従います。

1. UEFN を開きます。

2. [Brand Templates] > [City Starter] に移動します。

3. 新しいプロジェクトを作成します。

ビジュアル スタイル

City Starter テンプレートには、cartoon (カートゥーン) と comic (コミック) という 2 つの顕著な美的スタイルが備わっています。 これらのビジュアル スタイルは、TMNT のゲームプレイとテーマに合わせて設計されました。 2 つのスタイルは、ポストプロセス ボリュームを通じて UEFN テンプレートで、およびポストプロセスの仕掛けを備えたクリエイティブ島で使用できます。 これらのスタイルは、TMNT デベロッパー ツールに限定されるものではありません。 テンプレートのテクニックを使用して、島をさらにカスタマイズしたり、このテンプレートを基にビルドしたりできます。

Cartoon Style Filter (カートゥーン スタイル フィルタ)	Comic Style Filter (コミック スタイル フィルタ)

これらのスタイルは、カートゥーンから 3D アニメーション スタイルまでの TMNT 体験を検討して収集されました。 Paramount と協力して、TMNT の世界観を捉えた象徴的な要素を確立しています。 コンセプトアートやその他の参考アセットから、セルシェーディング、月が見下ろす屋上のシーン、配色といった要素に注目して作られています。

コンセプトのリファレンス

デザイン性は、ゲーム体験の仕組みや物語に適合するゲーム デザイン要素として機能しています。 これは、色、ライティング、アセット、シーンのレイアウトにまで及びます。 それらにより、プレイヤー体験のフィーリングを構築しています。

スタイルを切り替える

エディタから、アウトライナーを使用してスタイルを切り替えることができます。 アウトライナーで「postproccess」を検索し、PostProcessVolume_Cartoon ボリュームと PostProcessVolume_Comic ボリュームの両方を表示します。

下水道の隠れ家にあるスタイル スイッチャー。

カートゥーン スタイルはデフォルトでアクティブになっています。 コミック スタイルを有効にするには、次の手順に従います。

1. アウトライナーで、PostProcessVolume_Cartoon の [目玉] アイコンをオフに切り替えます。

2. PostProcessVolume_Comic を選択し、[Details (詳細)] パネルで「blendweight」を検索します。

3. [Blend Weight (ブレンド ウェイト)] の値を 1 に設定します。

テンプレート ゲーム プレイでは、壁にあるスイッチの仕掛けから下水道の隠れ家内のビジュアル モードを選択できます。 スタイルを切り替えて、通りと屋根のレベルを探索し、都市を作成する TMNT アセットを表示します。 テンプレートを基盤として使用して、独自の TMNT 体験をビルドしたり、ビジュアル テクニックを別のプロジェクトに取り入れたりすることができます。

これらのスタイルをさらに調整する方法については、このページの「ポストプロセスのテクニック」セクションを参照してください。

レベルデザイン

カートゥーン フィルタとコミック フィルタはどちらも印象的なビジュアル スタイルである一方で、テンプレートをまとめるのは都市となります。 アーティストたちは、TMNT の本物の街を創り出すような形でアセットを配置しています。 TMNT とフォートナイトのアセットを使用すると、街にレイヤーを追加できます。 プレイヤーが移動する空間と経路を定義するためのアセットの配置をレベル デザインと呼びます。

TMNT シティ。背景に景観のシルエットが描かれています。奥行きが出て、プレイヤーを囲みます。

街の中心

テンプレートは、都市を定義する選択肢から設計されました。 テンプレートは完全なゲームのサンプルではありません。しかし、レイアウト設計をしやすくするため、テンプレートには、プラットフォーマー テーマがあります。 このゲーム ジャンルは、プレイ可能な空間を定義するのに役立ちます。 プレイ可能なスペース内に、アーティストは TMNT アセットを中心に、ユニークで詳細なアセットを配置しています。 プレイヤーがこれらのアセットに入り、探索できるというアイデアです。

これらのアセットがテーマを支えています。 スタイルを考えるときは、アセットを念頭に置く必要があります。 これらが、体験の視覚的な外観を向上させることも、損なうこともあります。 レベル内でのこれらのアセットの配置と、プレイヤーがシーン内を移動する方法も重要な役割を果たします。 このテンプレートにより、ポスター、ネオン サイン、落書き、小道具などの追加のアセットを使用してワールドに個性を与え、テーマをさらに確立させることができます。 アセットの完全なリストについては、「TMNT 島で作業する」を参照してください。

コミック スタイル モードのチャンネル 6 アセット。

プレイ可能なスペースが設定された後、チームにはそのスペースを埋めるためにマップの残りの部分をどのようにビルドするかについてのアイデアがありました。

マップは前景、中景、背景で構成されています。 建物や窓は、中心から離れるほど単純になっていきます。 スカイラインはマップのバックドロップとして機能し、プレイヤーを街の中に閉じ込めます。 下水道の隠れ家については、プレイヤーがエリアのあらゆる部分を探索できるように、非常に詳細なアセットが配置されています。

都市レベルのアセット レイアウト	下水道の隠れ家のアセット レイアウト

最後に、月、窓、ライティング、視覚フィルタなどのアクセント要素を使用して、都市のナイトライフの雰囲気を表現します。

ポストプロセスのテクニック

都市の雰囲気を際立たせているのは、ビジュアル スタイルを作成するために使用されているさまざまなテクニックです。 ポストプロセス ボリュームは、スタイルの作成に使用される主要な機能です。

ポストプロセスは、島全体または特定の部分のビジュアルに影響を与える視覚的なオーバーレイです。 各フィルタには、外観を決定するカスタム マテリアルとともに調整された標準のポストプロセス設定があります。 ポストプロセスとその標準設定の詳細については、「ポストプロセスの概要」を参照してください。

カートゥーン ポストプロセス フィルタ

深いフォグ

テンプレートは、マテリアルを通じて大気のカスタム フォグ エフェクトを使用しています。 フォグは街に色彩を与え、深みを与えるのに役立ちます。 マテリアル設定を使用して、建物のシルエットやシーンの色を芸術的に制御できます。

調整を行うためのコントロールの詳細については、ページの「カスタム フォグ マテリアル」セクションを参照してください。

前景にある都市のスカイライン	都市のスカイラインが後ろに移動

セル シェーダー

セル シェーダー マテリアルはライティングを平坦化し、ポスタリゼーションとしきい値を少し追加します。 これにより、シーンがよりカートゥーン的に見えるようになります。

テンプレートでは、距離が不自然に見えないように、エフェクトが前景にマスクされています。 参考となるカートゥーンやアニメでは背景が柔らかく描かれていることが多いため、マスキングによって見た目が維持されます。

セル シェーダー値 0	セル シェーダー値 1

輪郭

アウトラインは、シーンのデザイン性をより高め、カートゥーンのような雰囲気を作り出すのに役立ちます。 マテリアルには、深さに応じて厚さ、色、不透明度を制御するオプションが含まれています。 これらの設定により、アーティストは前景の線を強調し、遠ざかるにつれて建物の輪郭が曖昧になるよう表現しています。

Out 値 0

Out 値 1

コミック ポストプロセス フィルタ

Comic (Noir) フィルタは、カートゥーン フィルタと同様の標準的なポストプロセス設定とセル シェーダーおよびアウトライン マテリアルを使用します。 アウトライン マテリアルは、トーンのグレースケール範囲に合わせて調整されています。 フィルタの独自のカスタム マテリアルには、ポスタリゼーション、コミック トーン、フレームなどがあります。 その結果、カートゥーンやグラフィック ノベルを彷彿とさせる非常にグラフィックなスタイルが生まれました。

コミック トーンとフレーム

コミック トーン マテリアルは彩度を下げ、輝度しきい値を適用して、シーンに印刷された色調範囲を与えます。 次にフレーム マテリアルを適用して外観を完成させます。

コミック トーンとフレーム値 0	コミック トーンとフレーム値 1

ポスタリゼーション

コミック エフェクトをさらに説得力のあるものにするために、この画像は、さまざまなサイズのドットに変換された灰色の実線でポスタライズされています。 色調が暗くなるほど、ドットは大きくなり、最終的に純粋な黒になります。 次に、ドットは必要な量だけグレースケール画像に結合されています。 ゲームプレイ中の目の疲れを軽減するために、このマテリアルは本来の値の 25% で使用されています。

ポスタリゼーション値 0	ポスタリゼーション値 1

ポストプロセス マテリアルを編集する

マテリアルは、両方の様式化されたモードで表示されるポストプロセス エフェクトを決定します。 各マテリアルの構造を調べて、プロジェクトに合わせて調整することができます。 ポストプロセス ボリューム内のマテリアルを交換して、スタイルをすばやく変更することもできます。

各ポストプロセス ボリュームのカスタム マテリアルを表示するには 、以下の手順を行います。

1. アウトライナーで、ポストプロセス ボリュームをクリックします。

2. [Details] パネル > [Rendering Features (レンダリング機能)] > [Post Process Materials (ポスト プロセス マテリアル)] > [Array (配列)] に移動します。

カートゥーンのポストプロセス マテリアル	コミックのポストプロセス マテリアル

各配列の値を 0 から 1 の間で調整して、各マテリアルのエフェクトを調べることができます。 各マテリアルの場所を開くには、[フォルダ] アイコンをクリックします。 次に、調べたいマテリアルをクリックして、マテリアル エディタを開きます。 マテリアル エディタには、[Details] パネルにいくつかの芸術的な設定があります。他のエディタには、マテリアル グラフにパラメータがあります。 アーティスト フレンドリーな設定は、パブリック変数として公開されるマテリアル グラフのパラメータです。 エディタ、関数、式などのマテリアルの詳細については、「Material ノードと設定」を参照してください。

カスタム フォグ マテリアル

マテリアル内のアーティスト設定の例としては、深度フォグ マテリアル用に設定されたパラメータが挙げられます。 フォグのカラー値はカーブ ランプによって設定されます。これにより、シーンの深度全体にわたってフォグの値を正確かつ柔軟に調整できます。 これは、エディタのビルトインの大気フォグ システムよりも詳細な制御が可能です。したがって、デザイン性の高い外観を作成できます。

深度フォグ マテリアルのコントロール。

このマテリアルは、アーティストが素早く調整できるように設計された次のコア パラメータで構成されています。 これらの値は、マテリアルの [Details] パネルからアクセスしたり、マテリアル グラフに移動してデフォルト値を調整したりできます。

フォグ マテリアルは、各マテリアルを開いて調整する方法の一例です。 残りのマテリアルも同じ原理です。 新しいポストプロセス マテリアルの作成を練習し、マテリアル グラフについて学習するには、「ポストプロセス マテリアルを使用する」を参照してください。

さらなる視覚的テクニック

このセクションでは、雰囲気とデザイン性をさらに高めるためにライティングと窓で使用可能ないくつかのテクニックについて説明します。

プロシージャル スカイボックスを調整する

もう 1 つのマテリアル ベースのテクニックは、ポストプロセス ボリュームとは別のスカイボックスの使用です。 どちらのフィルタも、カスタム プロシージャル スカイボックスを使用して、デザイン性の高い雰囲気を作成します。 マテリアルは、マップを囲むスタティックメッシュの球体にアタッチされます。 アーティストフレンドリーなパラメータがマテリアルの [Details] パネルに公開され、すばやく調整できます。

次のいずれかからスカイボックス ツールにアクセスできます。

• [Outliner (アウトライナー)] > [SkySphere] > [MI_ProceduralSkybox]

• [Content Drawer (コンテンツ ドロワー)] > [Project Name (プロジェクト名)] > [Materials (マテリアル)] > [MI_ProceduralSkybox]

マテリアルをダブルクリックしてマテリアル エディタを開きます。 [Parameter Groups (パラメータ グループ)] カテゴリには、下の表に示すように、空のスタイルを調整するための設定が含まれています。 このカテゴリには、地平線と月の鮮明さを切り替える [Global Static Switch Parameter Values] が含まれています。

スカイボックス マテリアルのコントロール。

スカイボックスのパラメータ	説明	例
Global Scalar Parameter Values (グローバル スカラー パラメータ値)	月と大気の属性を調整します。 コントロールにより、アーティストは月を中心としたデザインを作れます。 この技法により、月を背景にシルエットで建物の上を走る TMNT のカメのコンセプトを実現できます。
Global Vector Parameter Values (グローバル ベクトル パラメータ値)	空の属性の色を調整します。 カスタム スカイボックスを使用すると、空のグラデーション カラーとブレンド バイアスをより細かく制御できます。 この色の制御は、高層ビルに対するスカイラインの価値を向上させるために不可欠です。 追加のカラー コントロールを使用すると、現実的な値を超えて空を慎重に調整して、デザイン性のあるカラー パレットにさらに適合させることができます。
スター	星の変形、色、タイリング、明るさを調整します。
雲	雲のテクスチャ マップ、雲の覆い具合、エッジの柔らかさ、明るい色と暗い色、リム ライト、不透明度、雲の動きの方向を調整します。 これにより、アーティストはより視覚的に興味深い、よりダイナミックな空を表現できるようになります。

マテリアル グラフからマテリアルをさらに詳しく調べることができます。 マテリアル グラフを開くには、マテリアル エディタ ツールバーで、[Hierarchy] > [M_ProceduralSkybox] をクリックします。 グラフが開き、コメント ボックスに分類されたノードのグループが表示され、それらがどのパラメータに影響するかが示されます。 ノードを調整してパラメータを再定義できます。

プロシージャル スカイボックスのマテリアル グラフ。

カスタム ライティング

テンプレートのライティングは、適切なデザインとなるようにポストプロセス ボリュームと統合されています。 ライティングは雰囲気を演出し、プレイヤーに方向性を伝えるうえで役立ちます。 また、ポストプロセス フィルタの属性を定義するのにも役立ちます。 街を照らすために一般的なライティングが配置され、その後、建物や小道具を強調するために特定のライティングが追加されました。

ムード ライティング

ムード ライティングとは、特定の雰囲気を演出するためにライティングを正確に配置するプロセスのことです。

概念化の段階では、アーティストは参照アセット (ムードボードと呼ばれることが多い) を確認して、感情とライティングの方向性を決定します。 このプロセスは、実写映画、アニメーション、ライブシアターなどの他のストーリー形式でも使用されています。

シーン内のムードライティングのほとんどは、次のいずれかによって設定されます。

• スカイライト：シーンの周囲の色を制御し、影の中の最も暗いライティングを制御します。

• ディレクショナル ライト：月の位置と月からのライティングを制御します。

• ポイントライト：それほど注目されない領域にカートゥーンのような色を加えるために配置します。 (これらのライトによって作成された明るいスポットを除去するために、スペキュラは無効になっています。)

• アクタにアタッチされたライト コンポーネント。

• エミッシブ マテリアル

ムード ライトは、プロジェクトを最適化する際に視覚的な品質を維持するのにも役立ちます。 ライトとアセットの様式化により、ローエンドの仕掛けでも視覚的なクオリティを維持できます。

クラシック フォートナイト BR スタイル	カートゥーン スタイル	コミック スタイル

芸術的なライティングに関するプラクティスの詳細については、「ライティングと色」を参照してください。

窓

街の中心から離れるほど、シーン内のウィンドウは単純化されます。 レベル デザインで述べたように、単純化によって深みが増し、シーンの最適化に役立ちます。 窓も光を放つマテリアルを利用しており、デザイン性のある外観をさらに引き立てています。 以下の表は、ウィンドウに使用されるさまざまな手法について説明しています。

テクニック	説明	例
Interior Cubemap (内部キューブマップ)	3D 空間の外観を表現するマテリアル メソッド。 このメソッドは、プレイヤーが入る予定はないものの、通り過ぎるときに表示される建物を埋めるために使用されます。 [Content Drawer] > [Project Name] > [Materials] > [M_Windows_Interior] でマテリアルにアクセスできます。
Window Mask (ウィンドウ マスク)	窓の位置をランダム化して背景の建物に変化を与えるマテリアルです。 [Content Drawer] > [Project Name] > [Materials] > [M_WindowMask] からマテリアルにアクセスできます。
Random Value from World Position (ワールド位置からのランダム値)	部屋の見た目 (明るいか暗いか) は、ワールド内の窓の位置によって決まります。 各ウィンドウ マテリアルには、マテリアルの色に適用されるワールド位置オフセットがあります。 オフセットによりランダムな明るさの要素が作成され、都市に活気が加わります。 このメソッドにより、固有のマテリアルとメモリの使用が削減されます。
Cartoon Sheen Material (カートゥーン光沢マテリアル)	デザイン性のある光沢エフェクトを模倣するため、窓に斜めの線を適用します。 [Content Drawer] > [Project Name] > [Materials] > [M_Windows_Channel6]。

体験を拡大する

テンプレートの主要なデザインの作成に使用されるアプローチとテクニックを学習したら、マップを独自の TMNT 体験へと進化させられるようになります。

テンプレートを実行し、スタイルを切り替えて、どのようなゲームプレイ要素と物語がフィルタと都市に適合するかを検討してみましょう。

始めるにあたって、いくつかのアイデアを下記でご紹介します。

• プラットフォーム ベースの上にビルドし、全体で敵とのエンカウンターを追加します。 エンカウンターを追加する方法については、「TMNT での敵とのエンカウンターと障害」を参照してください。

• ニュースルームのアセットをコミック スタイルの物語のカット シーンとして使用します。 詳細については、「シネマティックスとカットシーンを作成する」を参照してください。

• シーケンサーを使用して表示されるダイアログ ボックスとしてコミック スターバースト マテリアルを使用してエフェクトを強化します。 詳細については、「シーケンサーでのゲームプレイ イベント」を参照してください。

晴れスタイルを作成する

テンプレートを基にビルドしたり、アセットを他のプロジェクトに取り込んだりする場合は、都市のシーンと TMNT アセットに適した物語とゲームプレイの概念的な基盤から始めます。 どのような雰囲気にしたいか、ライティングがどのように見えるかを考えてみましょう。 プレイヤーに探索してもらうマップ部分も検討します。

屋上で NPC とエンカウンターする、晴れスタイルのマップのコンセプト リファレンス。

ポストプロセス ボリュームと追加の視覚的テクニックを使用すると、この太陽が降り注ぐスタイルの都市のコンセプトを実現できます。

スカイボックスを調整する

まず、プロシージャル スカイボックスを使用して雰囲気を明るくします。 青空を作成するには、次の手順に従います。

1. コンテンツ ドロワーで、「MI_ProceduralSkybox」を検索し、ダブルクリックしてマテリアル エディタを開きます。

2. [Details] パネルで、次の値を調整します。

   1. [Cloud Dark and Light (雲の暗さと光)]：RGB 1.0、1.0、1.0

   2. [Horizon Colour (地平線の色)]：RGB 0.0619、0.970、1.0

   3. [Colour Top (色のトップ)]：RGB 0.038、0.119、0.838

   4. [Star Brightness (星の明るさ)]：0 (星を消す)

   5. [Moon Brightness (月の輝度)]：9.5 (太陽を模倣する)

あるいは、月の明るさを調整する代わりに、マテリアル グラフ内の月のテクスチャを独自の太陽の画像と交換することもできます。

ライティングを調整する

空が青ければ、太陽とその光の方向がより適切に一致するはずです。 太陽の位置と光の方向を調整するには、次の手順に従います。

1. アウトライナーで、「DirectionalLight_Index1」を検索して選択します。

2. ライトを左に回して、より高い位置に設定します。

3. [Details] パネルで、光の強度を 6 に上げます。

次に、中景と前景の窓のライトをオフにするには、次の手順に従います。

1. 中間のウィンドウをクリックします。

2. メニュー バーで、[Select (選択)] > [Select All With Same Material (同じマテリアルを使用しているアクタをすべて選択)] をクリックします。

3. ウィンドウ セットを削除します。

4. 前景ウィンドウに対して手順を繰り返します。

必要のないウィンドウを削除すると、シーンの最適化に役立ちます。

フォグを調整する

晴れモードでは、PostProcessVolume_Cartoon をベースとして使用します。 フォグの深さと色を調整するには、次の手順に従います。

1. コンテンツ ドロワーで、「PP_DepthFog_Inst」を検索し、マテリアルをダブルクリックしてマテリアル エディタを開きます。

2. [Details] パネルで、Curve Input カラー カーブをダブルクリックします。

3. 上部のカラー キーの値を調整します。

   1. 右端のカラー キー：RGB 0.022、0.979、0.629

   2. 中間のカラー キー：RGB 0.0、0.140、0.307

   3. 左端のカラー キー：RGB 0.208、0.059、0.117

PP_DepthFog_Inst の [Details] パネルで、次の値を使用してカラー ランプの深度を調整します。

• カーブ遠点：93511

• カーブ近点：14887

ポスタリゼーションを調整する

最後に、ポスタリゼーションを追加して、コミック ノワール モードと同様のドット エフェクトを作成します。

1. [Details] パネルの [Post Process Materials (ポストプロセス マテリアル)] の下で、[+] アイコンをクリックしてマテリアル配列要素を追加します。

2. 新しい配列のドロップダウンから、[Asset reference (アセット参照)] を選択し、「PP_Posterize」を検索して選択します。

3. 量を調整するには、マテリアルを参照してダブルクリックし、マテリアル エディタを開きます。

4. [Parameters (パラメータ)] パネルで、[Posterize Amount (ポスタリゼーション量)] を 0.05 に設定します。

マテリアルとライトを少し調整するだけで、街を青空で明るくすることができます。 これで、カメを隠れ家に連れて行けるようになりました。