rn.log

備忘録など

【シェーダーグラフメモその26】六角形シールド表現

ShaderGraph Unity

以下のような、六角形が点滅するバリアのような表現を作る方法を解説します。

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

準備 : 六角形カスタムノードを使えるようにする

以下のカスタムノードをUnityプロジェクトへ追加し、Hexagonカスタムノードが使える状態にします。
六角形タイルを作るShaderGraphカスタムノード · GitHub

Hexagonノードは六角形タイルを出力してくれます。
f:id:r-ngtm:20181216164024p:plain

作り方解説

STEP1: 半透明な六角形タイルのボールをつくる

まずは以下のようなノードを組みます。
f:id:r-ngtm:20181217002602p:plain

UnlitノードはTranparentに設定し、半透明で描画されるようにします。
f:id:r-ngtm:20181217002936p:plain

このシェーダーグラフをUnity標準のSphereにくっつけると以下のようになります。
f:id:r-ngtm:20181217003056p:plain
(※半透明になっていることが分かるように、Sphereの内側に立方体を置いています)

STEP2: 点滅させる

ノイズから時間を引き、Fractionをかけて0~1の間を繰り返すようにします。
f:id:r-ngtm:20181217004440p:plain
f:id:r-ngtm:20181217004535g:plain:w340

STEP3: 点滅をバラつかせる

点滅が偏っているので、MultiplyとFractionを組み合わせてノイズをバラつかせ、点滅をバラつかせます。
f:id:r-ngtm:20181217005320p:plain
f:id:r-ngtm:20181217005519g:plain:w340

STEP4: 点滅の色変化を大きくする

Powerノードを使い、点滅の色変化を大きくします。
f:id:r-ngtm:20181217010230p:plain
f:id:r-ngtm:20181217010259g:plain

STEP5: 六角形のすきまをつける

f:id:r-ngtm:20181217010903p:plain
f:id:r-ngtm:20181217010917g:plain

STEP6: 六角形を横につぶす(完成)

六角形が横に長いので、X座標を1.7倍して六角形を横に1/1.7倍につぶして完成です。
f:id:r-ngtm:20181217011503p:plain
f:id:r-ngtm:20181217011514g:plain

ノード全体

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