　ゲーム制作　　 Unity ソフトウエア　

Unity ソフトウエアでゲーム制作#1モグラたたき編（23.シンプルなアニメのカウントダウン）

2024-12-06

本投稿は2024年9月時点の内容になります。アップデートにより変更となる場合があります。また環境によって違いがあると思いますのであくまで参考として、ご了承ください。

様々な書籍、ブログや動画を参考にさせていただきました。多すぎて一つ一つはｔお紹介できませんが感謝です。

初心者の自分がUnity ソフトウエアでゲームを作ってみました。とりあえずシンプルなものということでモグラたたきに挑戦です。ゲーム作ってみるかという感じになったときに、いいタイミングで某ゲームのイベントシナリオ内ミニゲームにモグラたたきが実装されていたのでUIとかエフェクトとか、諸々の仕様を~~ぱくって~~参考にして作ってみましたよ。様々なHowToの中の選択肢のひとつとして、同じ初心者さんの参考になればよいです。

今回も必須です。カウントダウンを実装してみます。

今回はカウントダウンを実装します。

カウントダウンはTime.Deltatimeを使ってスクリプトを中心に実装する方法もありますが、今回はアニメーションを使って実装したいと思います。ついでにUnityで簡単なアニメーションを作る方法も解説します。

連続画像を使ったアニメーションの解説「8.連続画像からアニメーション作る」もチェックしてみてください。

本記事のポイント

シンプルなアニメーションを使ったカウントダウンの作り方
ゲームオブジェクトに簡単なアニメーションをつける方法

カウントダウンに必要な素材を用意する

カウントダウンに使う素材をTextMeshProなど用意します。

設定するところが多いですが、あくまでも一例なので自分好みに作ってもらってOKです。ヒエラルキーの構成が同じになっていれば大丈夫です。

カウントダウンの実装例（その１オブジェクトの準備）

ヒエラルキー上に、Canvas「CountDown」を作成します。Canvasの設定は「UI」を作ったときを参考にしてください。新たに「ソートレイヤー」で一番手前になるように「CountDown」レイヤーを作成して設定します。
「CountDown」の子にパネル「CountDownPanel」を作成します。アンカープリセットを「Strech,Strech」に、Colorは「0，0，0，240」にしました。
「CountDown」の子に空のオブジェクト「CountDown3」を作成します。アンカープリセットを「Middle，Center」、幅を「500」高さを「500」、子要素のアルファをまとめて変更したいのでCanvasGroupコンポーネントを追加。
さらにその子にTextMeshProの「CD3Phrase」と「CD3Numeral」を作成。
「CD3Numeral」は文字を「3」、アンカープリセットを「Bottom,Center」、幅を「300」、高さを「350」に、フォント「HyperStiffRoundBootiedOpossumRegular」、フォントサイズ「280」、フォントスタイル「Bold」、アライメント「Right」「Midline」、グラデーションは「Vertical」で「＃EC1200FF」「＃F4C900FF」。アウトラインはカラー「0，1，10，255」で太さ「0.15」、アンダーレイ（ドロップシャドウ）はカラー「0，1，10，255」、オフセットX「0.5」、オフセットY「-0.5」、グローはカラー「255，140，180，100」、オフセット「-0.15」、インナー／アウター「0.05」、パワー「0.75」。※マテリアルを作成してからの設定がおすすめ。マテリアルの作成方法こちら。
「CD3Phrase」は文字を「READY」、アンカープリセットを「Top,Center」、幅を「500」、高さを「100」に、フォント「HyperStiffRoundBootiedOpossumRegular」、フォントサイズ「96」、フォントスタイル「Bold」、アライメント「Center」「Midline」、グラデーションは「Vertical」で「＃FFF900FF」「＃428E00FF」。マテリアルは上記と同じものを使用。
複製して「CountDown2」（文字は「2」「GET」）、「CountDown1」（文字は「1」「SET」）、「CountDownGO」（文字は「GO」［設定は数字と同じ］）を作成します。
TextMeshProの見た目と、最終的なヒエラルキーの構成は上記を参考に
CanvasGroupコンポーネントのアルファを「0」のしておきます。

カウントダウンのアニメーションをつける

カウントダウンの実装例（その２カウントダウンのアニメをつける）

