Unityに関連する記事です

スキル機能を設計・実装する



設計と実装の手順


 この手順ではUIManagerスクリプトを修正し、先ほど作成したスキルボタンやスキルのゲージ用画像の制御処理を追加していきます。


 実装の手順です。

 1.UIManagerスクリプトを修正する



 新しく学習する内容です。

・UnityEventの使用方法
・DoTweenのDOFillAmountメソッドとSetLoopsメソッド
・ラップ処理の実装例 〜Tweener型変数を活用してDoTweenのループ処理を停止する〜


1.UIManagerスクリプトを修正する


 UIManagerスクリプトを修正します。スキルボタン用の変数を用意し、ボタンにメソッドを登録します。また、スキルボタンを押した際の処理も追加します。

 干支を消すごとにスキルポイントが加算されると同時に、スキルボタンのゲージも徐々に溜まっていくように、ImageのFillAmoutを制御する機能をDOTweenを利用して追加します。

 スキルボタンは押せるようになったら、こちらもDOTweenの機能でアニメーションさせて、ボタンが押せる、スキルが発動できることをユーザーに認知してもらうための補助動作とします。
ただし、スキルボタンを押すタイミングはユーザーの任意のタイミングになります。よって、いつスキルボタンが押されるのかはわかりませんので、
スキルボタンのアニメーションについては、ゲージが満タンになった時に一度だけアニメーションさせるのではなく、
スキルボタンが実際に押されるまで一定の間隔でアニメーションが発生するようにループ処理を施しておきます。
こうすることで、いつでも押せる、ということをユーザーに知らせることにも役立ちます。


UIManager.cs

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



<UnityEventの使用方法>

UnityEventとはUnityが用意しているコールバック処理の1つです。宣言することで使用することが可能になります。
Unity公式スクリプトリファレンス
UnityEngine.Events
https://docs.unity3d.com/ja/current/ScriptReferenc...

using UnityEngine.Events;
  
 UnityEventを使用するには初期化処理を行います。その後、AddListnerメソッドを使用して、登録したいメソッドを指定します。
メソッドの指定は変数(ここではUnityActionによるデリゲート)でも登録することが出来ます。

    // UnityEvent初期化
    unityEvent = new UnityEvent();

    // UnityEventにunityActionを登録(UnityActionにはメソッドが代入されている)
    unityEvent.AddListener(unityAction);

 メソッドを登録後、Invokeメソッドを実行することで、UnityEventに登録したメソッドを実行することが出来ます。
今回は登録されているメソッドは1つだけですが、AddListnerメソッドを複数回使用すれば、複数のメソッドを登録しておくことが出来ます。
その場合、1回のInvokeメソッドですべての登録されているメソッドが実行されます。

    // 登録されているスキルを使用
    unityEvent.Invoke();

 今回のケースでは、スキル用の処理メソッドをUnityAcitonへ代入し、それをAddListnerメソッドを使ってUnityEventに登録しています。
このような設計にしておくことで今後スキルの数が増えた場合であっても、スキルボタンに対して、使用するスキルの処理をスクリプトから動的に登録することが出来ます。


 たくさんの参考記事がありますので調べてみましょう。
うら干物書き様
【Unity】UnityEventの用法と用量
https://www.urablog.xyz/entry/2016/09/11/080000


<DoTweenのDOFillAmountメソッドとSetLoopsメソッド>


 DoTweenには様々なメソッドがありますが、ここでは2つの新しいメソッドを利用しています。


DOFillAmountメソッド

 DOFillAmountメソッドは、画像のImageTypeをFilledに設定しているImageコンポーネントに対して実行できるメソッドです。
Image コンポーネントの持つ FillAmout の値に対して補間処理を行って、アニメしているように演出してくれる機能です。

 FillAmountの値を第1引数で指定した値まで、第2引数で指定した時間をかけて変更します。

imgSkillPoint.DOFillAmount(0, 1.0f);


