i-school - 3Dダイビングゲーム 手順20
 この手順では姿勢変更用のゲージが満タンになった際に、ゲージがキランと光る演出を追加して、満タンになったことをユーザーに伝えるようにします。


<完成動画>
https://gyazo.com/0c5ffb7f6cb149a22589bb1513e265e8


 以下の内容で順番に実装を進めていきます。

手順20 −姿勢変更ゲージの演出を追加−
32.ShinyEffectForUGUI アセットをインポートする
33.姿勢変更ゲージが満タンになった際にゲージが光る演出を追加する



 新しい学習内容は、以下の通りです。

 ・ShinyEffectForUGUI アセットの利用方法



32.ShinyEffectForUGUI アセットをインポートする

1.設計


 多くのゲームにおいて、UIはユーザーに情報を表示するだけではなく、更新された新しい情報を提示する役割も持っています。

 今回は、姿勢変更用のゲージについて演出を行い、ユーザーに姿勢の変更が可能になったことを視覚的に伝えるようにします。
演出には見栄えをよくするだけではなく現在ゲームがどのような状態になっているのかを伝える役目もありますので、上手く活用してください。

 姿勢変更用のゲージが満タンになった時に、ゲージを1回キランと光らせる演出を実装します。

 UI専用のアセットを無償で提供してくださっている方がいますので、そちらのアセットを利用します。

 こちらのアセットに含まれている、ShinyEffectForUGUI というスクリプトを光らせたいゲームオブジェクトにアタッチすることで
スクリプトを通じてゲームオブジェクトを適宜なタイミングで光らせる制御を行います。

 まずはアセットをインポートします。


2.ShinyEffectForUGUI をインポートする


 以下のサイトから、ShinyEffectForUGUI アセットをダウンロードしてインポートします。


ShinyEffectForUGUI
https://github.com/mob-sakai/ShinyEffectForUGUI/re...


 こちらのページの少し下に、ShinyEffectForUGUI.unitypackage というUnityPackage のダウンロード用のリンクがありますので、クリックします。






 ダウンロードが終了したら、そのファイル Unity の Project 内にドラッグアンドドロップしてインポートを行います。





 上記のようにインポートの確認ウインドウが開きますので、Import を選択してください。

 これでインポート完了です。続いて、光らせたいゲームオブジェクトにスクリプトのアタッチを行います。


3.ShinyEffectForUGUI スクリプトの設定を行う


 このアセットに含まれている ShinyEffectForUGUI スクリプトを、光らせたいUI部品のゲームオブジェクトにアタッチします。
今回は姿勢変更用のゲージ全体を光らせたいので、Canvas 内にある imgFrame ゲームオブジェクトにドラッグアンドドロップしてアタッチします。

 imgGauge ゲームオブジェクトにアタッチしてしまうと、フレームが光りません。
ですが、imgFlame にアタッチするとフレームだけではなく、フレーム内にあるゲージも一緒に光ります。親子関係を上手く活用しましょう。


ShinyEffectForUGUI スクリプトのあるパス
Assets/ShinyEffectForUGUI/ShinyEffectForUGUI.cs


フォルダ画像



ヒエラルキー画像



imgFrame ゲームオブジェクト インスペクター画像



 上記のインスペクター画像や、下記のサイトを参考に ShinyEffectForUGUI の設定を行ってください。
Rotation の値を 45 に設定することで画像の左端から右端に向かって光がアニメーションします。

 そのほかにも自由に設定していただいて構いません。実際に動かしながら、どれがいいか運用を決定してください。


参考サイト
コガネブログ 様
【Unity】uGUI で画像や文字がキラッと光る演出を実装できる「ShinyEffectForUGUI」紹介
https://baba-s.hatenablog.com/entry/2018/05/21/090...


 また、Canvas ゲームオブジェクトの Canvas コンポーネントの設定を変更します。

Canvas ゲームオブジェクト Canvas コンポーネント



 こちらの Additional Shader Channels の設定を Nothing から TexCoord1 に変更してください。


変更後

 

 以上で設定は完了です。続いて、こちらのエフェクトを制御するための処理を PlayerController スクリプトに追加していきます。


参考サイト Additional Shader Channels
れー@DKRevel 様
UnityのCanvas【使い方とスクリプト】
https://dkrevel.com/unity-explain/canvas/


33.姿勢変更ゲージが満タンになった際にゲージが光る演出を追加する

1.設計


 先ほどゲームオブジェクトにアタッチした ShinyEffectForUGUI スクリプトを利用するには、using での宣言が必要です。
Play メソッドを実行することで、キランと光るエフェクトを再生させることが出来ます。

 光らせたいタイミングは姿勢変更用のゲージが満タンになった時ですので、この部分に、エフェクトを再生させる制御処理を追加します。


2.PlayerController スクリプトを修正する


 using に ShinyEffectForUGUI スクリプトを利用するための宣言を追加します。

 また新しい ShinyEffectForUGUI 型の変数を宣言し、このスクリプトから ShinyEffectForUGUI スクリプトを利用できる状態にします。
SerializeField属性で宣言しておくことで、インスペクターから値の代入が行えます。

 メソッドの追加はありませんが、Update メソッド内の姿勢変更用のゲージが満タンになった時の処理に
ShinyEffectForUGUI スクリプトにある Play メソッドを実行する処理を追加します。
このメソッドを実行することで ShinyEffectForUGUI スクリプトがアタッチさせているゲームオブジェクトを光らせることが出来ます。


PlayerController.cs

 <= クリックすると開きます





 スクリプトの修正が終了したら、ヒエラルキーにある Penguin ゲームオブジェクトのインスペクターを確認します。
新しく追加した shinyEffect 変数が追加されているか確認してください。

Penguin ゲームオブジェクト インスペクター画像




3.Penguin ゲームオブジェクトの PlayerController スクリプトのアサイン情報に、ShinyEffectForUGUI がアタッチされているゲームオブジェクトをドラッグアンドドロップして登録する


 shinyEffect 変数に、ShinyEffectForUGUI スクリプトのアタッチされているゲームオブジェクトをドラッグアンドドロップしてアサインします。
どのゲームオブジェクトをスクリプトから操作したいのかをイメージしていてください。


Penguin ゲームオブジェクト アサイン後のインスペクター画像



4.ゲームを実行して動作を確認する


 設定が完了しましたので、ゲームを実行してゲージを満タンにしてください。満タンになったときに1回だけ、キランと光るエフェクトが再生されれば制御成功です。
姿勢を変更してゲージを減らし、再度満タンにした場合にも同じように光ります。

 光ることが確認できたら、どういった光らせ方があるのかを、ShinyEffectForUGUI スクリプトの設定を操作して、色々と試してみてください。


<完成動画>
https://gyazo.com/0c5ffb7f6cb149a22589bb1513e265e8


 以上でこの手順は終了です。

 => 次は 手順21 −キャラのアニメ制御の同期を追加− です。