パーティクルとマテリアル

マテリアルと聞くと「なんらかのポリゴンに貼り付けるもの」という印象があると思う(私がそうだった)

実は今回のSprite Rendererの場合は「マテリアルそのものを飛ばすことができる」という感覚でよい。

つまり一切のメッシュを読み込む必要がなくマテリアルだけ読み込んでやればそれが飛んでいく

マテリアル作ってを飛ばしてみよう

まずはマテリアルを作って飛ばしてみる。

できるだけシンプルなステップで解説する。

星テクスチャのマテリアルを作る

白と黒だけで星のテクスチャを作成。

※画像はこれをDLしても良いし、好きな白黒画像でもよい。

コンテンツブラウザに画像をドラッグ・アンド・ドロップで追加。

同じくコンテンツブラウザを右クリックでマテリアルを追加して開く。

※例ではマテリアル名をMA_Starとした

次に、マテリアルをダブルクリックで開いてコンテンツブラウザの星画像を罫線の枠内へドラッグ・アンド・ドロップ。

※マテリアル編集画面でもctrl+スペースでコンテンツブラウザを開くことができる(UE5)

するとTexture Sampleノードとしてマテリアルにテクスチャが読み込まれるので

RGBとベースカラーをドラッグして結ぶ。

右上の適用を押して確定しよう。

コレで完成。

Fountainのナイアガラを作成

ナイアガラシステムをFountainのテンプレートで作成しておく。

※作り方はナイアガラ基礎#1で概ね説明している。

今回はパーティクルがわかりやすいように非常に大きいサイズへ変更した。

Initialize Particle > Sprite Attributes > Sprite Size Mode = Uniform > Uniform Sprite Size = 100

Sprite Rendererにマテリアルを設定

Sprite RendererのMaterialに先程作ったマテリアルを適用

Spawn Rateが多すぎたので5に調整

星が飛ぶ？

さて、これで設定した星が飛び出していると思う。

メッシュを設定せずマテリアルだけ設定しただけで正しく星になっている。

デフォルトで板状のマテリアルが飛んでおり、視点を変更しても面も視点に向くように追従する。

星が欠けている？

既に気づいていると思うが、重なっている星が欠けている。

これはテクスチャの黒い部分が透過されていないためだ。

今回の記事ではこれを修正していく。

なんか色が薄い

加えて白を設定したのに色が薄い。

これはライティングが薄い影響かと思う。

せっかく星なので少し光らせる調整も合わせて行う。

マテリアルの透過

マテリアルの編集画面に戻って右側の茶色いノードの帯の部分をクリックする

※日本語ではマテリアルの結果ノードと書いてあるが、英語版ではこのノードをMain Materialノードというらしい。

すると左下にこのノードのプロパティが出ているのでBlend ModeをTranslucentに変更する。

するとMain Materialノードに書いてある文字列が一部ブラックアウトしてノードが繋げなくなっている。

逆にオパシティという部分が入力を受け付けるようになった。

Translucentマテリアルに透過処理を行うブレンドモードの一つだ。

ノードのつなぎ直し

Texture SampleのRGBをエミッシブカラーとオパシティに接続する。

オパシティ

ここに入力されているテクスチャの黒い部分を透過にする。

白い部分は不透明になるが、その中間のグレーは半透明になる。

これが透過する機能。

エミッシブカラー

ベースカラーと違いここに入力したものは「発光」するようになる。

通常Unreal Engineの色情報は各RGB共に1を最大値にするが、エミッシブカラーの場合1を超えた数値が入力できる。

この1を超えた分が発光量となるので強く光らせたい場合は大きな値を入れる。

※大きくても100ぐらいまでと考えて良いかと思う。10000のような大きな値も受け付けるが発光しすぎてシェイプが潰れてしまう。

ここで重要なのは今はテクスチャをそのまま繋いでるので白い部分の入力が1となっている。

つまり殆ど発光していない状態ではあるが

値が1でも一応エミッシブカラーにつないであるので、上の映像のように真っ暗でもはっきりと見える状態になるのがポイント。

ひとまず完成

重なっている星に黒い部分が出なくなったのが分かると思う。

ここからは改良を加えていく。

おまけ：エミッシブカラーにはUnlit

上の設定に加えて発光するタイプのマテリアルはShading ModelをUnlitにする場合が多い。

これは他の光をマテリアルに反射しない設定。

そもそもこのマテリアル自体が発光しているので他の光を反射しても影響は殆ど無くなるため。

Default LitよりUnlitのほうが処理が軽いというメリットがある。

色をつけよう

この状態で色を付けたい。

しかしInitialize ParticleのColorを設定しても色が変わらない

ナイアガラの場合注意しないといけないのがマテリアルに色の情報を送ってやらなければならないということ。

手順を順番に説明する。

ナイアガラ側の設定はそのまま

実はマテリアルに色情報を送る場合ナイアガラのエミッタ側の操作は必要ない。

マテリアル側にParticle Color

マテリアル側にParticle Colorというノードを追加しエミッシブカラーにつなぎ直す。

これはナイアガラで設定された色情報を受け取るノード。

他には何も設定しなくてもこれだけで色情報がマテリアルに渡ってくるため即座に色が変化する。

発光＋青にしてみる

ナイアガラ側へ戻りInitialize ParticleのColorを調整する。

青く光らせたいのでB=100という大きな数字に設定する。

おまけ

Initialize Particleにてカラーをランダムに(色味が強く出るように)

パラメータからSpriteRotationに回転を加えて(シンプルな例なので時計回りのみ)

Add Velocity in Coneの角度なんかも微調整。

ちょっとかわいくなった。

以上

ナイアガラ側からParticle Colorでマテリアルにデータを渡したが他にもいくつかある。

マテリアルノードだけでも無限の可能性があるので、そこにナイアガラが加わると宇宙だ。

この先色々な作例を作っていきたい。