ひつじコレクション - 11. UIの作成（2）

[ミニゲームを作ってUnityを学ぶ！[ひつじコレクション編]](https://qiita.com/YzRoid/items/8dfd6c168b916ac82a0d)
###**第11回目: UIの作成（2）**

前回はDotweenを使ってUIにTweenアニメーションを設定しました。
引き続き残っているその他UIを作成し、併せてゲームに時間制限を実装します。

#スコアを表示する
今まではログ出力で対応していたゲーム内のスコアを画面左上に表示します。

+ Canvas内に新しいText「TextScore」を作成
+ TextのColorを<font color="blue">(R=255, G=255, B=255, A=255)</font>に変更
+ AddComponentからShadowコンポーネントを探してアタッチ
+ Textの赤枠部分とポジションを以下のように設定

![action_sheep_ss_11_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/3ea9c29a-4bfa-13d2-7a32-706faae31c45.jpeg)


+ TextScoreのアクティブのチェックを外して非表示の状態にする
+ UiManagerに対応するコードを追加

```cs:UiManager;

        public void LoadUi()
        {
            mCenterPanel.gameObject.SetActive(true);
            mCenterText.DOFade(0.1f, 1.2f).SetEase(Ease.InCubic).SetLoops(-1, LoopType.Yoyo);
追加        mScoreText.gameObject.SetActive(true);
        }

        //-----------------
        // スコアテキスト //
        //---------------------------------------------------------------------------------

        [SerializeField]
        private Text mScoreText; // TextScoreを指定

        public void renewScore(int i)
        {
            mScoreText.text = "SCORE: " + i;
        }

```

+ PlayerActionのスコアに関する部分を修正

```cs:PlayerAction.cs;

        /// <summary>
        /// ゴールエリアに到達。
        /// 引き連れているフォロワー数によって点数を獲得。
        /// 
        /// 1匹が100点、2匹以上の場合はそれぞれ100点のボーナスが加算されていく
        /// 1匹目:100, 2匹目:200, 3匹目:300, 4匹目:400 = 最大で1000
        /// </summary>
        private void ReleaseFollower()
        {
            if (mFollowerList.Count <= 0) return;

            int score = 0;
            int index = 0;
            foreach (FollowerModel model in mFollowerList)
            {
                // スコア計算
                score += index * 100 + 100;
                index++;

                // フォロワーを休眠状態へ
                model.Sleep();
            }

            // スコア加算
            GameController gameCon = GameController.Instance;
            Scorer scorer = gameCon.Scorer;
            scorer.AddScore(score);
変更:       gameCon.UiManager.renewScore(scorer.Score);

            // 速度設定
            mFollowerList.Clear();
            mSpeed = MAX_SPEED;
        }

```

PlayerActionではスコアをログ出力していた部分を修正し、TextScoreの描画を更新するように設定しています。

![action_sheep_ss_11_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/771ebc26-70b6-2f2b-5722-577291082116.jpeg)


これでスコアが画面に表示されるようになりました。

#操作方法を表示する
続いて、画面下部にゲームの操作方法を表示します。

+ canvas内に新しいPanel「PanelBottom」を作成
+ ImageのColorを<font color="blue">(R=0, G=0, B=0, A=200)</font>に変更
+ PanelBottomのポジションやサイズを以下のように設定

![action_sheep_ss_11_3.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/2626b968-e4bf-bd22-bd26-866a12fd9fbf.jpeg)

+ PanelBottom内に新しいTextを作成
+ TextのColorを<font color="blue">(R=255, G=255, B=255, A=255)</font>に変更
+ Textの赤枠部分とポジションを以下のように設定

![action_sheep_ss_11_4.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/bbd989af-86a7-d090-352c-c1588c04978f.jpeg)

<pre>
[ W ]  Up       [ S ]  Down       [ A ]  Left       [ D ]  Right      [ BackSpace ]  Restart 
</pre>

+ PanelBottomのアクティブのチェックを外して非表示の状態にする
+ UiManagerに対応するコードを追加

```cs:UiManager;

        public void LoadUi()
        {
            mCenterPanel.gameObject.SetActive(true);
            mCenterText.DOFade(0.1f, 1.2f).SetEase(Ease.InCubic).SetLoops(-1, LoopType.Yoyo);
            mScoreText.gameObject.SetActive(true);
追加        mBottomPanel.gameObject.SetActive(true);
        }

        [SerializeField]
        private Image mBottomPanel; // PanelBottomを指定

```

![action_sheep_ss_11_5.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/db069283-0ad0-e375-bd6e-ec8a6863c39b.jpeg)

#ゲームオーバーを表示する
さらに続いて、プレイヤーがチェイサーに接触した際のゲームオーバー表示を実装します。

+ Canvas内に新しいText「TextGameOver」を作成
+ TextのColorを<font color="blue">(R=255, G=255, B=255, A=255)</font>に変更
+ Shadowコンポーネントをアタッチ
+ TextとShadowの赤枠部分とポジションを以下のように設定

![action_sheep_ss_11_6.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/848faef3-43c1-045e-7990-fe0533dbed86.jpeg)

+ TextGameOverのアクティブのチェックを外して非表示の状態にする
+ UiManagerとSceneMainを修正

```cs:UiManager.cs;

        //------------------------
        // ゲームオーバーテキスト //
        //---------------------------------------------------------------------------------

        [SerializeField]
        private Text mGameOverText; // TextGameOverを指定

        public void ShowGameOverText()
        {
            mGameOverText.gameObject.SetActive(true);
        }

```

```cs:SceneMain;

        void Update()
        {
            CheckBackspaceInput();

            switch (mState)
            {
                // ステージの生成
                case STATE.LOAD_STAGE:
                    mGame.StageManager.LoadStage(1);
                    mGame.UiManager.LoadUi();
                    mState = STATE.WAIT_ENTER_KEY;
                    break;
                // Enter入力でゲームを開始
                case STATE.WAIT_ENTER_KEY:
                    if (WaitEnter())
                    {
                        mGame.UiManager.HideCenterMsg();
                        mGame.StageManager.StartGame();
                        mState = STATE.PLAY;
                    }
                    break;
                // プレイ中
                case STATE.PLAY:
                    if (mGame.IsGameOver)
                    {
追加                    mGame.UiManager.ShowGameOverText();
                        mState = STATE.GAME_OVER;
                    }
                    break;
            }
        }

```

![action_sheep_ss_11_7.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/15975fd1-6f18-1894-e554-3e55084de0c3.jpeg)

#時間制限を実装する
最後に、ゲームに時間制限を実装してそれに対応するUIを作成します。

+ Canvas内に新しいText「TextTime」を作成
+ TextのColorを<font color="blue">(R=255, G=255, B=255, A=255)</font>に変更
+ Shadowコンポーネントをアタッチ
+ Textの赤枠部分とポジションを以下のように設定

![action_sheep_ss_11_8.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/5765624f-1b4f-3144-9b58-1c5555ec4058.jpeg)

+ TextTimeのアクティブのチェックを外して非表示の状態にする
+ UiManagerにコードを追加

```cs:UiManager.cs;

        public void LoadUi()
        {
            mCenterPanel.gameObject.SetActive(true);
            mCenterText.DOFade(0.1f, 1.2f).SetEase(Ease.InCubic).SetLoops(-1, LoopType.Yoyo);
            mScoreText.gameObject.SetActive(true);
            mBottomPanel.gameObject.SetActive(true);
追加        mTimeText.gameObject.SetActive(true);
        }

        //-----------------
        // タイムテキスト //
        //---------------------------------------------------------------------------------

        [SerializeField]
        private Text mTimeText;

        public void RenewTime(int i)
        {
            mTimeText.text = "TIME: " + i;
        }

        public void ChangeTimeTextColorIntoRed()
        {
            mTimeText.color = new Color(1.0f, 10.0f / 255.0f, 0.0f, 1.0f);
        }

```

+ StageManagerにスコアに関するコードを追加

```cs:StageManager.cs;

        public void StartGame()
        {
            // 制限時間を設定
追加        mRestTime = 100;

            // プレイヤーとチェイサーの行動開始
            mConstructor.OnActivePlayer();
            mConstructor.OnActiveChaser();

            // コルーチンを開始
            StartCoroutine("PopupFollower");
追加        StartCoroutine("CountDown");
        }

        //------------
        // 制限時間 //
        //---------------------------------------------------------------------------------

        private int mRestTime;

        private IEnumerator CountDown()
        {
            while (true)
            {
                yield return new WaitForSeconds(1.0f);

                // 制限時間終了でプレイヤーをダウン状態へ遷移 → それによってEndGameが呼ばれる
                mRestTime--;
                if (mRestTime <= 0)
                {
                    mRestTime = 0;
                    GameController.Instance.UiManager.RenewTime(mRestTime);
                    mConstructor.Player.GetComponent<PlayerAction>().OnDown();
                    yield break;
                }

                // 残り時間10秒になったときにテキストの色を赤に変更する
                if (mRestTime == 10) GameController.Instance.UiManager.ChangeTimeTextColorIntoRed();
                GameController.Instance.UiManager.RenewTime(mRestTime);
            }
        }

```

ゲームスタートと同時にカウントダウンのコルーチンを開始し、残り時間が0秒になったタイミングでユニティちゃんのダウンアニメーションを開始。
ダウンアニメーションには以前にアニメーションイベントを設定していますので、最終的にはStageManager#EndGame()が呼ばれることでゲームオーバーの処理が行われます。

![action_sheep_ss_11_9.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/38d058b9-4266-cf72-7265-ce04fd9c1181.jpeg)





---
[次のページに進む](https://qiita.com/YzRoid/items/8acd300a5a738e189450)
[イントロダクションに戻る](https://qiita.com/YzRoid/items/8dfd6c168b916ac82a0d)
<BR>
<div><img src="http://unity-chan.com/images/imageLicenseLogo.png" alt="ユニティちゃんライセンス"><p>この作品は<a href="http://unity-chan.com/contents/license_jp/" target="_blank">ユニティちゃんライセンス条項</a>の元に提供されています</p></div>
<Br><Br>