おはじきゲーム　手順１０

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

手順１０　－的球のUI機能を実装－

１９．的球ゲームオブジェクトの頭上に体力ゲージを作成して表示する
２０．的球スクリプトを修正して、体力の数値と体力ゲージをリンクさせてアニメ表示する

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

・Sliderコンポーネントの設定と説明
・DoTweenの補間機能と実装例③　OnCompleteメソッド、SliderのValueの値をDoTweenで制御する
・キャスト処理
・処理を書く場所について

１９．的球ゲームオブジェクトの頭上に体力ゲージを作成して表示する

設計

　的球に体力が実装され、破壊されるようになりました。このままでも問題はありませんが、
ゲーム的には的となる敵の体力が画面上に見えていた方が、その体力を判断基準とし、次にどの的球を狙おうかという戦略性が生まれます。

　そこでここでは的球に体力ゲージを追加し、体力の値と同期してゲージが減少する機能を実装します。

　体力ゲージには、UnityのUI機能である Slider コンポーネントを活用します。こちらを設定後、的球のスクリプトを修正して
体力ゲージと体力の値とを紐づけて、体力の値に合わせて体力ゲージも減少していくようにする処理を追加します。

　このような情報があるかないかでゲーム性が大きく変わってきますので、UI要素もゲーム性の１つになっていることを学習していきましょう。

EnemyBallゲームオブジェクトに、Sliderゲームオブジェクトを追加する

　EnemyBallゲームオブジェクトをヒエラルキーで選択して右クリックをしてメニューを表示します。
UI => Slider を選択します。Sliderコンポーネントを持つゲームオブジェクトが一式、EnemyBallゲームオブジェクトの子として追加されます。

EnemyBallゲームオブジェクトのヒエラルキー画像

　Slider ゲームオブジェクトには始めから複数のゲームオブジェクトが子、孫として不随しています。
このうち、Handle Slide Area ゲームオブジェクトとその子オブジェクトである Handle ゲームオブジェクトについては今回は不要であるため、
削除して以下の画像のような状態にしてください。

EnemyBallゲームオブジェクトのヒエラルキー画像

Sliderゲームオブジェクトの各コンポーネントを設定する

　EnemyBallゲームオブジェクトの子オブジェクトである、Sliderゲームオブジェクトを選択してインスペクターを確認します。
RectTransformコンポーネントとSliderコンポーネントがアタッチされています。Sliderコンポーネントは変更箇所はありません。

　RectTransformコンポーネントのPositionのY軸の値を操作して、Slider ゲームオブジェクトが EnemyBallゲームオブジェクトの頭上に来る位置に調整してください。
また Sidth と Height の値も、的球の画像の大きさに合わせて適宜な大きさに調整してください。
下記の画像の位置を参考にしてください。あるいは、頭上の代わりに足元に Slider を表示して頂いても構いません。

SliderのRectTransform画像（頭上に来るように）

SliderのSceneビューでの画像

足元の場合のSliderのRectTransform画像画像

足元の場合のSliderのSceneビューでの画像

　Sliderコンポーネントについては変更ありません。（Handle Slide Areaゲームオブジェクトを削除しているため警告が出ますが問題ありません）
このコンポーネントの管理している Value の値を操作することで Slider(ゲージ)が動きます。ここをスクリプトから変更するように、あとで紐づけを行います。

　Valueの値は 0 - 1 の間です。0 のときはゲージは空の状態、1 が満タンの状態です。初期値は 0 のままで問題ありません。

Slider

検証動画　SliderのValue
https://gyazo.com/0a896d4d70ab93a06a3877e6072f1bd5

Backgroundゲームオブジェクトを設定する

　Backgroundゲームオブジェクトには、RectTransformコンポーネント、Canvas Renderer コンポーネント、Imageコンポーネントがアタッチされています。

　RectTransformコンポーネントは変更箇所はありません。

　Imageコンポーネントは、Raycast Target のチェックを外してください。
またColorのAlphaの値は適宜な数値に変更してください。そのままでも問題ありません。
こちらのSource Imageの色や画像が、ゲージの背景色になります。

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

