unity2021.1.9f1
ピカピカ光るドット絵が好きだ。
なぜって、かっこいいから。
「光る」は全男子の憧れなのだよ。（異論は認める）
そして、unityにはその機能が備わっている。
ドット絵を簡単にピカピカ光らせる機能が備わっている。
ノーコーディングでシェーダーをカスタマイズできるURPの目玉機能の一つである。
あなたもドット絵を光らせたいだろうか？
答えがYESなら、このまま読み進めてほしい。
もう、いやって言うほど輝かせてしんぜよう。
コンテンツ
前提条件
ドット絵を光らせるには以下の事前準備が必要だ。
2つある。
1⃣自身のプロジェクトにURPのインストールと2Dレンダラーの適用が済んでいる。
2⃣シーンのヒエラルキーに「Global Volume」があり、「Bloom」がオンになっている。
1⃣が済んでない場合はこのエントリーを読んでほしい。
このエントリーで、あなたのプロジェクトにURPと2Dレンダラーを導入する方法がわかる。
2⃣が済んでない場合はこのエントリーを読んでほしい。
このエントリーでURP × 2Dレンダラー環境にポストプロセスを導入する方法を学べる。
どちらも済んでいるなら、このまま読み進めてほしい。
エミッションマップ
さて、ドット絵を光らせるには、光らせたい場所と光らせたくない場所を区切り、unityに知らせてやる必要がある。
では、どうやって知らせればいいのか。
その答えが「エミッションマップ」である。
「エミッションマップ」とは、光らせたい部分を白、光らせたくない部分を黒に設定した画像データのこと。
これを画像ソフト（PhotoShopやAseprite、Affinity Photo）を使って用意してやる。
今回は例として、黒猫の「目」と「剣」を光らせていく。
🚩エミッションマップを用意する。
※メイン画像とエミッション画像は「同一サイズ」かつ「同一位置」でなければならない。これはunityの仕様である。注意しよう。
補助的テクスチャーの設定
unityでは、キャラクターなどの本体の画像を「メインテクスチャ」と呼び、本体画像を補助する画像を「補助的テクスチャ」と呼ぶ。
※上の画像も参照すべし。
エミッションマップも補助的テクスチャの一種である。
そして、メインテクスチャに補助テクスチャを紐づけることで、多彩な視覚表現を実装していくのである。
メインテクスチャへの補助テクスチャの紐づけは「スプライトエディタ」から行うことができる。
🚩1⃣プロジェクトで、キャラクターのメインテクスチャ画像を選択する。
🚩2⃣インスペクターで、Sprite Editorをクリックする。
🚩3⃣スプライトエディタウインドウで、左上の「Sprite Editor▼」をクリックして展開し、補助的テクスチャを選択する。
🚩4⃣補助テクスチャウインドウが開いたら、「＋」ボタンを押す。
🚩5⃣名前に「_Emission」と入力する。
※先頭のアンダーバーを忘れずに！！
🚩6⃣テクスチャのボックス内に、用意したエミッションマップをドラッグする。
🚩7⃣スプライトウインドウの上部の「適用する」をクリックする。
これで紐づけが完了した。
ちなみに、補助的テクスチャウインドウの薄い部分（下の画像の青い部分）をクリックすると、補助的テクスチャのみプレビューできる。
メインテクスチャとのズレがないかの確認に利用しよう。
確認したら、スプライトエディターは閉じてOK!
シェーダーの作成
次はシェーダーグラフを作成する。
🚩1⃣プロジェクトウインドウで右クリック > 作成 > シェーダー > ユニバーサルレンダーパイプライン > スプライト Unlitシェーダーグラフをクリックする。
作成したシェーダーグラフに名前を付けるよう促されるので、好きな名前を付ける。デフォルトのままでもいい。
例では「shd_cat」とした。
マテリアルの作成
次にマテリアルを作成する。
🚩1⃣プロジェクトで、さきほど作成したシェーダーグラフを選択する。
🚩2⃣ブルーライン上で右クリックする。
🚩3⃣作成 > マテリアルを選択する。
ここでも作成後に名前を決めることになる。好きにつけよう。
例では「mtl_cat」とした。
🚩4⃣作成したマテリアルを、猫のSprite Rendererのマテリアルにドラッグする。
マテリアルのアタッチが成功すると、猫の画像が消えスクエアのボックスに置き換わる。
一見するとバグってるが、これでOK！
シェーダーグラフのカスタマイズ
ここから第２フェーズに入る。
オリジナルのシェーダーを作成するのだ。
この工程を経て、輝きを増した猫のグラフィックを再獲得する。
案ずるより産むが安し。始めよう。
🚩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の合流
次に、上記手順で用意した２つの画像を合流させる。
🚩1⃣作業スペース内で右クリック > Create Nodeを選択する。ｖ
🚩2⃣検索窓に「add」と入力する。
🚩3⃣リストから「Add」を選択する。
🚩4⃣「AddノードのA(4)」を「SampleTexture2D(MainTex)のRGBA(4)」に接続する。
🚩5⃣「AddノードのB(4)」を「SampleTexture2D(Emission)のRGBA(4)」に接続する。
マスターノードへの接続
次に、マスターノードへ接続する。
🚩１⃣AddのOutを作業スペースへドラッグする。
🚩２⃣Create Nodeの検索窓に「split」と入力する。
🚩３⃣リストから「Split」を選択する。
🚩４⃣SplitのA(1)をマスターノードのFragmentのAlpha(1)へドラッグする。
🚩５⃣AddのOut(4)をマスターノードのFragmentのBase Color(3)へドラッグする。
Colorの作成
次にエミッションの色を制御するカラーノードを作成する。
🚩1⃣ブラックボードの「＋」ボタンをクリックする。
🚩2⃣「Color」を選択する。
🚩3⃣名前は「Color」のままでOK
🚩４⃣ColorのGraph Inspectorで、ModeをHDRへ変更する。
🚩５⃣DefaultのHDRをクリックしてHDRカラーウインドウ表示させる。
🚩６⃣好きな色を選択し、強度を１以上に設定する。
※強度の値が大きいほど発光が強くなる。
🚩７⃣「Color」をブラックボードの外、作業スペース内へドラッグする。
Colorの接続
最後にエミッションとカラーを接続する。
🚩１⃣作業スペースにドラッグしたcolorの右側の赤丸を作業スペース内にドラッグする。
🚩２⃣Create Nodeの検索窓に「multiply」と入力する。
🚩３⃣リストから「multiply:B(4)」を選択する。
🚩４⃣multiplyのA(4)を、「SampleTexture2D(Emission)のRGBA(4)」に接続する。
🚩５⃣multiplyのOut(4)を、AddのB(4)に接続する。
🚩６⃣Shader Graph 編集ウィンドウの左上の「Save Asset」をクリックして上書き保存する。
これで設定はすべて終了した。
シーンへ戻り発光しているか確認してみよう。
Let’s 発光！！
ここまでの仕込みが正しく行われていれば、発光色と強度の調整はマテリアルのインスペクターからできるようになっている。
おのれの感性が赴くままにピカピカさせてちょうだい。
発光しない場合は、手順にミスがないか慎重に再確認してみよう。
まとめ
Shader Graphが導入されるまで、発光の実装はプログラマーの領域だった。
シェーダー向けのコードをゴリゴリ書いていかねば到達できなかった表現の領域に、エンジニア以外が足を踏み入れられるようになった恩恵は計り知れない。
この「領域展開」を使わない手はないだろう。（呪力も不要だし）
さらに、このShader Graphを使えば、他にもさまざまな表現が可能なのだが。
それは、また別の話🎮
下のハートボタンは、砂塒のやる気スイッチに直結しています。
押すなよ～！絶対に押すなよ～！
・・・押してよぉぉぉぉ～！！！
4 Comments
Add Yours →補助的テクスチャを使う必要があったのはどうしてですか？
補助的テクスチャーの白で指定した部分のみ、ブルームに反応する発光を適用するために必要になります。
補助的テクスチャは何に使用していますか？
Mtl_catマテリアルのEmissionプロパティには何も表示されていないようですが、見えないだけで格納されているという感じですか？
補助的テクスチャは画像の中で「発光する部分（白）と発行しない部分（黒）」を分けるために使用しています。
補助的テクスチャを適用しないと画像全体がブルームの影響を受け、画像の一部のみを発光させることができないので、このような実装になっています。