Amplify Shaderの利用

本記事では、Amplify Shader Editorを用いた、シェーダーを制作、STYLYにアップロードする一連の流れをご紹介します。  

イントロダクション

Amplify Shader Editorは、コード無しでシェーダーを作ることができるUnityアセットです。Amplify Shader Editorを使えば、ノードを繋げて異なるシェーダの効果をつくっていくことでマテリアルをUnity内のモデルに加えることができます。

購入がまだの方はこちらから

Assets>Create>Material の順にクリックし、マテリアルを作成します。   Assets>Create>Shader>Amplify Surface Shaderの順にクリックし、Amplify Surface Shaderを作ります。   Window> Amplify Shader Editor> Open Canvasと開いてAmplify Shader Editorウインドウを開きます。Amplify Shader EditorマテリアルかAmplify Shader Editorシェーダをダブルクリックしエディタを開くこともできます。     上の図の「1」ここでシェーダ名を変更できます。スラッシュ(/)を用いることで自分でカテゴリを加えることができます。シェーダファイル名や実際のシェーダ名は異なるもの名前にできます。 上の図の「2」押すとProject Explorerタブの中のシェーダファイルの場所を見つけることができます。また、外枠の緑の線はそのシェーダが開かれているかを示しています。   マテリアルをクリックしてエディタを開いたのち、上の図の「1」をクリックすると、Project Explorerタブ内のシェーダファイルの場所がわかります。外枠の青い線はマテリアルとシェードが開いていることを意味します。   1: 1cノードか1bアウトプットノードを選択し、左側のタブから1aノードのプロパティを変更します。ノードが選択されていない場合、アウトプットノードのプロパティが自動的に現れます。ノードプロパティを最小化したければ、上部右側のマイナスボタンを押してください。   2: a) セーブボタン – 手動でシェーダのセーブ、アップデートを行います。 b) LIVEアップデートボタン – 設定するとシェーダのアップデートがLIVE形式で行われます。 c) クリアボタン – 接続のないすべてのノードが取り除かれます。 d) 編集ボタン – テキストエディタ内でシェーダのスクリプトを開きます。   3: 左部 – シェーダカテゴリ 右部 – シェーダ名   4: a) アウトプットノードにフォーカスをする。 b) 選択されたノードにフォーカスをする。Fキーをダブルクリックでも同様。何も選択がされていない場合、ノードの集まりすべてにフォーカスをします。 c) ヘルプボタン   5: ノードパレットタブ内のノードを検索し、キャンバスエリアにドラッグしてくることができます。 ノードパレットタブを最小化したい場合は、上部右側のマイナスボタンをクリックしてください。   6: キャンバス上のどこかを右クリックし、検索可能なノードリストを開くことができます。   7: ショートカットキーを ショートカットキーを押しながら、新しいノードをつくるためにキャンバス上のどこかをクリックします。例えば、「m」キーはノードを複製します。  

制作例

シェーダをつくるには、マテリアルとAmplify Surface Shaderを作る必要があります(イントロダクションを参照ください)。その後、Amplify ShaderをMaterial#1にドラッグします。マテリアルをオブジェクトに当てはめてもよいです。   Material#1をダブルクリックしてエディタを開いてください。   左のタブからシェーダ名を変えます。   これは球体の初期の見え方です。   最初に検索リストを使って「Lerp」を見つけます。次に、Lerp node Output PortをAlebedo Input Portに繋ぎます。   その後、ショートカットキーの「5」を押したまま空のキャンバス空間上で右クリックをし、新しいColorノードをつくります。その後、Color Output PortをLerp Input Portに繋ぎます。   Ctrl(Macの場合Command)キーとDキーを押して複製し、もう一つColorノードを追加します。Floatノードを加えてそれらをLerpノードに繋ぎます。   ここで、Floatノードのパラメータを変えてみます。はじめにTypeを「Property」に変更します。これによりマテリアル内で直接変更ができるようになります。次に、MinとMaxの値を変更します。   テクスチャをモデルに加えるために、Project Explorerタブからcanvasの中にノーマルマップテクスチャを落とし込み、Normal Input Portにつなげます。Normal Mapボックスをクリックしておくことを忘れないでください。     放出エフェクトを作るために、Colorノード、Floatノードを作って、Output Portsの両方をMultiply Input Portに繋げます。次に、Multiply Output PortをEmission Input Portに繋ぎます。   最後に、Typeを「Property」に変更します。これでマテリアル内で直接変更できるようになります。   これでSTYLYにアップロードできるようになりました!  

アップロード

Amplify Shader GameObjectをSTYLYにアップロードする方法を見ていきます。 はじめに、「Assets」フォルダ下部にフォルダを作成し、「Prefabs」と名前をつけます。   次に左側のヒエラルキーウィンドウ内からアップロードしたいGameObjectを選択します。   選択されたGameObjectsを先ほど作成したPrefabsフォルダ内にドラッグし、プレハブを作ります。   プレハブが作れたら、STYLY > Asset Uploader Settingsへと進みます。   STYLYアカウントのメールアドレスとAPIキーを打ち込みます。   プレハブをアップロードする前に、プレハブの配置座標を(0, 0, 0)にしてください。   アップロードしたいプレハブを右クリックし、ドロップダウンメニュー内のSTYLY > Check File Sizeと進み、プレハブのファイルサイズを確認してください。プレハブのファイルサイズは3MB以下が推奨されています。   アップロードしたいプレハブを右クリックし、ドロップダウンメニュー内からSTYLY > Build And Upload Prefab Assetに進み、アップロードを開始します。   アップロードが完了したら、OKをクリックします。これでアセットがSTYLY内で利用可能になります。