AG09.ステージの追加と夜環境作り

😸今回は二つ目のステージを作っていきます。このアクションゲームでは前回までに作成したLEVEL1のステージとLEVEL2のステージ2つを作成して後からステージ選択画面で選べるようにします。

今回実装する環境

このページではこんな感じに夜の環境を作っていきます↓

https://youtu.be/XAuDU6QoBOU

🐱ステージギミックについては次のページで実装します。では夜のステージ作っていきましょう!

①レベルを用意する

では最初にレベルを用意して夜の環境から作成していきます。

LEVEL1のレベルを元に作成していきます。Ctrl+CとCtrl+Vでコピペします。

https://scrapbox.io/files/65d3f17d49fe6e00249f87b5.png

複製したレベルの名前をLEVEL2に変更します。

https://scrapbox.io/files/65d3f1877fcd80002753f3f2.png

LEVEL2のレベルを開いておきます。

https://scrapbox.io/files/65d3f1a0af96770024b4e9d3.png

🐱ではこのステージを元に夜に環境を作っていきます。

②夜の環境を作る

こんな感じに暗く、夜っぽくしていきます↓

https://scrapbox.io/files/65d3f1c3b66cf90026609618.png

DirectionalLightのIntencityの強さを1にします。

https://scrapbox.io/files/65d3f1db79141300242d4f7c.png

DirectionalLightとは？

DirectionalLightは一定方向からの全体の光で、太陽光や月光に主に使用されます。Intencityは光の強さです。夜でも光は月の光がありますし、真っ暗だと何も見えないのでIntencityを弱めておきました。

同じくDirectionalLightのAtmosphereSunLightのチェックを外します。

https://scrapbox.io/files/65d3f20d8dc56a0025802afe.png

AtmosphereSunLightとは？

https://scrapbox.io/files/65d42b8c7ff8ba002dad06c1.gif

ではエンジンフォルダのアセットを使用したいと思います。エンジンフォルダが表示されてない場合は設定からエンジンコンテンツを表示します。

https://scrapbox.io/files/65d45960a72acb00245f5861.png

エンジンフォルダ > コンテンツ > EngineSky > BP_SkySphereをドラッグでレベルの空の適当な位置に追加します。

https://scrapbox.io/files/65d459c814566c0024be8c90.png

SM_SkySphereというアクタがある場合は削除しておきます。すると画像左側にある黒い壁が無くなります。

https://scrapbox.io/files/65d459ed053af4002620fd62.jpg

現在こんな感じになっています。

https://scrapbox.io/files/65d459fdc0edf9002679b82f.jpg

BP_Sky_SphereをLightingフォルダに追加しておきます。

https://scrapbox.io/files/65d45a052a2fc6002550f0e1.png

BP_Sky_SphereのSunHeight(大気の光の高さ)を-1にします。

https://scrapbox.io/files/65d45a1114566c0024be9098.png

BP_Sky_SphereのStarBrightness(星の光の強さ)を1.4にします。

https://scrapbox.io/files/65d45a1c4e620b00248bd0db.png

VolumetricCloudを削除します。

https://scrapbox.io/files/65d45a2ce5da5e0024295746.png

VolumetricCloudとは？

VolumetricCloudとは雲を表現するアクタです。ちょっと見にくいですがVolumetricCloudを削除すると雲が消えて星が見えるようになっています↓

https://scrapbox.io/files/65d45aa6053af40026210aa2.gif

同じくLightingフォルダにあるExponentialHeightFogのFogDenticty(フォグ密度)を0.05に、FagHeifghtFallff(フォグ高さフォールオフ)を0.1にします。

同じくLightingフォルダにあるExponentialHeightFogのFogDenticty(フォグ密度)を0.05に、FagHeifghtFallff(フォグ高さフォールオフ)を0.1にします。

また、Fog Inscattering Colorを黒色に、Directional Inscatting Colorを黒色に変更します。

https://scrapbox.io/files/65d45ad1f306c600253ff7e3.png

ExponentialHeightFogとは？

ExponentialHeightFogとはようするに霧(フォグ)の事です。FogDentictyが霧の密度、FagHeifghtFallffはシンプルに言うとフォグの広がりになります。ちょっと口で説明するのは難しいので値の部分をドラッグで変えてみると変化がわかりやすいです。

https://scrapbox.io/files/65d45df4bb0d69002510bc8c.gif

一旦こんな感じの夜の環境で完成です。ステージ全体を暗くして夜を表現する事ができました。

https://scrapbox.io/files/65d3f1c3b66cf90026609618.png

プレイしてみた感じです↓

https://scrapbox.io/files/65d45e444d1e7600237cdea4.gif

🐱なおこういった光の調整をライティングというのですが、ライティングも設定項目がかなり多くて非常に難しいので二巻で詳しく解説していきたいと思います。

③かがり火を作る

では続いてこういった↓かがり火を作ってステージ上に配置していきます。

https://scrapbox.io/files/65d45e80241f5d002458fecd.png

🐱そして今回かがり火を作っていくのですが、レベル上でアクタのコンポーネントを編集しつつ作成していきます。やってみましょう!

まず基本 > Actorを最初のステージ上あたりに配置します。

https://scrapbox.io/files/65d45ead8f12ce002545401c.png

StarterContens > propsフォルダにあるSM_Lamp_Cellingをクリックで選択しておきます。(選択するだけです)

https://scrapbox.io/files/65d45eba3bf9c400253d9f98.png

🐱今回かがり火に使用する燭台はこのSM_Lamp_Cellingのメッシュを使用します。本来、天井用のライトのメッシュですが燭台っぽいので今回はこれを代わりに使用していきます。

先ほど追加したActorを選択した状態で詳細から追加 > StaticMesh (SM_Lamp_Celling)を選択します。

https://scrapbox.io/files/65d45edf93a64c00254380f5.png

以下のように詳細の欄にスタティックメッシュのSM_Lamp_Cellingコンポーネントが追加されました。

https://scrapbox.io/files/65d45f13d179e6002574c1aa.png

詳細のコンポーネントを編集するウィンドウについて

https://scrapbox.io/files/65d45f6347c2fa0024d0f416.png

ブループリントクラスを作成した時と同様にこの詳細ウィンドウでもコンポーネントを追加や変更などの編集ができます。一番上にアクタ、その下にコンポーネント(アクタの構成部品)が表示されていきます。

SM_Lamp_Cellingコンポーネントを選択した状態で回転のxを180にします。

https://scrapbox.io/files/65d45f79194e8100244e0d03.png

次に火のエフェクトを追加していきます。追加をおしてCascade ParticleSystemを追加します。

https://scrapbox.io/files/65d45f8be7174d00272ba0bb.png

ParticleSystemとは？

火や煙,キラキラするような光,紙吹雪などのエフェクトの事をゲーム開発ではパーティクルと言うのですが、そのパーティクルを追加するためのコンポーネントがParticleSystemになります。

ParticleSystemを選択した状態で、パーティクル > TemplateでP_Fireを選択します。炎のエフェクトが追加されます。

https://scrapbox.io/files/65d461559334f9002460fdea.png

ParticleSystemを選択した状態でちょうど燭台の上に配置されるように位置のZを145あたりにします。

https://scrapbox.io/files/65d46183cce2f2002625470a.png

こんな感じになりました↓

https://scrapbox.io/files/65d461908631e3002561d4b9.png

ParticleSytemを選択した状態で、追加からPointLightを追加します。

https://scrapbox.io/files/65d461acaefba700248e3eb6.png

コンポーネントの親子関係について

コンポーネントを選択した状態で追加する事で子のコンポーネントにする事ができます。後からドラッグで子のコンポーネントにしてもらっても構いません。子のコンポーネントのトランスフォームなどは親のコンポーネントにもとづいて決定されるようになります。今回の様にParticleSytemを選択した状態で追加すると追加したコンポーネントはParticleSytemと同じ位置になります。

PointLightを選択した状態でライト > CastShadowの項目でチェックを外します。

https://scrapbox.io/files/65d461e0b3203a0026093847.png

CastShadowとは？

PointLightの光の影を映すか映さないかの設定です。今回はチェックありの状態だと不自然な影ができてしまっていたので外しました。

https://scrapbox.io/files/65d46212c6afd80025f5e787.gif

さらに光の色をオレンジにしていきます。PointLightを選択した状態で、LightColorから色をオレンジにします。完全に同じにしたい場合はHex sRGBにFFB131FFと入力します。

https://scrapbox.io/files/65d4622993bda70023495184.png

こんな感じにかがり火が完成しました↓

https://scrapbox.io/files/65d46233e14243002694648e.gif

🐱なおビューポートのアイコンが邪魔な場合はビューポート上でGキーで表示,非表示を切り替える事ができます。

移動させる場合は詳細のActor、またはアウトライナーのAcotrを選択してまとめて移動させてください。

https://scrapbox.io/files/65d46277378c400024477acc.gif

名前をF2キーでBonfireにしておきます。

https://scrapbox.io/files/65d4628fd179e60025750d30.png

Alt+ドラッグで複製します。まずはスタート地点のステージに二つ配置します。場所はざっくり適当な位置で良いです↓

https://scrapbox.io/files/65d462b0cdbd57002708a26d.png

ゴール地点の家の前にも二つ複製して配置しておきます。

https://scrapbox.io/files/65d462cdcd5f5a00251c778b.png

合計4つ配置しました↓

https://scrapbox.io/files/65d462e5c0edf900267a3480.png

これでこのページは以上です。

レベル上でアクタを作るべき？それともブループリントクラスとしてアクタを作るべき？

🐱基本的にコンポーネントなどを編集してアクタを作りたい場合はブループリントクラスで作成した方がほとんどの場合において都合が良いでしょう。しかしレベル上で光を見つつ編集したいとか、他のレベルで使用する予定の無いアクタは今回行ったようにレベル上でアクタを作っていく方法も覚えおくと便利です。

夜のステージ環境完成!

ここまでのプレイ動画を貼っておきます↓こんな感じになっています。

https://youtu.be/XAuDU6QoBOU

🐱では次回、新しくステージのギミックを追加していきます。以上です。お疲れ様でした!