前回は、CloudFlareについてご紹介しました。
今回は、UnityのUIにスクリプトからグロー効果を適用する方法についてご紹介します。
私自身、Unityを扱うようになってから1年ほど経ち
やっと基本的な使用方法や機能拡張のやり方が理解できてきたなという感触です。
ただ、描画に関する処理はとても苦手意識があり、これまであまり深くは触れてこなかったのですが
さすがにこれではまずいと思い、空き時間を見つけて少しずつ勉強しています。
Unityで様々な表現を行うときに真っ先にでてくるのが、シェーダーだと思いますが
まだ理解しきれていない部分が多いので、今回はUnityが用意しているTextureクラスを使用して
UIオブジェクトに発光効果を付与してみようと思います。
ActionScriptを使用していた方なら、GlowFilterと言えばイメージできると思います。
オブジェクトを光るように縁取るものです。
UIを作成していると、ちょっとした効果をつけたくなります。
ですが、そのためだけにわざわざ別の画像を用意するのは、少し手間に感じてしまいます。
発光効果なしの画像だけを使用して両方の表現をできれば、デザイナーさんの負担も少しは減ると思うので
気になった方は試してみてください。
2つの手順を踏むだけで簡単に発光効果を表現することが出来ます。
1つ目は、元となる画像のピクセルデータから、Blurをかけた状態の単色ピクセルデータを生成します。
単色の色は、発光させるときに使用したい色を指定してください。
また、ここではテクスチャの生成はせずに、ピクセルデータの状態で保持しておきます。
Unityでは、Color[]になります。
2つ目は、元となる画像のピクセルデータと先ほど生成したピクセルデータをマージして
縁発光部分の情報のみを元画像に追加したピクセルデータを生成します。
今回は、周りが透過の単色星型画像を使用したため、単純にα値を比較してα値が大きいほうを残すようにしました。
使用する画像によってこの辺りに処理が変わってくると思いますので、状況に応じて変更してください。
最後にマージしたピクセルデータからテクスチャを新しく生成し、UIオブジェクトに適用して終了です。
//width,heightは元となる画像から取得しておきます var texture = new Texture2D(width, height); //マージしたピクセルデータ(pixcels)をテクスチャに設定します texture.SetPixels(pixcels); texture.Apply();
■元画像
■ピンクを指定したBlurだけのテクスチャ
■元画像とマージして生成したテクスチャ
以上で、グロー効果を表現する方法は終了となります。
最後までご覧いただきありがとうございました。
弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。