【Unity】TextMeshProでディゾルブシェーダを適用する

通常運行

夏は「花火だー、お祭りだー」の声に耳を塞ぎ、秋はハロウィンの狂乱に目を塞いでやり過ごし、やっと落ち着いたと思っていたら、駅前に大きなクリスマスツリーのイルミネーションが準備されているのを目にしてウンザリした皆さんこんにちは。

秋風が独り身には冷たい季節になってきたので、この三連休は部屋に閉じこもって「The Outer World」ばかりをしていました。

宇宙を舞台にしたFalloutみたいなゲームなんですが、敵を倒すには銃で撃つより鈍器で殴った方が早い、という謎仕様に戸惑いながら異世界の荒野を彷徨っています。当然ながらゲーム開発の進捗なんてない。どうしよう。

GitHubとUnity

さて、「GitHub For Unity」が正式版でリリースされたこともあってか、現在GitHubではUnity製のWebGLゲームや作業効率を向上されるプラグインが数多く公開されています。

私も度々お世話になっており、つい最近の記事でもGitHubで公開されていて私のゲームでも使用したプラグインについて取り上げたのですが、今回紹介するプラグインもそれらと同様にGitHubから導入することができます。

github.com

「DissolveEffectForTMPro」ではTextMeshPro使用できるディゾルブシェーダが公開されています。

使い方

上記のリンクから「Releases」タブを選択、最新版のunitypackageファイルをダウンロードします。

次にAseets⇒Import Package⇒Custom Packageからダウンロードしたunitypackageファイルを選ぶことでUnityプロジェクトに導入されます。

ディゾルブシェーダを適用させたいTextMeshProオブジェクトのShaderを「Distane Field(UIDissolve)」に変更し、「Dissolve」欄にディゾルブパターンのTextureを指定しますが、ここでは白黒画像でアルファチャンネルの画像を指定します。

shaderの設定

ディゾルブパターンに使用するTextureの設定

最後にディゾルブを動作させるスクリプト「UIDissolve」をアタッチします。

ディゾルブの縁の色を変えたい場合は「Color」を、ディゾルブパターンのTextureの適用範囲を変えたい場合は「EffectArea」の項目を変更します。

ディゾルブの効果の強さを示す「EffectFactor」の値を変化させるとディゾルブの動作を確認できます。

スクリプトでUIDissolveクラスのPlayメソッドをコールすると「Duration」で設定した時間で先程の「EffectFactor」の値が0⇒1へ変化し、TextMeshProの文字がディゾルブパターンに沿って消されていきます。

試しにステージ冒頭、攻撃目標を説明する演出に使ってみました。
こんな感じ

サンプリングの関係でぎこちない消え方ですが、実際はスムーズに動作します。
ディゾルブパターンのデザインに凝ればもうちょっとカッコよくなりそう・・・