rn.log

備忘録など

【シェーダーグラフメモ その44】六角形タイルを利用した画像切り替え4種類

はじめに

六角形タイルを利用した画像切り替え4種の作り方を解説します。

f:id:r-ngtm:20190118225926g:plain

 

準備

今回のシェーダーグラフでは、六角形タイルカスタムノードを使用します。

下記URLのカスタムノードをUnityプロジェクトに入れてください。

六角形タイルを作るShaderGraphカスタムノード · GitHub

 

Hexagonカスタムノードは以下のような値を出力してくれます。

f:id:r-ngtm:20190119184828p:plain

 

シェーダーグラフ1 : 横方向に切り替える

テクスチャを横方向に切り替えるシェーダーグラフの作り方を解説します。

f:id:r-ngtm:20190119091426g:plain

 

ノード全体

f:id:r-ngtm:20190119090929p:plain

 

STEP1 : Hexagonノードから六角形タイルを作る

f:id:r-ngtm:20190119162222p:plain

STEP2 :  右方向に向かって小さくする

StepのEdgeに定数を指定していましたが、代わりに六角形のx座標を利用して、

右側に行くほど

f:id:r-ngtm:20190119163350p:plain

 

STEP3 : 六角形を動かす

六角形のx座標から数値を減算して、六角形を動かせるようにします。

f:id:r-ngtm:20190119163825p:plain

f:id:r-ngtm:20190119164133g:plain

 

Sliderをプロパティ化

マテリアルのインスペクタ上から値を変化させられるように、Sliderはプロパティ化しておきます。

f:id:r-ngtm:20190119175814p:plain

 

f:id:r-ngtm:20190119184241p:plain

STEP4 : 六角形の大きさの変化を左右反転させる

x座標にOneMinusノードを適用すると、x座標の左右が逆転し、六角形の大きさの変化も逆転します。

f:id:r-ngtm:20190119164705p:plain

 

STEP5 : 六角形タイルを利用してテクスチャを混ぜる

六角形タイルとSampleTexture2DをLerpノードに入力し、テクスチャを混ぜて完成です。

f:id:r-ngtm:20190119165312p:plain

 

結果

最終的に以下のような絵が出力されます。

f:id:r-ngtm:20190119180607p:plain 

f:id:r-ngtm:20190119091426g:plain

 

シェーダーグラフ2 : 縦方向の変化にする 

f:id:r-ngtm:20190119182652g:plain

 

シェーダーグラフ1では、X座標を六角形のStep値として使用していたため、横方向に六角形の大きさが変化していました。

X座標の代わりにY座標を使用した場合、縦方向の変化になります。

f:id:r-ngtm:20190119180442p:plain

 

シェーダーグラフ3 : 広がるような変化にする

f:id:r-ngtm:20190119182204g:plain

 

y座標の代わりに中央からの距離を利用すると、広がるような変化を作ることができます。

f:id:r-ngtm:20190119181842p:plain

 

六角形を大きくする

HexagonノードのScaleの値を小さくすると、六角形が大きくなります。

f:id:r-ngtm:20190119185250p:plain

f:id:r-ngtm:20190119185446p:plain

 

シェーダーグラフ4: ランダムに混ざるような変化にする

f:id:r-ngtm:20190119183216g:plain

 

Stepの入力値としてSimpleNoiseを利用するとランダムに混ざるような変化になります。

f:id:r-ngtm:20190119183526p:plain