【unity】ドット絵を発光させよ!Shader Grapでエミッションを導入する手引き

unity2021.1.9f1

ピカピカ光るドット絵が好きだ。

なぜって、かっこいいから。

「光る」は全男子の憧れなのだよ。(異論は認める)

そして、unityにはその機能が備わっている。
ドット絵を簡単にピカピカ光らせる機能が備わっている。

その名は「 Shader シェーダーGraph   グラフ

ノーコーディングでシェーダーをカスタマイズできるURPの目玉機能の一つである。

あなたもドット絵を光らせたいだろうか?

答えがYESなら、このまま読み進めてほしい。

もう、いやって言うほど輝かせてしんぜよう。

前提条件

ドット絵を光らせるには以下の事前準備が必要だ。
2つある。

1⃣自身のプロジェクトにURPのインストールと2Dレンダラーの適用が済んでいる。

2⃣シーンのヒエラルキーに「Global Volume」があり、「Bloom」がオンになっている。

1⃣が済んでない場合はこのエントリーを読んでほしい。
このエントリーで、あなたのプロジェクトにURPと2Dレンダラーを導入する方法がわかる。

URP × 2Dレンダラーを導入するエントリーへGO!

2⃣が済んでない場合はこのエントリーを読んでほしい。
このエントリーでURP × 2Dレンダラー環境にポストプロセスを導入する方法を学べる。

ポストプロセスを導入するエントリーへGO!

どちらも済んでいるなら、このまま読み進めてほしい。


エミッションマップ

さて、ドット絵を光らせるには、光らせたい場所と光らせたくない場所を区切り、unityに知らせてやる必要がある。

では、どうやって知らせればいいのか。

その答えが「エミッションマップ」である。

「エミッションマップ」とは、光らせたい部分を白、光らせたくない部分を黒に設定した画像データのこと。

これを画像ソフト(PhotoShopやAseprite、Affinity Photo)を使って用意してやる。

今回は例として、黒猫の「目」と「剣」を光らせていく

🚩エミッションマップを用意する。

※メイン画像とエミッション画像は「同一サイズ」かつ「同一位置」でなければならない。これはunityの仕様である。注意しよう。

←左がメインテクスチャ。右→がエミッションマップだ。剣と目を発光させるので、白く塗ってある。

補助的テクスチャーの設定

unityでは、キャラクターなどの本体の画像を「メインテクスチャ」と呼び、本体画像を補助する画像を「補助的テクスチャ」と呼ぶ。
※上の画像も参照すべし。

エミッションマップも補助的テクスチャの一種である。

そして、メインテクスチャに補助テクスチャを紐づけることで、多彩な視覚表現を実装していくのである。

メインテクスチャへの補助テクスチャの紐づけは「スプライトエディタ」から行うことができる。

🚩1⃣プロジェクトで、キャラクターのメインテクスチャ画像を選択する。

🚩2⃣インスペクターで、Sprite Editorをクリックする。


🚩3⃣スプライトエディタウインドウで、左上の「Sprite Editor▼」をクリックして展開し、補助的テクスチャを選択する。

🚩4⃣補助テクスチャウインドウが開いたら、「+」ボタンを押す。


🚩5⃣名前に「_Emission」と入力する。
※先頭のアンダーバーを忘れずに!!

🚩6⃣テクスチャのボックス内に、用意したエミッションマップをドラッグする。

画像では名前にアンダーバーが見えないが、確実に<_Emission>と入力しよう。

🚩7⃣スプライトウインドウの上部の「適用する」をクリックする。

これで紐づけが完了した。
ちなみに、補助的テクスチャウインドウの薄い部分(下の画像の青い部分)をクリックすると、補助的テクスチャのみプレビューできる。
メインテクスチャとのズレがないかの確認に利用しよう。

確認したら、スプライトエディターは閉じてOK!

シェーダーの作成

次はシェーダーグラフを作成する。

🚩1⃣プロジェクトウインドウで右クリック > 作成 > シェーダー > ユニバーサルレンダーパイプライン > スプライト Unlitシェーダーグラフをクリックする。

作成したシェーダーグラフに名前を付けるよう促されるので、好きな名前を付ける。デフォルトのままでもいい。

例では「shd_cat」とした。

マテリアルの作成

次にマテリアルを作成する。

🚩1⃣プロジェクトで、さきほど作成したシェーダーグラフを選択する。

🚩2⃣ブルーライン上で右クリックする。

🚩3⃣作成 > マテリアルを選択する。

※画像のマテリアルのリストは視認性を考慮して上下をトリミングしている。本来はもっと長い。

ここでも作成後に名前を決めることになる。好きにつけよう。

例では「mtl_cat」とした。


🚩4⃣作成したマテリアルを、猫のSprite Rendererのマテリアルにドラッグする。

ヒエラルキーで猫を選択した後、プロジェクトからマテリアルを猫のスプライトレンダラーのマテリアルへアタッチしている。

マテリアルのアタッチが成功すると、猫の画像が消えスクエアのボックスに置き換わる。
一見するとバグってるが、これでOK!

グレーの正方形が、マテリアルをアタッチした直後の「猫」。以前の面影はない。

シェーダーグラフのカスタマイズ

ここから第2フェーズに入る。
オリジナルのシェーダーを作成するのだ。
この工程を経て、輝きを増した猫のグラフィックを再獲得する。
案ずるより産むが安し。始めよう。

🚩1⃣作成したシェーダーをダブルクリックする。

🚩2⃣Shader Graph 編集ウィンドウが開くので、適宜画面サイズを調整する。

