コガネブログ

平日更新を目標に Unity や C#、Visual Studio、ReSharper などのゲーム開発アレコレを書いていきます

【Unity】「Shader Weaver」チュートリアル5 - 炎のゆらめきを作る

はじめに

この記事では、「Shader Weaver」で炎のゆらめきを表現するシェーダを作る方法を紹介していきます

チュートリアルのまとめはこちら

前回のチュートリアル

このチュートリアルで作るモノ

f:id:baba_s:20170928175949g:plain

動画

この記事は上記の動画の一部翻訳となります

ノードの準備

f:id:baba_s:20170928164851p:plain

Project ビューで「ShaderWeaver/Textures」フォルダを開いて
「flame」テクスチャを ROOT ノードに設定します

f:id:baba_s:20170928165032p:plain

UV ノードを追加します

f:id:baba_s:20170928165300p:plain

Project ビューで「ShaderWeaver/Textures」フォルダを開いて
「wave」テクスチャを uv1 ノードに設定します

f:id:baba_s:20170928165346p:plain

uv1 ノードと ROOT ノードを連結します

以上でノードの準備が完了です

UV ノードの編集

f:id:baba_s:20170928165447p:plain

uv1 ノードの「Edit」ボタンを押します

f:id:baba_s:20170928170203p:plain

「Move」を選択します

f:id:baba_s:20170928173038p:plain

Y の入力欄に「0.25」と入力します

f:id:baba_s:20170928173119p:plain

「UV」を選択します

f:id:baba_s:20170928173245p:plain

「R」「G」「B」のポッチをドラッグして

f:id:baba_s:20170928173315p:plain

このように矢印を設定します

以上で UV ノードの編集が完了です

シェーダの保存

f:id:baba_s:20170928173428p:plain

「ShaderWeaver」ウィンドウの「Save」を選択してシェーダを保存します
ファイル名は「tutorial5.shader」にします

f:id:baba_s:20170928173607p:plain

Project ビューにこれらのファイルが追加されていればシェーダの作成が完了です

f:id:baba_s:20170928173729g:plain

「ShaderWeaver」ウィンドウのプレビューで炎がゆらめいていることが確認できます

表示の調整

f:id:baba_s:20170928174609p:plain

プレビューで表示されている炎のゆらめきを見ると、
炎の下部が透明になってしまっていることがわかります

f:id:baba_s:20170928174913p:plain

Project ビューで「ShaderWeaver/Textures」フォルダを開いて
「flame」テクスチャを選択して、Inspector で
「Wrap Mode」を「Clamp」に変更して「Apply」ボタンを押すことで直ります

f:id:baba_s:20170928175019p:plain

それでもまだ直らない場合は、
uv1 ノードの編集ウィンドウ右下の「+」ボタンを押して

f:id:baba_s:20170928175211p:plain

「Blend Op」を「Lerp」に変更すると直ります

f:id:baba_s:20170928175603g:plain

これで炎のゆらめきが綺麗に表示されるようになります

作成したシェーダの使用

f:id:baba_s:20170928163033p:plain

Unity メニューの「GameObject>3D Object>Quad」を選択します

f:id:baba_s:20170928175809p:plain

Hierarchy で作成した「Quad」オブジェクトを選択して
Inspector のマテリアルの設定欄に
Project ビューの「tutorial5」マテリアルをドラッグして設定します

f:id:baba_s:20170928163552p:plain

「Quad」オブジェクトの大きさを適当に設定します ( x: 5、y: 5 など )

f:id:baba_s:20170928175949g:plain

Unity を実行すると、作成したシェーダが正常に動作することが確認できます

以上が炎のゆらめきを表現するシェーダの作成方法になります

次のチュートリアル