Fill AreaゲームオブジェクトとFillゲームオブジェクトの設定を行う

　Fill Areaゲームオブジェクトのインスペクターを確認します。
RectTransformコンポーネントのみになっていますので、left と Right の値をどちらも 0 に設定してください。
この値が 0 になっていないとゲージが完全に隠れません。

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

　Fillゲームオブジェクトのインスペクターを確認します。
RectTransformコンポーネント、CanvasRendererコンポーネント、Imageコンポーネントがアタッチされています。

　RectTransformコンポーネントの Width の値を 0 に設定してください。これも Fill Area と同じ理由です。

　Imageコンポーネントでは、Raycast Target のチェックを外してください。
Color の設定でゲージの色を変更できますので、任意の色や透明度に変更してください。
こちらで設定した色が動くゲージの色になります。
Source Image の画像は初期設定では　UIImage に設定されていますが、任意の画像を設定することも出来ます。(今回は設定していません)

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

２０．的球スクリプトを修正して、体力の数値と体力ゲージをリンクさせてアニメ表示する

設計

　【１９】で作成した体力ゲージですが、現在はまだ的球の体力の値との紐づけが行われていません。
そのため体力の値が減少しても、体力ゲージは動きません。

　的球のスクリプトを修正して、体力ゲージを管理している Slider コンポーネントの紐づけを行い、
体力の値が更新されるたびに、体力ゲージにも同じように更新の処理を入れて、双方がリンクして動作するように処理を実装します。

　体力ゲージはDoTweenを使って動作させますのでゲージがアニメ演出(徐々に減る)するようにします。

的球スクリプトを修正する

　宣言フィールドに変数を２つ追加します。１つは体力の最大値を管理するためのもの、もう１つは Slider コンポーネントを代入するためのものです。

　新しくUpdateHpGaugeメソッドを１つ追加し、このメソッドにて体力ゲージの表示の更新を行います。
他のメソッドからは、体力ゲージの表示更新を行いタイミングで、このUpdateHpGaugeメソッドを呼び出すだけでよい作りにします。
同じ処理が複数ある場合には、このようにメソッドを作って処理をまとめておくことで、役割が明確化・分担化されてます。同じ処理を書く必要もなくなります。

　そしてStartメソッドとOnCollisionEnter2Dメソッドを修正して、先ほど作成したUpdateHpGaugeメソッドを呼び出して体力ゲージの更新を行います。

EnemyBall.cs

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;
using UnityEngine.UI;

public class EnemyBall : MonoBehaviour
{
    [Header("的球の体力")]
    public int hp;

    private CapsuleCollider2D capsuleCol;


////* ここから追加 *////

    private int maxHp;              // ゲーム開始時の体力の最大値の保持用。Sliderの計算に使用する

    [SerializeField]
    private Slider hpSlider;        // Sliderコンポーネントとの紐づけ用。インスペクターでアサインする

////* ここまで追加 *////


    void Start()
    {
        capsuleCol = GetComponent<CapsuleCollider2D>();

　　　　// 最初のスケールを保持
        Vector2 startScale = transform.localScale;

        // 最小化(見えなくなる)
        transform.localScale = Vector2.zero;

        // Sequence初期化
        Sequence sequence = DOTween.Sequence();

        // 敵を回転させながら1.5倍の大きさにし、その後、元の大きさに戻しながら出現させる
        sequence.Append(transform.DOLocalRotate(new Vector3(0, 720, 0), 1.0f, RotateMode.FastBeyond360).SetEase(Ease.Linear));
        sequence.Join(transform.DOScale(startScale * 1.5f, 1.0f).SetEase(Ease.InCirc));
        sequence.AppendInterval(0.15f);


////* ここから修正・追加 *////

        sequence.Join(transform.DOScale(startScale, 0.15f).SetEase(Ease.InCirc).OnComplete(() => {
         
            // 体力の最大値を代入
            maxHp = hp;

            // 体力ゲージの表示を更新 => 的球が出現してからゲージが徐々に満タンになるアニメ演出
            UpdateHpGauge();
        }));

////* ここまで *////

    }


////* ここから新しくメソッドを１つ追加。ここから追加 *////


