見出し画像

[Unity Shader Graph]バフ デバフ用の円筒エフェクトを作成する（初心者）

WeatherVane

Unity version 2021.3.14f1

Shader Graph
使用したtexture

参考元

１、Shader Graphをインストール

レンダーパイプラインがURPやHDRPの場合はすでにインストールされているのでこの工程は不要

  1. メニュー >> Window >> Package Managerでウィンドウを開く

  2. PackagesのプルダウンメニューからUnity Registryを選択

  3. Shader Graphをインストール

２、Shader Graphを作成

Projectウィンドウで右クリックからCreate >> Shader Graph >> URP >> Lit Shader Graph を選択してファイルを作成
Shader Graphファイルをダブルクリックするとウィンドウが開く
ウィンドウ上で右クリックからCreate NodeでNode検索ウィンドウが出てノードを作成できる
※Create NodeをクリックしてもNode検索ウィンドウが表示されない場合はShader Graphのウィンドウ上で左クリックしてみる

使用するノード

  • Color：色を出力

  • Add：2つの入力値を足し合わせる（加算）

  • Multiply：2つの入力値を掛け合わせる（乗算）

  • Blend：Baseになる入力値にもう一つの値をBlendするOpacityはBlendの強度

  • Float：値を1つ出力

  • Vector2：2つのfloat値を統合してVector2として出力

  • Boolean：trueとfalseの値を出力する　ここではスクロール方向の切り替えに使用している

  • Branch：入力を切り変えることができるノード

  • Gradient：グラデーションを出力する

  • Sample Gradient：グラデーションを使うために必要なノード

  • Split：必要な値を取り出すノード

  • UV：UV座標をVector4で出力（よくわかっていない）

  • Texture 2D Asset：任意のテクスチャを出力

  • Sample Texture 2D：テクスチャを出力するために必要なノード

  • Rotate：UVを回転させるためのノード　ここではテクスチャを回転させるために使用している

  • Tiling And Offset：タイリングするためのノード

  • One Minus：入力値に−１を掛けて出力する

  • Time：時間経過で変化する値を出力

３、ノードを作成

  1. FragmentのBase Colorを黒にする

  2. Colorノードを作成しFragmentのEmissionに繋ぐ
    これがエフェクトの色になる

  3. そのColorノードを右クリックしConvert to >> Propertyでプロパティ化

  4. Gradientノードを作成し任意のグラデーションを作成

  5. Sample Gradientノードを作成しGradientノードを繋ぐ

  6. UVノードを作成　Splitノードを作成

  7. UVノードをSplitノードに繋ぐ

  8. SplitノードのGをSample GradientノードのTimeに繋ぐ
    グラデーションを横向きにしたい場合はRを繋ぐ

  9. Multiplyノードを作成　floatノードを作成 floatの値は0.4（任意で調整）

  10. Sample GradientノードをMultiplyノードのAに繋ぐ

  11. FloatノードをMultiplyノードのBに繋ぐ

Gradient Node

ここまでが色とグラデーションの作成
ここからはテクスチャの出力とスクロールの作成

  1. Texture 2D Assetノードを作成　任意のテクスチャを設定

  2. Sample Texture 2Dノードを作成　Texture 2D AssetノードをSample Texture 2DノードのTextureに繋ぐ

  3. Tiling And Offsetノードを作成　Rotateノードを作成

  4. RotateノードをSample Texture 2DノードのUVに繋ぐ

  5. Tiling And OffsetノードをRotateノードのUVに繋ぐ

  6. Tiling And OffsetノードのTilingを任意で調整

  7. Floatノードを作成　FloatノードをRotateノードのRotationに繋ぐ

  8. Floatノードをプロパティ化
    ここではRotateという名前にしている　名前は任意
    （画像を１８０度回転させたい場合は値を3.14）

  9. Vector2ノードを作成　Vector2ノードをTiling And OffsetノードのOffsetに繋ぐ

  10. Branchノードを作成　BranchノードをVector2のyに繋ぐ（横にスクロールしたい場合はx）

  11. Timeノードを作成　One Minusノード作成　Booleanノードを作成

  12. Booleanノードをプロパティ化
    ここではMoveDownという名前にしている　名前は任意

  13. BooleanノードをBranchのPredicateに繋ぐ

  14. TimeノードをOn Minusノードに繋ぐ

  15. TimeノードをBranchノードのTrueに繋ぐ

  16. On MinusノードをBranchノードのFalseに繋ぐ

  17. Blendノード作成　Sample Texture 2DノードをBlendノードのBlendに繋ぐ

  18. グラデーションで作成したMultiplyをBlendノードのBaseに繋ぐ

  19. Addノードを作成　MultiplyノードをAddノードのAにも繋ぐ

  20. BlendノードをAddノードのBに繋ぐ

  21. AddノードをFragmentノードのAlphaに繋ぐ
    Alphaがない場合はGraph InspectorのGraph SettingsタブのSurface TypeをTransparentにする
    Graph Inspectorが表示されていない場合はウィンドウの右上のGraph Inspectorをクリック

  22. メッシュの裏面を表示したい場合はGraph InspectorタブのRender FaceをBothにする

  23. テクスチャのシーム部分に切れ目が出て気になる場合は
    FragmentのSmoothnessとAmbient Occlusionの値を０にする

４、Materialを作成

  1. Projectウィンドウで右クリックからCreate >> Materialで作成

  2. MaterialファイルにShader Graphファイルをドラッグ＆ドロップする

  3. Materialファイルを選択しInspectorウィンドウでプロパティ化したノードのColor（色）とMoveDown（スクロール方向）とRotate（画像の回転）の値を入力してバフ用またはデバフ用に調整する

５、３DモデルにMaterialを設定

  1. 円筒形の3Dモデルを3Dツールで作成しテクスチャ展開してエクスポート
    ここではBlenderで作成しfbxでエクスポートしている

  2. Unityにモデルをインポート

  3. インポートしたファイルを選択してInspectorウィンドウのMaterialsタブで作成したMaterialファイルを設定

勉強中ですので説明が間違っている可能性があります自分でも調べて確認してみてください

この記事が気に入ったらサポートをしてみませんか？