【Unity】「Shader Weaver」チュートリアル３ - 画像に動きをつける

はじめに

この記事では、「Shader Weaver」における 画像に動きをつける方法を紹介していきます

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

前回のチュートリアル

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

　

このチュートリアルでは画像の移動や回転などの動きをシェーダで作ります

動画

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

Image ノードの編集

Image ノードの「Edit」ボタンを押すと編集ウィンドウが開きます

このウィンドウでテクスチャの表示位置や大きさ、角度、動きを編集できます

編集が完了したら、「ShaderWeaver」ウィンドウで「Update」ボタンを押すことで
編集内容をシェーダに反映することができます

Image ノードに動きをつける

編集ウィンドウの「Move」「Spine」「Radial」を選ぶことで
Image ノードに動きをつけることができます

例えば、「Move」を選択して画像の中央から矢印を右側に伸ばしてから
「Update」ボタンを押すと、画像に動きをつけることができます

動きは「ShaderWeaver」ウィンドウのプレビューで確認できます

動きを止めたい場合は編集ウィンドウ左上の入力欄に 0 を入力します

画像を回転させたい時は「Spine」を選択して
画像の周囲に表示されている円のポッチを回転させたい方向に伸ばします

そして、「Update」ボタンを押すと、
「ShaderWeaver」ウィンドウのプレビューで画像が回転していることがわかります

画像を放射状に動かしたい時は「Radial」を選択して
画像の周囲に表示されている円のポッチを動かしたい方向に伸ばします

これも同様に「Update」ボタンを押すと、「ShaderWeaver」ウィンドウのプレビューで
画像が放射状に移動していることがわかります

以上が Image ノードを使用して画像に動きをつける方法になります

次のチュートリアル