この記事では、ノードをつないでシェーダーを作成する「VisualShader」の基本的な使い方について紹介します。
目次
シェーダー確認用のプロジェクトの作成
まずはプロジェクトを作成し、2Dシーン(Node2D
)を追加して、”icon.png” をSprite
として登録します。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-312-1024x644.png)
VisualShaderエディタの起動
作成した iconノードのインスペクタから CanvasItem > Material > Material > [空]
をクリックして、「新規 MaterialShader」を選びます。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-313.png)
作成した MaterialShaderをクリックして、Shader > [空]
をクリックして、「新規 VisualShader」を選びます。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-314.png)
作成した VisualShaderをクリックすると、「VisualShaderエディタ」が表示されます。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-315-1024x288.png)
VisualShaderエディタの設定
VisualShaderエディタを起動した直後は、Shader > Mode
が「Spatial」(3D空間で有効)になっているので「CanvasItem」(2Dで有効)に変更しておきます。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-316.png)
点滅するアニメーションを作る
まずは画像が点滅するアニメーションを作ってみます。
エディタ上の何もないところで右クリックするか、左上の「ノードを追加」をクリックします。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-317-1024x394.png)
シェーダーノードの作成ダイアログが表示されるので、以下の操作を行います。
- 検索ボックスに「time」と入力します
- 「Time」ノードをダブルクリックで選択します
![](https://2dgames.jp/wp-content/uploads/2021/11/image-318.png)
すると、Input > Time
ノードが追加されます。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-319.png)
簡単にこれらのノードについて説明すると、「Input」は入力パラメータです。そして「Time」ノードは時間経過によって増加するパラメータなので、テスト用の値として動作を確認するパラメータとして最適です。
そして「Output」が最終的な出力値です。例えばOutput > Color
に赤色を設定すると最終的な画像は「赤色」になります。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-320-1024x835.png)
点滅アニメーションの続きに戻ると、Input > Time
ノードの右側にある「青い丸」を右側にドラッグして離します。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-321.png)
すると、シェーダーノード作成ダイアログが表示されるので、検索ボックスに「sin」と入力して、Scalar > Functions > Sin
を選択します。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-322.png)
すると、ScalarFunc > Sin
ノードが作成されます。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-323.png)
ここで、Sinのとなりにある「閉じている目アイコン」をクリックします。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-324.png)
すると以下のように点滅状態が確認できます。これは Input > time
が時間経過で値が増加して、それをSinカーブで変化させることで、「-1.0〜1.0」の値となっているためです。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-57.gif)
このように、VisualShaderを使うメリットは、計算途中の状態が見た目でわかることです。
Sinの動きが確認できたところで、Sinノードを Output > Alpha
に接続します。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-325.png)
すると画像が点滅するようになったのですが、単色になってしまっています。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-58.gif)
これは色情報が設定されていないためです。
ノードエディタの何もないところで右クリックしてシェーダーノード作成ダイアログを表示します。
そして、”texture”で検索して、Textures > Functions > Texture
を選択します。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-327.png)
Texture
のドロップダウンから「Texture2D」を選びます。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-328.png)
最後に、Texture > rgb
から Output > Color
に接続します。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-329-1024x463.png)
これで点滅処理は実装できたのですが、色相が変わっていますね……。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-59.gif)
これは Alpha の値がマイナスになっているためです(sin()
の戻り値は -1.0〜1.0)
Alphaを 0.0〜1.0になるように修正します。Scalar > Functions > Abs
ノードを追加します。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-330.png)
Sin
ノードから Abs
ノードに接続し、 Abs
ノードからOutput > Color
に接続するようにします。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-331-1024x285.png)
すると、正しく点滅処理を行うようになります。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-60.gif)