(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

(:3[kanのメモ帳]



グローやフェード、アウトライン等の39種類のエフェクトを簡単にSpriteRendererやImage(uGUI)に追加でき、組み合わせて使う事も可能な All In 1 Sprite Shader【Unity】【アセット】【Shader】


このエントリーをはてなブックマークに追加


この記事でのバージョン
Unity 2018.4.20f1


はじめに

今回はフェードやアウトライン等のエフェクトを簡単にSpriteRendererやImage(uGUI)に追加できる

シェーダーのアセット、All In 1 Sprite Shaderの紹介です!

All In 1 Sprite Shader | VFX Shaders | Unity Asset Store


イメージとしては以下のような感じ。

各エフェクトを簡単に追加出来ますし、組み合わせて使う事も可能です。

f:id:kan_kikuchi:20200417074727g:plain


ちなみに現在50%割引セール中だったりします。

f:id:kan_kikuchi:20200417064944j:plain




基本的な使い方

基本的な使い方はAllIn1Shaderというコンポーネントを

SpriteRendererまたはImageが付いているオブジェクトにAddするだけ。

f:id:kan_kikuchi:20200417071626j:plain


するとマテリアルが自動で切り替わるので、

f:id:kan_kikuchi:20200417071804j:plain


後は使いたいエフェクトにチェックを入れていくだけ。

f:id:kan_kikuchi:20200417071755j:plain


エフェクトは39種類もありますが、Demoシーンを見れば各エフェクトを簡単に把握出来ます。

f:id:kan_kikuchi:20200417072718j:plain
f:id:kan_kikuchi:20200417073720g:plain


また、Demoシーンではエフェクトを組み合わせた例もあるので、設定値も含めてかなり参考になります。

例えばEvil MarineというやつではGlow+Outline+Color Swapが使われています。

f:id:kan_kikuchi:20200417074727g:plain


なお、マテリアルはSave Material To Folderから保存出来ます。

f:id:kan_kikuchi:20200417072239j:plain


ちなみにそのマテリアルの保存先はWindow -> AllIn1ShaderWindowから設定します。

f:id:kan_kikuchi:20200417072201j:plain



プログラムからエフェクトの変更

プログラムからエフェクトを変更したい場合はマテリアルのプロパティを操作します。



具体的にはエフェクトを有効にしたい場合はEnableKeyword

無効にしたい場合はDisableKeywordを使います。

/// <summary>
/// グローを有効にする
/// </summary>
public void EnableGlow() {
  GetComponent<SpriteRenderer>().material.EnableKeyword("GLOW_ON");
}
  
/// <summary>
/// グローを無効にする
/// </summary>
public void DisableGlow() {
  GetComponent<SpriteRenderer>().material.DisableKeyword("GLOW_ON");
}
f:id:kan_kikuchi:20200420064627g:plain


なおGLOW_ON等の各エフェクトのKeyはEdit Shaderで選択したシェーダーから確認出来ます。

(アセットに同梱されているDocumentation.pdfからも確認可能)

f:id:kan_kikuchi:20200417180126j:plain
f:id:kan_kikuchi:20200417180158j:plain


また、各エフェクトの設定値を変更したい場合はSetFloat等を使います。

/// <summary>
/// グローの明るさを変更する
/// </summary>
public void ChangeGlowIntensity(float intensity) {
   GetComponent<SpriteRenderer>().material.SetFloat("_Glow", intensity);
}
f:id:kan_kikuchi:20200420064220g:plain


なお_Glow等の各設定値のKeyはSelect Shaderで選択したシェーダーから確認出来ます。

(アセットに同梱されているDocumentation.pdfからも確認可能)

f:id:kan_kikuchi:20200417180437j:plain
f:id:kan_kikuchi:20200417180449j:plain



おわりに

色々なエフェクトが手軽に使えるだけでなく、組み合わせも可能なので、

このアセットを使うと以下のようなエフェクトが簡単に実装出来ます。

(携帯の画面に映ってる「時を戻そう」の部分)



ちなみに最初はGlitchを表示し、

掴んだ瞬間にFade+Outline+Glowに切り替え、値を徐々に変更していってる感じです。

f:id:kan_kikuchi:20200420071134g:plain


All In 1 Sprite Shader | VFX Shaders | Unity Asset Store