【Unity】スライダーを用いたタイマー機能の実装 (00:00の形)

2021年10月19日 17:28

今回参考にさせていただいた資料はありません．
主に #15, #17 を元に作成していきます. [1] [2]

□ 説明＆環境

【説明】
資料を参考にして，
勉強になった点 → POINT!
失敗した点→ ERROR!
補足した点 → ADD!
と表記しています．

【環境】
MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports)
HUAWEI nova lite3
Unity 2020.3.15f2 LTS
※ Unity内の画面レイアウトは異なるかもしれません．

□ 完成図

今回は以下のようなタイマーを実装していきたいと思います．
（#15 と # 17 の組み合わせです．gif汚くてごめんなさい．）

量が多くなってしまうので，

#18 は，実装
#19 は，プログラム (C#) の解説

でいきたいと思います．

□ 準備

今回したいことは，
#15 のシーン，スクリプトをベースに
#17のコードの一部を取り入れていきます．

#15 ではデフォルトのまま使っていたので，まずは画面を綺麗に整えていきたいと思います．

やったことは4つ．
1. Text のサイズを変更，位置調整
2. Slider のサイズを変更，位置調整　(※1)
3. Button のサイズを変更，位置調整
4. 背景の変更

（※1） Slider の大きさ変更について
Slider はこのような構成で作られています．

1. メモリを長くする
Slider > Width > 変更
（Height を変更すると縦に伸びたようになるので変更しない方がいい！）

4のコピー

2. ハンドルを大きくする
Handle Slide Area > Handle > Scale X, Y を変更

5のコピー

3. ゲージを太くする
Background > Scale Y を変更

6のコピー

画面の設定は以上で終了です．

次にC#スクリプトの作成をしていきたいと思います．
#15 のコードを元に

追加したところ　 //add
消去したところ　//delite

と記入しています．

(Timer3.cs)

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


public class Timer3 : MonoBehaviour
{


   float t = 0;
   //add (public)
   public Text txt;
   Slider slider;


   void Start()
   {
       txt = (GameObject.Find("Text")).GetComponent<Text>();
       slider = (GameObject.Find("Slider")).GetComponent<Slider>();
       slider.maxValue = 180.0f;
   }
   bool a;


   void Update()
   {
       if (!a)
       {
           t = slider.value;
           //add
           float minutes = Mathf.FloorToInt(t / 60);
           float seconds = Mathf.FloorToInt(t % 60);
           txt.text = string.Format("{0:00}:{1:00}", minutes, seconds);

       }
       else
       {
           t -= Time.deltaTime;
           if (t < 0) { a = false; t = 0; }
           //add
           DisplayTime(t);
       }
       //delite
   }


   public void Click()
   {
       a = true;
   }


   //ad
   void DisplayTime(float timeToDisplay)
   {
       timeToDisplay += 1;

       float minutes = Mathf.FloorToInt(timeToDisplay / 60);
       float seconds = Mathf.FloorToInt(timeToDisplay % 60);

       txt.text = string.Format("{0:00}:{1:00}", minutes, seconds);
   }


}

□ 実装

準備が完了したら，反映させていきたいと思います．

Canvas > Timer3 (C# script) > Add Component にドラッグ&ドロップ

7のコピー

Text > Timer3 (C# script) > Add Component にドラッグ&ドロップ
Txt > Text をドラッグ&ドロップ

8のコピー

Button > On Click() の＋を押す > Canvas をドラッグ&ドロップ
No Function > Timer3 > Click () を選択

9のコピー

ERROR!
On Click() で表示されない時

表示されない理由は，On Clickに C#スクリプト を直接入れているから！

9のコピー2

C#スクリプトが入っているCanvas を OnClick に入れると上手く表示されました！

個人的に何度も同じミスを繰り返しているところでもあるので注意が必要だと思いました．

反映が終わり実行してみると，

上手くいきました！
5分単位などでできるようになれば尚良い．．

□ まとめ

今回は，プログラムの意味を理解しないとできなかったのでなかなかハードでした．
上手くいってよかったです．
次回はプログラムの解説をしていきたいと思います．

21/10/19

【Unity】 スライダーを用いたタイマー機能の実装 (00:00の形)

□ 説明 ＆ 環境