![見出し画像](https://assets.st-note.com/production/uploads/images/152385612/rectangle_large_type_2_6a26c50b2d6f35432a4cb91d1ee183d7.jpeg?width=1200)
NOVAShaderで炎の槍エフェクト作ってみた【unity】
ご無沙汰しております。Niwaです。
という挨拶が癖になっていますが、毎回ご無沙汰するしこんにちはとかで良いのでは、と今思いました。
こんにちは。Niwaです。
前回の記事も沢山の方に読んでいただけて大変嬉しい限りです。
フォローも良いねも本当にありがとうございます!!
入社前にunityの復習もかねて何かしらエフェクトを作ろうと思い「炎の槍」エフェクトを作ったのでどんな要素で作ったのかを紹介していきたいと思います。
僕自身まだNOVAShaderを完璧に理解できたという実感が無いので、記憶の定着がてらまとめていこかな、というテンション感です。
早速ですが今回作成したエフェクトはこちらです。
![](https://assets.st-note.com/production/uploads/images/152303298/picture_pc_1a7e66c03f2313d1313445d9e2d55c60.gif?width=1200)
※GIFなので光の発光感が物足りないのはご容赦ください。
炎部分は本当はembergenでやりたいなぁと思いつつ手持ちのテクスチャで作成しましたすみません(自戒)
まず、基本的なパーティクルシステムの使い方等について分からない方は以下のリンクを参考にしてください。
●エフェクト完全解説
●NOVAShaderの使い方
●NOVAShaderのプロパティ説明
ちなみに今回の制作で使用するエフェクト用メッシュもネクストん3Dさんが販売しているものになります。超便利!!
槍の先端部分
![](https://assets.st-note.com/production/uploads/images/152387152/picture_pc_ac2bd2c477adf1b9d1c87564d7de9be5.gif?width=1200)
「Renderer」をmeshに変更し、三角錐のメッシュを設定。
BasemapをAlphatransitionで削っています。
〇メッシュの設定
![](https://assets.st-note.com/img/1724928970756-V0bWXFcXNL.png)
![](https://assets.st-note.com/img/1724928985739-vAupJPsPox.png)
〇Basemap
![](https://assets.st-note.com/img/1724928867057-pATKfOtN8W.png)
※テクスチャ画像は基本的にFilterForgeで作成しています。
〇AlphaTransition
![](https://assets.st-note.com/img/1724929141972-d2ThohuIM2.png)
2nd TextureのTransition ProgressをCustom Dataに持っていき、エフェクトの消滅にかけてより削れるように設定しています。
メイン部分の裏に黒を重ねる
上記のエフェクトに少しずらして黒を重ねる事で火の焦げ感?を表現しています。
![](https://assets.st-note.com/production/uploads/images/152387871/picture_pc_fa3e57ae2f0e17b54a8f1214e3fdc75b.gif?width=1200)
〇色の変更
![](https://assets.st-note.com/img/1724929509193-b7kWkmAGEE.png)
〇Render Settingの変更
![](https://assets.st-note.com/img/1724934991170-TkpiH3BDN4.png)
※他は多分Additive(加算)です
〇黒ありと黒なしの比較
![](https://assets.st-note.com/production/uploads/images/152387946/picture_pc_3ea1f754dfcabb0750d28ea493c4682b.gif?width=1200)
![](https://assets.st-note.com/production/uploads/images/152387152/picture_pc_ac2bd2c477adf1b9d1c87564d7de9be5.gif?width=1200)
↑黒を重ねて無いもの
GIF画像なのと背景が暗いので分かりにくいかも知れませんが、少しだけ炎の焦げ感が感じられるのではないかと思います。
衝撃のリング部分
円のBasemapを良い感じのテクスチャで削っています。
![](https://assets.st-note.com/production/uploads/images/152388012/picture_pc_7cec73b3c7aa2397ae67e00c701e0b13.gif?width=1200)
〇Basemap
![](https://assets.st-note.com/img/1724935649028-euYknavifq.png)
※Adobe illustratorで作成
〇AlphaTransition
![](https://assets.st-note.com/img/1724935727082-GD9cMdu3XI.png)
炎部分
SpeedかLimit Velocity?の方で出る勢いをランダムに、Rotation(回転)もランダムにしています。もっと「ボウッ!!」感を出したかった…テクスチャ感があって萎えますねこれは。
![](https://assets.st-note.com/production/uploads/images/152388051/picture_pc_777bff3a7bc38ea57cecf689d710b40e.gif?width=1200)
〇Basemap
![](https://assets.st-note.com/img/1724936519818-blitjhef5W.png)
〇AlphaTransition
![](https://assets.st-note.com/img/1724936607848-r3u9ak5o41.png)
炎部分(差し色)
シンプルな赤だけだと単調になってしまうので、差し色として紫とピンクっぽい炎も追加しました。(色は本当に難しい…)
![](https://assets.st-note.com/production/uploads/images/152388084/picture_pc_d015326edb9e6c1bdf28e5c53f27bd02.gif?width=1200)
〇色設定
![](https://assets.st-note.com/img/1724936861557-i2WCqUe9yo.png)
火花のようなツブ
遠くまで弾ける大きなツブと、それよりも近くで消える小さなツブを重ね合わせました。大きい方のツブは出現の瞬間が重なってしまっているので、これは良くないですね。
![](https://assets.st-note.com/production/uploads/images/152388114/picture_pc_2ea9c7dcaf97f4c06fa91c0362cbaab9.gif?width=1200)
![](https://assets.st-note.com/production/uploads/images/152388123/picture_pc_e00912f5c5fe49226f0823bf3008ecc2.gif?width=1200)
〇Basemap
![](https://assets.st-note.com/img/1724937577992-7vIxbWxa49.png)
このテクスチャをStretch Billboardでスピードが速い時だけパーティクルが伸びる設定にしています。
舞い上がるツブ
勢い良く火が出た後に舞い上がる火の粉のような表現をしました。
![](https://assets.st-note.com/production/uploads/images/152388139/picture_pc_9dbd03b20c1dabdae851837b7605d695.gif?width=1200)
〇重力をランダムに
![](https://assets.st-note.com/img/1724937903103-sWxnc118mY.png)
〇少しだけねじれるような動きに
![](https://assets.st-note.com/img/1724938021495-oBgN8znd6g.png)
炎の動きもそうですが、少しだけツイスト的な動きを加えたかったのでVelocity over Lifetimeで設定しました。(槍を持った手をねじ込んでるイメージですね)
〇ノイズ(ゆらめき)
![](https://assets.st-note.com/img/1724938256125-AoBh5VarMk.png)
真っすぐ上がっていくのは火の粉らしくないので、noiseプロパティで揺らめきを設定しました。(あなたの火の粉らしさってなんですか)
ツイストする炎
上記までの工程で何か物足りなかったので、ツイストする炎を追加しました。こっちが先か炎をツイストさせるのが先かは覚えていません。
何か最後の最後でツイストさせたくなったんだよね。
![](https://assets.st-note.com/production/uploads/images/152388186/picture_pc_d68ac86f15c1dd4e83a07355f39163de.gif?width=1200)
![](https://assets.st-note.com/production/uploads/images/152388203/picture_pc_14802c29add02a3f3c2faf584cc1786a.gif?width=1200)
〇メッシュ
これもお馴染みネクストんさんのメッシュを使用。
![](https://assets.st-note.com/img/1724938641393-CtlQnN5DeD.png)
〇Basemap
![](https://assets.st-note.com/img/1724938701154-0UcMRL6Mpp.png)
〇AlphaTransition
![](https://assets.st-note.com/img/1724938747823-eGjALdQnSq.png)
FilterForgeで作った「fractal17」っていう名前のテクスチャがあるんですが、僕はこいつをとても気に入っています。
何かとこいつで良いじゃんって場面があってとても可愛がっています。
多分こいつです。
「Transition Progress」をCustom Dataに流し込み、グラフで良い感じに削れるように調整しています。
![](https://assets.st-note.com/img/1724939016591-rVq2qEuJhu.png)
完成
![](https://assets.st-note.com/production/uploads/images/152303298/picture_pc_1a7e66c03f2313d1313445d9e2d55c60.gif?width=1200)
事細かに説明する事も出来たのですが、記事にするとなるととても長くなってしまうのと、とても手間がかかってしまうので今回は「エフェクト制作ってこんな感じだよ~」っていうのをざっくり知ってもらう記事にしました。
一見簡単そうに見えるエフェクトでも、実際はいくつものパーティクルシステムが重なって出来ている事が分かっていただけたのではないかと思います。
今回の制作では復習のつもりだったのでモリモリ妥協しましたが、実務では絶対に妥協する事無くクオリティを上げ続けれるよう邁進します。
9月入社なので次は入社初日の感想なんかも記事にできれば良いかなと!
それでは、最後まで見てくれてありがとうございました!!
これからも頑張りますb
この記事が気に入ったらサポートをしてみませんか?