Canvas「CountDown」に「アニメーター」コンポーネントを追加します。
「ウィンドウ」＞「アニメーション」＞「アニメーション」をクリック
開いたアニメーションウィンドウで「作成」クリック　任意の名前で任意の場所に保存します。今回は「CountDown」という名前にしました。
これでアニメーション作成の準備ができました。赤い録画ボタンをクリックするとアニメーション作成が始まります。白線（再生ヘッド）と数字が現在のフレームです。アニメを追加したいフレームに持って行って対象のオブジェクトのプロパティを変更するとアニメーションが作られていきます。フレーム間はUnity のアニメーションが補完してくれます。イメージと違う場合は手動で変更していきます。「サンプル」の数字は1秒当たりのフレーム数になります。カウントダウンなので60フレーム毎を基本に作っていけば良さそうです。実際に作ってみます。
赤いボタンをクリックして録画開始します。
再生ヘッドを60フレーム目に移動させて「CountDown3」の「CanvasGroup」の「アルファ」を「1」にします。ダイヤマーク（キー）が追加されて、消えていたCountDown3がシーン上に表示されたと思います。
再生ヘッドを0から60へ動かしていくと「CanvasGroup」の「アルファ」の数字が補間されていて、フェイドインしていくのがわかります。今回はフェイドインではなく60で表示させたいので変更していきます。
再生ヘッドを59に移動、「ダイヤと+」（キーフレームを追加）をクリックしてキー作成します。「CanvasGroup」の「アルファ」を0変更すると保管されていた部分も0になると思います。
この後スケールも変更したいので再生ヘッドを60に移動して「プロパティを追加」＞「CountDown3」＞「RectTransform」＞「スケール」＞「+」をクリックしてプロパティを追加します。
再生ヘッドを100に移動して「CanvasGroup」の「アルファ」を「0」、「RectTransform」のスケールX/Yそれぞれ「1.5」にします。
再生ヘッドを動かして確認すると拡大しながらフェードアウトしていくと思います。
同じ要領で「CountDown2」、「CountDown1」、「CountDownGO」にアニメーションを追加します。「CountDownGO」は拡大フェイドアウト無しで270フレームまで維持にしました。（演出に迫力がなかったので「GO」の文字はスケール1.5倍で維持にしました）
「CountDownPanel」は徐々に透明になるようにアニメーションを付けます。ただし補間だけだとすぐ透明になったと感じてしまうのでキーを追加しながら調整します。
間違って追加したり、意図せずついてしまった、いらないキーは選択状態（ダイヤが青くなる）にして「delete」で削除できます。
作成し終わったら録画ボタンを再度クリック。再生ボタンを押して確認します。
修正したいときは再度録画ボタンを押して修正します。
アニメーションクリップ「CountDown」をクリックしてインスペクターで「時間でループ」のチェックを外します。

GameManagerからカウントダウンを開始する

カウントダウンを開始するメソッドを追加していきます。

カウントダウンの実装例（その３カウントダウンを開始するメソッドを追加）

「GameManager」にメソッドを追加していきます。
スクリプトの変更点は以下

class GameManager

public class GameManager : Singleton<GameManager> 

{
    public GameState CurrentGameState {  get; set; }
    public float PlayTime {  get; private set; }

    public EnemyManager EnemyManager { get;  set; }

    public void UpdateCurrentState(GameState newGameState)
    {
        CurrentGameState = newGameState;
        switch (newGameState)
        {
            case GameState.none:
                Gamestart();
                Time.timeScale = 0f;
                break;

            case GameState.gamestart:
                Gamestart();
                Time.timeScale = 0f;
                break;

            case GameState.activate:
                ActivateGame();
                Time.timeScale = 1.0f;
                break;

            case GameState.active:
                Time.timeScale = 1.0f;
                break;
                
            //省略
        }

    }
    //ステータスをactivateにする処理を削除
    private void Gamestart()
    {
        //プレイタイムのリセット
        PlayTime = 0;
    }

    private void ActivateGame()
    {
        EnemyManager.StartRepeatSpawnEnemy();
        UpdateCurrentState(GameState.active);
    }
    // 省略
    
  
}

スクリプトざっくり解説

（40-41）スタート直後にスポーンが始まらないようにステータスをactivateにする処理を一旦削除（スポーンは後述のカウントダウン終了後の処理で行います）

ゲーム再生します。アニメーションされなくてうまくいかないはずです。

アニメーションが動かない理由は「timescaleが０」でゲーム時間が止まっているからです

アニメーションが動かない理由

timescaleが０だと通常のアニメーションも止まってしまう

これ、止まってしまうのは「通常」のアニメーションというところがポイントです。ポーズ中とかゲームの進行が止まっていてもUIを動かしたりしたいときは多いですよね。Unity プロジェクトはこの辺も当然解決策を用意してくれています。

timescaleが０でもアニメーションを動かす方法

timescale０でアニメーションする方法はものすごく簡単です。

timescaleが０でもアニメーションを動かす方法

Animatorコンポーネントの「更新モード」を「スケールされてない時間」に変更する

これだけです。ゲームオブジェクト「CountDown」のAnimatorコンポーネントの「更新モード」を「スケールされてない時間」に変更します。

ゲーム再生します。カウントダウンのアニメーションが今度は動いたと思います。

あとはカウントダウン終了後に自身を非アクティブ化して、敵のスポーンに移行するようにアニメーションにイベントをつけていきます。

アニメーションイベントで自身を非アクティブ化

カウントダウンの実装例（その４カウントダウン終了の処理）

スクリプト「CountDown」を作成してゲームオブジェクト「CountDown」にアタッチ
スクリプトの変更点は以下

class CountDown

public class CountDown : MonoBehaviour
{
    public void CountDownEnds()
    {
        GameManager.Instance.UpdateCurrentState(GameState.activate);
        gameObject.SetActive(false);
    }
    
}