SetLoopsメソッド

 SetLoopsメソッドは、他のDO〜メソッドの後に実行できるメソッドです。この命令単体で実行することはできません。

 一緒に命令をしているメソッドに対してループ処理を付与することが出来ます。

    // ループ処理を行い、スキルボタンが押されるまでスケールを変化させるアニメを実行する。それをtweener変数に代入しておく
    tweener = imgSkillPoint.transform.DOScale(new Vector3(1.2f, 1.2f, 1.2f), 0.25f).SetEase(Ease.InCirc).SetLoops(-1, LoopType.Yoyo);
 
 上記の処理では、imgSkillPoint.transform.DOScaleメソッドに対して、ループ処理を行っています。(SetEaseメソッドもSetLoopsメソッドと同じで単体では動かないメソッドです)

 第1引数はループ処理を行う回数です。int型で設定します。今回のように -1 を指定すると、それは無限ループになります。(ループが終了しません)
このような場合は明示的に処理を停止させないと無限にループを繰り返します。

 第2引数ではループさせるタイプをLoopTypeというenum型から選択します。LoopType.Yoyo の場合は、A => B , B => A という形式でループを繰り返します。(ヨーヨーと同じ動きです)
他にもLoopTypeがありますので調べてみてください。


<ラップ処理の実装例 〜Tweener型変数を活用してDoTweenのループ処理を停止する〜>


 DoTweenによって、処理をアニメのように再生できる補間処理は非常に便利ですが、一度実行すると、その処理が終了するまでは途中で止めることが出来ません。
またループ処理を伴う場合にはずっと処理が動き続けて止まりません。

 そのようなケースに備えて途中で処理を停止したり破棄したい場合には Tweener型の変数を用意し、そこにDoTweenの処理を代入して実行することが出来ます。
そして代入したTweener型の変数に対しては、実行している処理を停止する命令を出すことが出来ます。
 このように、ある処理を別の変数に代入することによって、元々の処理の内容・機能を変えずにより使いやすい形で処理してもらえるようにすることを
ラップ(Wrap)処理と言います

    // 宣言
    Tweener tweener = null; 

    // ループ処理を行い、スキルボタンが押されるまでスケールを変化させるアニメを実行する。それをtweener変数に代入しておく
    tweener = imgSkillPoint.transform.DOScale(new Vector3(1.2f, 1.2f, 1.2f), 0.25f).SetEase(Ease.InCirc).SetLoops(-1, LoopType.Yoyo);

 今回利用しているケースは、スキルボタンのスケールを大きくしたり、小さくしたりするループ処理の部分です。
 
 本来であればtweener変数に代入しなくても、上記のDoScaleの処理は実行することが可能ですが、SetLoopsメソッドによるループ処理は一度実行すると
ループ回数を繰り返すまで処理を止めることが出来ません。まして今回のケースではループ回数は無限に指定しているため、止まることがありません。

 そのため、tweener変数にループ処理を代入し、スキルボタンを押した際に、下記の処理をTweener型の変数に対して行うことでループ処理を停止しています。

    // スキルボタンのループアニメを破棄し、tweener変数をnullにする
    tweener.Kill();
    tweener = null;

 Tweener型の持つKillメソッドを実行することで、tweener変数に代入されているループ処理が停止します。
また次の行の処理で tweener変数をnullにすることによって、代入されていたループ処理が完全にクリアされます。

 このように、変数を利用し、処理をラップすることで処理の応用幅が広がります。


UIManagerゲームオブジェクトにアサイン情報を登録する


 UIManagerスクリプトの修正が終了したら、UIManagerゲームオブジェクトを選択してインスペクターを確認します。
新しく追加したアサイン情報が2つ表示されていますので、同じ名称のゲームオブジェクトをヒエラルキーからドラッグアンドドロップしてアサインします。


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



アサイン動画
https://gyazo.com/5282af6915f708b685e7f3cb771988e0


アサイン後のインスペクター画像




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

 次は 発展11 です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます