2019.09.25

UE4 UnrealEngine アンリアルエンジン

【UE4入門】レベルエディタの使い方 – ④ 地面と空を作成しよう！

morishita

■この連載について

この連載では初めてUnreal Engine4 (以下UE4)を触る方や初心者向けに、
最も初歩的なレベルエディタ上の操作を説明します。

初めての方は過去の記事も参考にしてください。 ⇒ 記事一覧

■環境

Unreal Engine 4.22.3

■今回の内容

ビューポートにアクタを配置する方法を学習していきます。
その中でも今回は新規レベルを作成し、床(地面)と光源の配置について触れていきます。

前回作成した、「EditorUIStudyProject」を開きましょう。
(ない場合は新規にプロジェクトを作成して、サードパーソンのテンプレートを選択してください。)

■1. レベルの作成と床の配置

今回は今まで使用した「ThirdPersonExampleMap」とは別に新規でレベルを作成しましょう。
「ファイル」→「新規レベル」をクリックするとウィンドウが表示されるので、今回は「空のレベル」を選択しましょう。

一旦新規レベルを保存しようと思いますが、その前にレベルを保存するフォルダを作成しましょう。
コンテンツブラウザで「新規作成」→「新規フォルダ」でフォルダを作成して、名前を「Maps」にします。

続けて、「ファイル」→「現在のレベルを保存」をクリックして表示されるウィンドウで、
Mapsフォルダの中に「Level_Sample」という名前で保存しましょう。

ではレベルの中身を作成していきます。
まずは何も配置されていないレベルに地面となるアクタを配置しましょう。
モードパネルの配置モードで、「ジオメトリ」→「ボックス」を選択して、ビューポートにドラッグしましょう。

このように、配置モードではあらかじめ用意されている基本的なアクタを配置することができます。
配置したオブジェクトは各辺同じ長さの立方体なので、これを引き延ばして床のように変形させます。
前回の記事で紹介した、詳細パネルの操作によって変形させようと思います。
以下の画像の様に位置と回転は全て0にし、拡大・縮小を「10,10,0.1」にしましょう。

これでひとまず平らな床が作成できました。

※補足1 (ライティングについて)
上記画像の通り、現在の状態だと配置した床が真っ暗で、どこにあるのか視認しづらくなっています。
この後の手順で行う光源の配置を行うことで解消はされますが、今回の様に光源の配置前であったり、配置後でも光が届かない箇所の配置を確認したい際には、ビューモードを「非ライティング」に変更すると便利です。

なお、ライティング無しモードは、ベースカラーのみを表示して、シーンから全てのライティングを取り除くモードです。

■2. 光源と空の配置

先ほど見た通り、現状真っ暗なマップに光源を配置しましょう。
光源にはいくつか種類がありますが、マップ全体を照らすために使われる光源として「ディレクショナルライト」があります。
配置モードから「ライト」→「ディレクショナルライト」を選択して、ビューポートにドラッグしましょう。

位置は特に意味をもちませんが、「0, 0, 1000」としました。

これが光源に当たるアクタとなります。
デフォルトでディレクショナルライトの向き(白矢印))はX軸方向を向いているため床が暗いのは想定通りなのですが、
空が明るく照らされていないのは不思議に思えるはずです。
(ビューモードをライティング有りにしても暗いままです。)

空が明るさを得るためには、光源に応じて背景を描画をするための天球や大気フォグが必要となります。
天球にあたるアクタとして、配置モードの「全てのクラス」→「BP_Sky_Sphere」をビューポートに配置しましょう。
これも位置は特に意味を持ちませんが、「0, 100, 1000」としました。

このように、光源だけでなく天球などのアクタを置くことで初めて空(背景)が明るく表示されます。
このあとはビューモードを「ライティングあり」にして進めていきます。

■3. ディレクショナルライトと「BP_Sky_Sphere」の説明

このセクションでは、ディレクショナルライトと「BP_Sky_Sphere」の関係、およびそれぞれの簡単な説明をします。

