Blog

[UE4]カメラの距離に応じてフェードさせるマテリアルを作ってみた

執筆: 菅野明洋

はじめに

みなさん、こんにちは。菅野です。
最近はモンハンライズをプレイしております。
さて今回は、カメラの前の障害物を透過するマテリアルを紹介したいと思います。
最近のゲームでは、カメラの前からキャラクターの間にある障害物は透過するという処理をよく見かけますよね。

距離に応じてフェードするマテリアルを作ってみる

プロジェクトを用意する

今回はテンプレートのサードパーソンで試してみたいと思いますので図の①を選択し、②の「次へ」をクリックし次の画面に移ります。

プロジェクトテンプレート画面に移った後、図の①の「サードパーソン」を選択し図の②「次へ」を選択します。

プロジェクト設定画面に移ります。
今回は簡単に試すだけなので、設定を変更せずに図の①のプロジェクト作成ボタンをクリックします。

Materialを作る

プロジェクト起動後、コンテンツブラウザにて右クリックし、マテリアルを作成します。
上記の図の①をクリックするとマテリアルが作成されます。
ファイル名は任意で問題ありませんが、ここではM_FadeDistanceという名前のファイルを作成しております。

マテリアルのブレンドモードを変更する

マテリアル作成後にマテリアルをダブルクリックします。
上記の図の様なマテリアルエディタが開かれますので、図の①のMain Materialノードをクリックします。
次に、図の②のBlend Modeを「Translucent」へ変更します。

処理の実装

上記の様に、実装をすることで、カメラの距離に応じて透明度が調整されるマテリアルが完成されます。

簡単に解説しますと、メッシュの座標とカメラの座標から距離を計算し、

StartTransitionからEndTransitionに向かっていく毎に透明度が計算されます。 

実際に使ってみる

先ほど作成したマテリアルを使用してみたいと思います。
まず図の①のアクタを配置(英名:Place Actors)から、キューブを図の様にビューポートへドラッグし設置します。
次に図②のマテリアルを先ほど配置したキューブへドラッグします。

実行してみる

応用編

単純に透明度を変更するだけでも良いのですが、次に紹介するマテリアルは、ドットパターンに合わせて消すというマテリアルです。
先程紹介した、処理を少し改造することで実現ができます。

消すパターンの画像を用意する

ひとまず簡単に上記の画像を用意しました。
今回は、このドットパターンで消えるようにしていきます。

マテリアルの作成

まず、コンテンツブラウザにて右クリックし、マテリアルを作成します。
上記の図の①をクリックするとマテリアルが作成されます。
ファイル名は任意で問題ありませんが、ここではM_FadePatternDistanceと命名しています。

マテリアルのブレンドモードを変更する


マテリアル作成後にマテリアルをダブルクリックします。
上記の図の様なマテリアルエディタが開かれますので、図の①のMain Materialノードをクリックします。
次に、図の②のBlend Modeを「Translucent」へ変更します。

処理の実装

 

上記の様に実装をすることで、カメラの距離に応じて透明度が調整されるマテリアルが完成されます。
基本的な処理は先ほどの距離に応じて透明度を調整するマテリアルと変わらないのですが、ここでは距離に応じて計算した透明度から、テクスチャのパラメータを乗算することでドットパターンを適用しております。

実際に実行してみる


まとめ

今回は、カメラの前にある障害物を良しなにフェードアウトするマテリアルを紹介しました。
よく使う処理なので、マテリアルファンクションにまとめて、必要に応じてマテリアル毎に呼び出すと便利です。

関連記事