    /// <summary>
    /// 体力ゲージの表示を更新
    /// </summary>
    private void UpdateHpGauge() {
        hpSlider.DOValue((float)hp / maxHp, 0.5f);
    }


////* ここまで追加 *////


    private void OnCollisionEnter2D(Collision2D col) 
　　{
        // CharaBallのTagを持つゲームオブジェクトに接触したら
        if (col.gameObject.tag == "CharaBall")
        {
            // CharaBallクラスを取得できるか判定
            if (col.gameObject.TryGetComponent(out CharaBall charaBall))
            {
　　　　　　　　// Hpを減少させる
                hp -= charaBall.power;


////* ここから修正・追加 *////

　　　　　　　　//Debug.Log("的球の残り体力値 : " + hp);//　<=　体力値の減少処理が動いているのであれば、ここでの確認は不要になりますので、削除してください

                // 体力の値を体力ゲージに反映
                UpdateHpGauge();

////* ここまで *////


                // Sequence初期化
                Sequence sequence = DOTween.Sequence();

                // 手球と接触すると敵を回転
                sequence.Append(transform.DOLocalRotate(new Vector3(0, 720, 0), 0.5f, RotateMode.FastBeyond360).SetEase(Ease.Linear));

　　　　　　　　// Hpが0以下になったら
                if (hp <= 0) {
                    DestroyEnemy(sequence);
                }
            }
        }
    }

　　/// <summary>
    /// 敵の破壊
    /// </summary>
    /// <param name="sequence"></param>
    public void DestroyEnemy(Sequence sequence) {
        // 変更なしのため省略
    }
}

　スクリプトを修正したら、EnemyBallゲームオブジェクトのインスペクターを確認します。
新しく追加した変数のアサインができるようになっていますので、ヒエラルキーにあるEnemyBallゲームオブジェクトの子オブジェクトのSliderゲームオブジェクトを
ドラッグアンドドロップしたアサインします。これで紐づけが出来ました。

手順動画　Sliderのアサイン
https://gyazo.com/3cdf02aa97f6c88b893f5a452d2caa92

＜SetEaseメソッドとOnCompleteメソッド＞

　　sequence.Join(transform.DOScale(startScale, 0.15f).SetEase(Ease.InCirc).OnComplete(() => {       
            // 体力の最大値を代入
            maxHp = hp;

            // 体力ゲージの表示を更新 => 的球が出現してからゲージが徐々に満タンになるアニメ演出
            UpdateHpGauge();
    }));

１．SetEaseメソッド

　SetEaseメソッドは他のDoTweenのメソッドに付随する処理です。このようにDoTweenではDoTweenのメソッド同士を１つの処理の塊として続けて処理を行うことができます。
処理を続ける場合には、前のメソッドの後にピリオド(ドット)を書くことで、次のメソッドを書くことが可能です。こういった処理をメソッドチェーンといいます。

　SetEaseメソッドではEaseというアニメーションさせる際のパターンを変更することができます。Easeはenum型で設定されており、Ease.タイプの書式で記述します。
非常に多くの種類があります。今回は Ease.InCirc を使用しています。
　
参考サイト　
全Easeの種類がまとめられており、非常に分かりやすいです。

ゲームUIネット様
DOTweenのイージング一覧を世界一詳しく&分かりやすく説明する
https://game-ui.net/?p=835

２．OnCompleteメソッド

　OnCompleteメソッドも他のDoTweenメソッドに付随する処理です。この処理はコールバック処理になっており、一緒に処理しているメインのメソッドの処理の終了を待ちます。
その処理が終了してから、このOnCompleteメソッドの中に記述した処理を実行してくれます。

