ミニゲームを作ってUnityを学ぶ！[ひつじコレクション編]
###第11回目: UIの作成（2）

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

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

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

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

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のスコアに関する部分を修正

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の描画を更新するように設定しています。

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

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

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

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


[ W ]  Up       [ S ]  Down       [ A ]  Left       [ D ]  Right      [ BackSpace ]  Restart

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

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を指定

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

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

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

UiManager.cs;


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

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

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

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;
            }
        }

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

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

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

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にスコアに関するコードを追加

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()が呼ばれることでゲームオーバーの処理が行われます。

次のページに進む
 イントロダクションに戻る

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