今回はアニメーションを使ってカウントダウンを表示します
以前X軸を中心にオブジェクトを回転させる例としてカウントダウンの表示をしました
everydayisagoodday.hatenadiary.com
この時はスクリプトで表示も表示のタイミングも指示していました
今回はこれをアニメーションで行います
スクリプトもアタッチしますが これはカウントダウンを開始するタイミングを得るのとカウントダウン終了後の表示を変更するためです
カウントダウン自体はスクリプト無しでできます
1.ヒエラルキーの＋をクリックし UI/画像を選択
2.位置横の四角をクリック
アンカープリセットのcenter/middleをAltキーを押しながらクリック
3.位置と大きさを調整して画像をアタッチ
4.オブジェクトの名前をCircleに変更
ヒエラルキーのCircleを右クリックしてUI/画像を選択
5.オブジェクトの名前をCountに変更
アンカープリセットのcenter/middleをAltキーを押しながらクリック
6.位置と大きさを調整して画像をアタッチ
7.CircleオブジェクトのImageコンポーネントの画像タイプを塗りつぶし
塗りつぶす方法をRadial 360 塗りつぶし起点を上に設定
8.Circleオブジェクトを選択した状態でウィンドウ/アニメーション/アニメーションを選択
9.作成をクリック
10.AnimationフォルダーにCountDownという名前で作成
11.プロパティを追加をクリックしImage/Fill Amountの横の＋をクリック
12.サンプルを180にし
0の時FillAmount 0 60の時FillAmount 1 61の時FillAmount 0 120の時FillAmount 1 121の時FillAmount 0 180の時FillAmount 1に設定
カーブのタブをクリックして確認 こんな感じになっていればOK
13.再びプロパティを追加をクリックしCount/Image/Spriteの横の＋をクリック
14.60の所に2の画像を 120の所に1の画像をドラッグ＆ドロップ
15.サンプルを60に戻して閉じる
16.AnimationフォルダーのCircleアニメーターをダブルクリック
アニメーターの何も無いところを右クリックし ステートの作成/空を選択
17.作成されたステートの名前をIdleに変更 右クリックしてレイヤーデフォルトステートとして設定するを選択
18.パラメータータブの＋をクリックしてTriggerを追加
19.Idleを右クリックして遷移を作成を選択
20.CountDownに線をつなげて インスペクターのConditionsの＋をクリックしてTriggerを設定
21.Scriptフォルダーを右クリックして 作成/C#スクリプトを選択 DispStartという名前にする
22.DispStartを編集
using UnityEngine;
public class DispStart : MonoBehaviour
{
[SerializeField] GameObject image;
private bool isStart = false;
// Start is called before the first frame update
void Start()
{
image.SetActive(false);
}
private void Update()
{
if (Input.GetKeyDown(KeyCode.Space) && !isStart)
{
GetComponent<Animator>().SetTrigger("Trigger");
isStart = true;
}
}
public void Display()
{
image.SetActive(true);
this.gameObject.SetActive(false);
}
}
23.スクリプトをCircleオブジェクトにアタッチ
24.AnimationフォルダーのCountDownアニメーションをダブルクリック
時間を180にして▮₊をクリック
25.インスペクターのFunctionに先ほど作成したスクリプト内にあるDisplay()関数を設定
26.Canvasを右クリックし UI/画像を選択
27.アンカープリセットのstretch/stretchをAltキーを押しながらクリック
28.画像をアタッチ
29.CircleオブジェクトにアタッチしたDispStartスクリプトにImageオブジェクトをドラッグ＆ドロップ
長くなりましたが これで完成です
実行してスペースキーを押すとカウントダウンが開始されます
