コガネブログ

平日更新を目標に Unity や C#、Visual Studio、ReSharper などのゲーム開発アレコレを書いていきます

【Unity】「Shader Weaver」チュートリアル4 - 文字を光らせる

はじめに

この記事では、「Shader Weaver」で文字を光らせるシェーダを作る方法を紹介していきます

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

前回のチュートリアル

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

f:id:baba_s:20170928163756g:plain

動画

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

ノードの準備

f:id:baba_s:20170928160352p:plain

Project ビューで「ShaderWeaver/Tutorials/Tutorial3 - Mask Node」フォルダを開いて
「title」テクスチャを ROOT ノードに設定します

f:id:baba_s:20170928160441p:plain

Image ノードを追加します

f:id:baba_s:20170928160846p:plain

Project ビューで「ShaderWeaver/Textures」フォルダを開いて
「ramp」テクスチャを image1 ノードに設定します

f:id:baba_s:20170928160942p:plain

Mask ノードを追加します

f:id:baba_s:20170928161044p:plain

それぞれのノードを連結します

以上でノードの準備が完了です

マスクの作成

f:id:baba_s:20170928161133p:plain

mask2 ノードの「Edit」ボタンを押します

f:id:baba_s:20170928161337p:plain

「Dropper」を選択します

f:id:baba_s:20170928161431p:plain

文字の黒色の部分をクリックします

f:id:baba_s:20170928161450p:plain

このように文字全体が緑色になったらマスクの作成が完了です

光演出の作成

f:id:baba_s:20170928161625p:plain

image1 ノードの「Edit」ボタンを押します

f:id:baba_s:20170928161744p:plain

「Rotation」の入力欄に「-1」と入力します

f:id:baba_s:20170928161852p:plain

「Move」を選択します

f:id:baba_s:20170928161955p:plain

「X」の入力欄に「0.3」と入力します

f:id:baba_s:20170928162151p:plain

以上に右方向に光る演出の作成が完了です

シェーダの保存

「ShaderWeaver」ウィンドウの「Save」を選択してシェーダを保存します
ファイル名は「tutorial4.shader」にします

f:id:baba_s:20170928162413p:plain

Project ビューにこれらのファイルが追加されていればシェーダの作成が完了です

f:id:baba_s:20170928162613g:plain

「ShaderWeaver」ウィンドウのプレビューで文字が光っていることが確認できます

作成したシェーダの使用

f:id:baba_s:20170928163033p:plain

Unity メニューの「GameObject>3D Object>Quad」を選択します

f:id:baba_s:20170928163309p:plain

Hierarchy で作成した「Quad」オブジェクトを選択して
Inspector のマテリアルの設定欄に
Project ビューの「tutorial4」マテリアルをドラッグして設定します

f:id:baba_s:20170928163552p:plain

「Quad」オブジェクトの大きさを適当に設定します ( x: 10、y: 2.5 など )

f:id:baba_s:20170928163756g:plain

Unity を実行すると、作成したシェーダが正常に動作することが確認できます

以上が文字を光らせるシェーダの作成方法になります

次のチュートリアル