まずディレクショナルライトですが、光源の基準位置は太陽のような非常に遠方にある地点となっています。
例えば現在のように光源の向き(画像の白矢印)はX軸方向を向いている場合だと、X軸のマイナス方向の無限遠に光源があり、
そこからX軸方向に光が照らされている状態となります。
結果、日没時にみられる夕焼けのような空の色となっています。

絵で表現すると以下のような状態です。

では、これを朝や昼間のように明るくするにはどうしたらよいでしょう。
答えは簡単で、光源の向きをY軸(画面手前から奥の方向)周りに回転させれば良いです。
イメージとしては以下の様に、Y軸周りに-60度くらい回転させます。

では実際に操作してみましょう。
DirectionalLightを選択したら、詳細パネルの回転でY軸の値を「-60」に変更しましょう。

すると真っ黒だった床の色が明るく照らされるようになっているのがわかります。
しかし、空の色の方は初めと変わっておらず、夕焼けのままです。

これは、「BP_Sky_Sphere」にディレクショナルライトの情報が紐づいていないためです。
以下のように「BP_Sky_Sphere」を選択して、詳細パネルで「デフォルト」→「Directional Light Actor」の値を「DirectionalLight」に設定しましょう。

これにより、以下の様に空の色が青く表示されると思います。
(万が一されない場合は、「BP_Sky_Sphere」の「デフォルト」→「Refresh Material」をクリックしてください。)

このことからわかる通り、実は初めに夕焼けが表示されていたのは配置したディレクショナルライトの影響ではなく、
「BP_Sky_Sphere」がデフォルトで夕焼け(光源がX軸のマイナス無限遠にある状態)に設定されていたためです。

床が明るくなった通り、アクタを照らすだけであればディレクショナルライトだけで事足りますが、
空のような背景はライトだけでは描画されないので、「BP_Sky_Sphere」のような光源に応じて背景を描画するアクタを使用することを覚えておきましょう。

■4. 背景を夜に変更してみよう

先ほど見た通り、ディレクショナルライトの角度によって空の様子が変化することがわかりました。
今度はディレクショナルライトの角度を変えて真下から光を当てることで、真夜中を表現してみましょう。
「DirectionalLight」を選択して、詳細パネルで回転のY軸の値を90度に設定しましょう。

「BP_Sky_Sphere」の詳細パネルで「デフォルト」→「Refresh Material」をクリックすると変更が反映されます。

うまくいけば以下の様に真っ暗な空となるはずです。(床は下から見ると明るく照らされています。)

これで夜のような暗さにはなっていますが、せっかくなので星空を描画してみましょう。
「BP_Sky_Sphere」の詳細パネルで「デフォルト」→「Star Brightness」の値を5くらいに設定して、「Refresh Material」クリックで設定を反映しましょう。
以下の画像の様に、夜空に星空が広がっているように描画されると思います。

「Star Brightness」はその名の通り星の明るさを設定するパラメータで、値を大きくするほどより強く星の光が描画されます。
「BP_Sky_Sphere」にはこのように空の描画に関する設定がいくつか用意されているので、他のパラメータも試してみると良いかと思います。

■5. 大気フォグを配置してみよう

ここまでで太陽のような光源と空を描画する天球(BP_Sky_Sphere)は配置できました。
最後に大気フォグを配置することでリアリティのある空に仕上げてみましょう。
フォグの効果がわかりやすくなるように、「DirectionalLight」のY軸回転を「-45度」に設定しています。
(「BP_Sky_Sphere」詳細パネルで「Refresh Material」クリックで設定を反映してください。)

モードパネルの配置モードから「ビジュアルエフェクト」→「大気フォグ」を選択してビューポートにドラッグしましょう。
これも位置は意味を持ちませんが、「100, 0, 1000」の位置に移動させました。

この大気フォグも「BP_Sky_Sphere」と同様、光源との位置関係によって描画される霧の様子が変わってきます。
「AtmosphereFog」の光源方向はデフォルトでは自分自身の向き(ビューポートの青矢印)となっているため、実際の光源である「DirectionalLight」の向きを反映するように設定を変更する必要があります。
両者を関連付けるには「DirectionalLight」の詳細パネルで「Light」→「Atmosphere / Fog Sun Light」のチェックを有効にします。