なお、Shift +Spaceで全画面表示の切り替えができる。



これから以下のように構成されたシェーダーを作っていく。
順を追って見ていこう。

今回作るシェーダーの完成形

まずはメインテクスチャを読み込む。

Texture 2D <MainTex>の作成

🚩1⃣ブラックボードの「+」ボタンをクリックする。

🚩2⃣「Texture2D」を選択する。

🚩3⃣名前を「MainTex」に変更する。

🚩4⃣Graph InspectorのReferenceの名前を「_MainTex」に変更する。


🚩5⃣Graph InspectorのDefaultにメインテクスチャを読み込む。

🚩6⃣MainTexをブラックボードの外、作業スペース内へドラッグする。

🚩ドラッグすると、7⃣が配置される。


次に、MainTexにSampleTexture2Dをつなげる。

🚩1⃣作業スペース内のMainTexの右の赤丸を、作業スペース内へドラッグする。

🚩2⃣Create Nodeウインドウが出るので、検索窓に「sample」と入力する

🚩3⃣下のリストから「Sample Texture 2D」を選択する。

次にエミッションマップの読み込みを行う。
方法はメインテクスチャの読み込み方法と全く一緒である。

Texture 2D <Emission>の作成

🚩1⃣ブラックボードの「+」ボタンをクリックする。

🚩2⃣「Texture2D」を選択する。

🚩3⃣名前を「Emission」に変更する。

🚩4⃣Graph InspectorのReferenceの名前を「_Emission」に変更する。


🚩5⃣Graph InspectorのDefaultにエミッションマップを読み込む。


🚩6⃣Emissionをブラックボードの外、作業スペース内へドラッグする。


次に、EmissionにSampleTexture2Dをつなげる。

🚩1⃣作業スペース内のEmissionの右の赤丸をクリック&ドラッグする。

🚩2⃣Create Nodeウインドウが出るので、検索窓に「sample」と入力する

🚩3⃣下のリストから「Sample Texture 2D」を選択する。

この段階で、メインテクスチャとエミッションマップがシェーダグラフに取り込まれていればOKである。
下の画像を参考にしよう。

MainTexとEmissionの合流

次に、上記手順で用意した2つの画像を合流させる。

🚩1⃣作業スペース内で右クリック > Create Nodeを選択する。

🚩2⃣検索窓に「add」と入力する。

🚩3⃣リストから「Add」を選択する。

🚩4⃣「AddノードのA(4)」を「SampleTexture2D(MainTex)のRGBA(4)」に接続する。

🚩5⃣「AddノードのB(4)」を「SampleTexture2D(Emission)のRGBA(4)」に接続する。

マスターノードへの接続

次に、マスターノードへ接続する。

🚩1⃣AddのOutを作業スペースへドラッグする。

🚩2⃣Create Nodeの検索窓に「split」と入力する。

🚩3⃣リストから「Split」を選択する。


🚩4⃣SplitのA(1)をマスターノードのFragmentのAlpha(1)へドラッグする。

🚩5⃣AddのOut(4)をマスターノードのFragmentのBase Color(3)へドラッグする。

正しく接続できると、Main Previewに画像が表示される。

Colorの作成

次にエミッションの色を制御するカラーノードを作成する。

🚩1⃣ブラックボードの「+」ボタンをクリックする。

🚩2⃣「Color」を選択する。

🚩3⃣名前は「Color」のままでOK

🚩4⃣ColorのGraph Inspectorで、ModeをHDRへ変更する。


🚩5⃣DefaultのHDRをクリックしてHDRカラーウインドウ表示させる。

🚩6⃣好きな色を選択し、強度を1以上に設定する。
※強度の値が大きいほど発光が強くなる。

画像では強度を2.83くらいに設定。けっこう適当である。

🚩7⃣「Color」をブラックボードの外、作業スペース内へドラッグする。

Colorの接続

最後にエミッションとカラーを接続する。

🚩1⃣作業スペースにドラッグしたcolorの右側の赤丸を作業スペース内にドラッグする。

🚩2⃣Create Nodeの検索窓に「multiply」と入力する。

🚩3⃣リストから「multiply:B(4)」を選択する。


🚩4⃣multiplyのA(4)を、「SampleTexture2D(Emission)のRGBA(4)」に接続する。

🚩5⃣multiplyのOut(4)を、AddのB(4)に接続する。


🚩6⃣Shader Graph 編集ウィンドウの左上の「Save Asset」をクリックして上書き保存する。

これで設定はすべて終了した。
シーンへ戻り発光しているか確認してみよう。

Let’s 発光!!

ここまでの仕込みが正しく行われていれば、発光色と強度の調整はマテリアルのインスペクターからできるようになっている。

おのれの感性が赴くままにピカピカさせてちょうだい。

発光しない場合は、手順にミスがないか慎重に再確認してみよう。

ブルームの強度を上げると、ホラーと化す。怖い。

まとめ

Shader Graphが導入されるまで、発光の実装はプログラマーの領域だった。
シェーダー向けのコードをゴリゴリ書いていかねば到達できなかった表現の領域に、エンジニア以外が足を踏み入れられるようになった恩恵は計り知れない。
この「領域展開」を使わない手はないだろう。(呪力も不要だし)

さらに、このShader Graphを使えば、他にもさまざまな表現が可能なのだが。

それは、また別の話🎮

BOOTHでドット絵素材のお店やってまーす。

下のハートボタンは、砂塒のやる気スイッチに直結しています。
押すなよ~!絶対に押すなよ~!

・・・押してよぉぉぉぉ~!!!

コメントを残す