　今回はtransform.DOScaleメソッドによって元の大きさに的球が戻った後に、OnCompleteメソッドの処理が実行されるようになっています。
そのため、的球が画面に表示され終わるのを待ってから、体力ゲージが動いて満タンになる、という設計になっています。

＜SliderのValueの値をDoTweenで制御する＞

　DoValueメソッドは Slider コンポーネントに対して使用できるメソッドです。
その名前の通り、Sliderコンポーネントの持つ Value の値を補間処理を行ってくれます。

　第1引数には最終的な Value の値を入れます。この値に対して、第2引数の時間をかけて値を変更します。
そのため、計算結果の値になるまでに 0.5秒かけて Value の値を変更しています。

  hpSlider.DOValue((float)hp / maxHp), 0.5f);

＜キャスト処理＞

　今回のケースでは、 hp の値を maxHp で割って float型にキャスト(型変換)した値(0.0f - 1.0f)を Value の値としています。
Value の値は float 型ですので、int型である hp と maxHp の計算結果はそのままでは使えないため、ここではキャストを行っています。

　キャストとは型変換の処理のことです。今回はint型を変換していますが、他の型での変換も、型同士の変換処理はキャストと呼ばれます。
他にもよく使用している処理があります。それがToStringメソッドです。これはint型などの数字を扱う型を文字列であるstringに変換している処理です。

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

　ゲームを実行して動作を確認します。的球が出現したあとに体力ゲージが空から満タンになるアニメ演出が追加されていれば成功です。
また、手球と接触した際にも体力ゲージがアニメしながら動いていけば問題ありません。両方確認しましょう。

実行動画①　的球が出現してから、体力ゲージがアニメ演出しながら空から満タンになる
https://gyazo.com/04b729f1b1a86a13df175e52e677c3db

実行動画②　手球と接触した際に体力ゲージがアニメしながら減少する
https://gyazo.com/bc71d7a99d8b054244fb179263ed96f9

＜処理を書く場所について＞

　OnCompleteメソッド内に記述している処理を、OnCompleteメソッドから出して、次の行に書いてみましょう。
敵の体力ゲージのアニメ演出に違いが出ます。

　

　　sequence.Join(transform.DOScale(startScale, 0.15f).SetEase(Ease.InCirc).OnComplete(() => {
         
        // 体力の最大値を代入
        maxHp = hp;

        // 体力ゲージの表示を更新 => 的球が出現してからゲージが徐々に満タンになるアニメ演出
        UpdateHpGauge();
　　}));

　処理の書く場所を変更する　↓

　　sequence.Join(transform.DOScale(startScale, 0.15f).SetEase(Ease.InCirc));

    // 体力の最大値を代入
    maxHp = hp;

    // 体力ゲージの表示を更新 => 的球が出現してからゲージが徐々に満タンになるアニメ演出
    UpdateHpGauge();

検証動画　処理の書く場所を変えると？
https://gyazo.com/d502512106d174e55afeeff23cb8f80f

　処理を書く場所を変えると、的球が出現するとすでに体力ゲージが満タンの状態です。先ほどとは挙動が異なります。

　これは何故でしょうか。

　OnCompleteメソッドでは、Joinメソッド内のDoTweenの処理が終了するのを待ってから、OnCompleteメソッド内にある処理を実行しています。
つまり、的球が画面に出現するのを待って、体力ゲージの表示を更新しています。そのため、的球が出現してから体力ゲージが動きます。

　書き換えた処理には、この「処理が終わるまで待つ」という処理がありません。
つまり、Joinメソッドが実行されたあとは、すぐに体力ゲージの表示を更新する処理を行います。
そのため、的球が出現する頃には体力ゲージが動き終わっていて、すでに満タンになっているためです。

　
　このように、同じ処理であっても、記述する場所の内容によって大きく処理が異なってきます。
自分が考えている処理がどのような処理であるかを把握して、それをどこに書くべきか考え、適切な場所にコードを書きこんでいくことが大切になります。　

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

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

おはじきゲーム　手順１０ - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school