Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@Niagara_UE4(is)

ゼロから始めるゲームエフェクトという名目で行う何か。

Last updated at Posted at 2020-03-11

##初めに

一緒に作るだけです。

今回はUE4のNiagaraを使用します。
バージョンは4.25.0(preview)

ゼロから始めるって書いてますが、結構ハイペースに進みます。

また、細かい理由(なぜこの動作を行っているかなど）は全然説明していません。
自分で値を変えてみるなどして確認してください。

知り合いが「エフェクトなんもわからん」って言ってたので勢いで書きました。

動画画質悪いですが、twitterを恨んでください。

分からないところはTwitterかなにかで聞いてください。

Unity版は気が向いたら。

##ゲームフェクトについて

ゲーム内で使われるエフェクトのほとんどが、
「パーティクル」
という粒子で構成されています。

この粒子に色を付けたり動かしたり形を変えたりしてエフェクトを作ります。

近年はエフェクトデザイナーの人数が足りていない云々。
エフェクトデザイナーの重要性が上がってきた云々。
フリーランスのエフェクトデザイナーの月収は30を余裕で超える超えない云々。
よく言われること「エフェクトで誤魔化せないか」云々。
エフェクトデザイナーの知らないところで盛り上がって
作らないといけないエフェクトが増えてる云々かんぬん。


今回は簡単に作れる(はずの)このようなエフェクトを作っていきます。 https://twitter.com/Niagara_UE4/status/1236915926181629958?s=20 https://twitter.com/Niagara_UE4/status/1236917352228220932?s=20
それでは作っていきます。

プロジェクトはサードパーソンかなんかで適当に作っておいてください。
image.png

##マテリアルを組んでみる

まずはマテリアルを簡単に組みます。
マテリアルを組むことで、パーティクルの色や形を変えられるようになります。

まずは右クリックからマテリアルを作成、名前は自分がわかるものにしておいてください。
image.png
ダブルクリックして中に入ります。

初めにマテリアルのブレンドモードをTranslusentに変更しておきます。
image.png

右クリックからParticleColorノードを出し、接続します。
image.png
これで、エフェクトツールで色と透明度を変えられるようになります。

このままでは四角くなってしまうので、
RadialFradientExponentialというノードを使って円を作ります。
image.png
入力が
・UVs
・CenterPosiition
・Radius
・Density
・InvertDensity
とありますが、今回はDensityだけ説明します。
ここでのDensityは境界線の明確さです。
試しに100を接続すると、くっきりとした円になります。
image.png
今はお好みの数値を入力しておいてください。

その後マテリアルを適用・保存し、マテリアルインスタンスを作成しておいてください。
image.png
今回はパラメーターを用意していませんが、汎用的なマテリアルを作る場合はパラメーターを多数調整することになるので、マテリアルインスタンスを用意してパラメーターの値を変えられるものを作っておきます。

メンドイ。イラナイ。
って人は今回は作らなくても問題ありません。


これで最低限のマテリアルは完成しました。 エフェクトの作成に入ります。

##エフェクトを作ってみる

###１つ目
それではエフェクトの作成に入ります。

まずは右クリックからナイアガラエミッター(以下NE)を作成。
image.png
無かったらプラグインからNiagaraをONにしてください。

New emitter from a templateから
image.png

Simple sprite burstを選びます。
image.png

わけのわからない画面が出てきましたね。
image.png

ざっくりと説明します。ざっくりと。
image.png
①エフェクト見るとこ
②時間見るとこ
③変数入ってるとこ
④エフェクトの構成を見るとこ
⑤作るとこ
⑥いつもの
です。

⑤の作るとこが大切なのですが、こんなにごちゃごちゃしていると
英語アレルギーの人や数学アレルギーの人が発狂してしまうので、
左上の三角を押してタブを最小化します
image.png
image.png
すっきりしました。
英語は残ります。英語アレルギーの人は諦めてください。

初めにSprite Rendererを開き、先ほど作ったマテリアルを適用します。
image.png

Spawn Burst ナントカを開き、
Spawn Countの値を100にします。
image.png
これでパーティクルが100個できます。

次にInitialize Particleを開き、MassとSpriteSizeをオフにします。
image.png

LifeTimeの右の三角から、Uniform Range floatを入れ、Minimumを1、Maximumを2にします。
その後、Colorに自分好みの値を入力します。
image.png

これでパーティクルごとに1~2のランダムな値がLifeTimeに入ります。

次にParticle Spawnの右側の+から、
Add Velocity from Pointを選びます
image.png

先ほど使ったUniform Rangeを
Velocity StrengthとOrigin Offsetに適応し、画像のような値にします。
image.png

ビューポートで確認すると、目標に近づいてきていることがわかりますね。
image.png
(このようになっていない場合は、⑥いつもの からCompileを押してみてください)

次にParticle Updateの+から
Gravity Forceを追加、何か出てきたらFix issueを押しといてください。
image.png

同じようにDrag追加します。
image.png

Curl Noise Forceも追加し、値を256にします。
image.png
(ここでModuleの順番が変わっていますが、④の構成見るとこで変えられます)

これで①見るとこ を見ると、
上に飛んだパーティクルが減速・ランダムにフラフラとしながら落下という形になりました。

だいぶ出来てきましたね。

次に色を調整します
ScaleColorのScaleModeをRGBA Togetherに変更、右の三角からCurveに変更します。
image.png

グラフが出てきたら、右クリックからグラディエントをオフ・カーブをオンにします。
image.png

全てのポイントを選んで右クリックからAutoにしておきます。
image.png

Alphaからいじるので、RGBの横の目をクリックして隠します。
image.png

終点のハンドルをいじり、徐々に消える形にします。
image.png

RBGは、
0の時にすべて10
0.1の時にキーを打ち、R:1 G:0.25 B:0.1
1の時にR:0.5 GB:0とします。
image.png

次にScale Sprite Size by Speedを追加し、値を次のようにします。
image.png
すると、速度によってパーティクルの大きさが変わるようになります。

しかし現状、すべてのパーティクルが縦に伸びています。
image.png

これを進行方向に伸ばすために、Sprite RendererのAligmentを
UnalignedからVelociy Alignedに変更します。
image.png

これでパーティクルが進行方向を向くようになりました。
image.png

最後にScale Sprite Sizeを追加。
image.png
値を図のようにします。
image.png

パーティクルのサイズが一定になってしまっているので、
Initialize ParticleのSizeの値をランダムにしておきます。
image.png

これで
https://twitter.com/Niagara_UE4/status/1236915926181629958?s=20
のエフェクトはほとんどできたので、レベルに配置してみましょう。

まずは右クリックからNiagara Systemを作成します。
image.png

NewSystem from selected emitterから
image.png
先ほど作ったエミッターを選択します。
image.png

すると先ほど作成したNEの入ったNSが作成されます。
image.png
ではこれをレベルに配置します。

レベル上で見ることができました。
image.png

今動画と違うのは、パーティクルが地面や壁を貫通してしまっているところだと思います。

なのでパーティクルが壁にぶつかるようにします。

今からはNiagara Systemをいじっていきます。

アップデートにCollisionを追加し、値を図のように変更します。
image.png

最後に上の方のSystemだかEmitterだかのStateを図のようにします。
image.png
これで2秒ごとにエフェクトがループします。

これで動画と同じものが出来ました。
眺めてにやにやしてください。

###2つ目
次に2つ目の動画のエフェクトを作成します。

先ほど作成したNSを複製します。
image.png

Dragの値を15に変更。
image.png

Add Velocity from Pointの値を変更。
image.png

Life Timeも変更。
image.png

CurlNoiseの値も変更。
image.png

以上で2つ目のエフェクトは完成です。
image.png

簡単でしたね。

##Niagaraで出来ることを適当に考える。
今回は触りませんでしたが
③変数入ってるとこ
からは、
・パーティクルのサイズ
・速度・寿命・色・位置
・重さ・回転量
などのたくさんの情報が入っていて、それぞれを取得することができます。
またそれぞれを使って演算することもできます。

例えば位置なら、
原点から離れれば離れるほど大きくなる
キャラが近づくと赤く光る
速度なら
速度の大きさが100±15の時だけ回転する
速度のx要素が-の時だけ煙が出る

みたいなことが可能です。
このあたりは自分で試してみてください。
細かく記事書くのは面倒なのでこの辺りは前書いたこの記事
https://qiita.com/Niagara_UE4/items/33157631986dd3bc1b1f
を読んでもらえればなんとなく理解できるかもしれません。

##最後に軽く
ゲーム業界にエフェクトデザイナーが少ないだって？？
お前がエフェクトデザイナーになるんだよ！！！！！！

今回のように一つのエミッターを作ってしまえば、
NiagaraSystem側で微調整するだけで全く違うエフェクトを作ることができます。
ちょっと遊んだ奴
https://twitter.com/Niagara_UE4/status/1237268405549281280?s=20

色々なモジュールを追加して、少し遊んでみてエフェクトに慣れてください。
後は機能別サンプルのNiagaraマップをのぞいたりしてみてください。

お前がエフェクトデザイナーになるんだよ！！！！
お前がエフェクトデザイナーになるんだよ！！！！！！！！！！！！！！

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?