- はじめに
- 準備
- シェーダーグラフ1 : 横方向に切り替える
- シェーダーグラフ2 : 縦方向の変化にする
- シェーダーグラフ3 : 広がるような変化にする
- シェーダーグラフ4: ランダムに混ざるような変化にする
はじめに
六角形タイルを利用した画像切り替え4種の作り方を解説します。
準備
今回のシェーダーグラフでは、六角形タイルカスタムノードを使用します。
下記URLのカスタムノードをUnityプロジェクトに入れてください。
六角形タイルを作るShaderGraphカスタムノード · GitHub
Hexagonカスタムノードは以下のような値を出力してくれます。
シェーダーグラフ1 : 横方向に切り替える
テクスチャを横方向に切り替えるシェーダーグラフの作り方を解説します。
ノード全体
STEP1 : Hexagonノードから六角形タイルを作る
STEP2 : 右方向に向かって小さくする
StepのEdgeに定数を指定していましたが、代わりに六角形のx座標を利用して、
右側に行くほど
STEP3 : 六角形を動かす
六角形のx座標から数値を減算して、六角形を動かせるようにします。
Sliderをプロパティ化
マテリアルのインスペクタ上から値を変化させられるように、Sliderはプロパティ化しておきます。
STEP4 : 六角形の大きさの変化を左右反転させる
x座標にOneMinusノードを適用すると、x座標の左右が逆転し、六角形の大きさの変化も逆転します。
STEP5 : 六角形タイルを利用してテクスチャを混ぜる
六角形タイルとSampleTexture2DをLerpノードに入力し、テクスチャを混ぜて完成です。
結果
最終的に以下のような絵が出力されます。
シェーダーグラフ2 : 縦方向の変化にする
シェーダーグラフ1では、X座標を六角形のStep値として使用していたため、横方向に六角形の大きさが変化していました。
X座標の代わりにY座標を使用した場合、縦方向の変化になります。
シェーダーグラフ3 : 広がるような変化にする
y座標の代わりに中央からの距離を利用すると、広がるような変化を作ることができます。
六角形を大きくする
HexagonノードのScaleの値を小さくすると、六角形が大きくなります。
シェーダーグラフ4: ランダムに混ざるような変化にする
Stepの入力値としてSimpleNoiseを利用するとランダムに混ざるような変化になります。