2022/3/14エンジニア

    【UE4】ディストーションを使って簡単に雷エフェクトを作る

    執筆: Y.I

    はじめに

    はじめまして。

    株式会社ORENDAで、ゲームのエフェクト制作を行っているY.Iと申します。
    今回は複雑なエフェクトを作るために使えるディストーションのマテリアルを使い、簡単に雷のエフェクトを作っていこうと思います。

    準備

    UE4.23.1を使用していきます。

    UNREAL ENGINE


    テクスチャを用意する   

    オーラテクスチャ1枚 

    メインのテクスチャ1枚

    今回はオーラテクスチャはPhotoshopの雲模様で作成してあります。

    メインのテクスチャはディストーションを掛ける元のテクスチャとなりますので
    それぞれ用途に合ったものを使用してください。
    今回はこれで雷のエフェクトを作っていこうと思います。

    マテリアルの作成

    UEを起動し、マテリアルを作成します。

    上記のようにノードを組み合わせて行きます。

    まずは歪みの処理からやっていきましょう。

    ここで使用するノードはPanner,Texture Sample,Constant, Multiply,Texture Coordinate, Addになります。

    まずはTexture Sampleを呼び出します。
    このノードを選択するとテクスチャをマテリアル内に読み込めるようになります。
    まずはこのノードにディストーション用のテクスチャを貼り付けます。

    次にConstantとMultiplyを呼び出し、Texture SampleのRをMultiplyのAにConstantをBに接続します。

    Constantノードでは数値を入れることが出来ますがここでディストーションの強さを変えることが出来ます。
    ここでは0.5に設定しておきます。

    次にTexture CoordinateとAddを追加します。

    MultiplyをAddのAにTexture CoordinateをBに接続します。

    Texture Coordinateはテクスチャのタイリングを変更するのに使用します。

    ここではU,V両方とも0.5に設定します。

    最後にPannerを追加しTexture SampleのUVsに接続します。

    PannerでテクスチャのUVスクロールスピードを変更することが出来ます。

    ここではXを1Yを-3に設定します。

    ひとまずこれで歪みの処理は完了ですが、より複雑さを出すためにDistのノードを複製します。

    複製したノードのConstantの数値を0.8にTexture CoordinateをU,V両方とも1に設定します。

    ここでTexture Sampleに設定してあるディストーション用のテクスチャを変更することでまた違った形状にすることが出来ますが、今回はこのままで行きます。

    複製したPannerはXを-1Yを-1に設定します。

    複製した2つの歪み処理のノードをMultiplyに接続し一つにまとめます。

    新たにTexture Sampleを作成し、ここにメインのテクスチャを設定し
    先ほどまとめた歪み処理のノードをUVsに接続します。

    ここまでで歪みのマテリアルとしては完成ですが、今回は雷のエフェクトを作るためにカスケードで色を変更できるようにします。

    使用するノードはParticle ColorとMultiplyになります。

    Particle ColorのRGBをエミッシブカラーにAlphaをMultiplyのAに接続します。

    メインのテクスチャを設定してあるTexture SampleのRGBをMultiplyのBに接続します。

    最後にMultiplyをオパシティに接続します。

    これでマテリアルの処理は完了です。

    カスケードでエフェクトを作る

    まずはパーティクルを作成します。

    コンテンツブラウザを開き右クリックからパーティクルを選択します。

    作成したパーティクルを開きInitial VelocityとColor Over Lifeを削除します。

    次にパーティクルにマテリアルを適用します。

    パーティクルにInitial Colorを追加し自由に色を設定してみましょう。

    カラーに高い数値を設定することで発光するような表現が作れます。

    ディストーションを掛ける前のテクスチャと比較してみます。

    複雑な動きがついてることがわかりました。

    まとめ

    今回は雷のエフェクトを作成しましたが、ディストーションはオーラのエフェクトや水のエフェクト、空間の歪みなど様々な場面で役に立つものになります。

    テクスチャを変えるだけでも、また違ったものになるので、ぜひ試してみてください。

    参考リンク