Unity:クリッカーゲームを作ってみたい/09-エンディングを作成する - 節電鯖民の遊び場

目次

できたもの

前提

• Unity:クリッカーゲームを作ってみたい/08-音楽や音を鳴らすの続き

素材集め

詳細を開く

• とりあえずの背景を用意
  • 和風背景　桜１ https://commons.nicovideo.jp/material/nc112046
    • 利用許可範囲：インターネット全体に許可
    • 営利利用：営利利用可能

エンディング用のキャンバスとコントローラーのオブジェクトを用意する

詳細を開く

画面の構成

• Ending画面を画像のような形式とした。
• この時、キャンバス自体はマウスの判定等の影響が出ないようにプレイ中は無効化しておく。
  • そのため、制御用の EndingController 空オブジェクトを作成し、その中にCanvasを配置した。

• Canvas 内にはそれぞれ、複数の文字と背景画像、茜ちゃんと葵ちゃんの画像を配置する。
• この時、文字については Canvas Group コンポーネントを付けた image オブジェクトの配下に設置している。
  • これにより、image の Canvas Group コンポーネントの Alpha 値制御により、全ての文字の透明度を変更できる。

設定

• Canvas(エンディング用 Canvas)
  • Canvas
    • Render Mode を Screen Space - Camera に設定することで、Canvas Scaler との組み合わせで画面にフィットするように
    • Render Camera にはメインカメラを設定
    • Order in Layer は、全ての手前に来るように他の Canvas や スプライト画像より大きい値に設定する。(これは文字列を表示する Canvas Group の表示オーダーになる)
  • Canvas Scaler
    • 背景画像をスクリーンにフィットさせるため UI Scale Mode を Scale With Screen Size に設定
• 背景画像
  • strech/strech のアンカー設定で、画面を覆う Scale に設定
  • Order in Layer は、他のCanvas や スプライト画像より大きく、かつエンディング用 Canvas の値(文字列用)より小さくする。
• 茜ちゃん/葵ちゃん
  • Order in Layer を一番大きくする。重なり具合によっては文字列より下げても良い。
  • 文字と重ならないようなアンカー設定にする
    • ここでは right/bottom として、どのサイズでも被りづらいように設定した
• Image(Canvas Group)
  • strech/strech の設定
• Image 配下の文字列
  • 左端の真ん中を維持してほしいため、それぞれ strech/middle 設定としている。

設定まで完了したら一旦透明化する

• Image は Canvas Group の Alpha を 0 に設定して透明化する
• 背景/茜ちゃん/葵ちゃんのスプライトは Sprite Renderer の Color の色設定から A の値(アルファ値)を 0 (透明)に設定する。

エンディング画面を表示するアニメーションを作成する

詳細を開く

徐々に表示されたり、文字の位置を変動させるアニメーションを作成

• Canvas を選択して、Animation ウインドウを開いてアニメーションの作成を開始する。
• Ending 画面を徐々に表示するアニメーションを作成する。
  • Image : Canvas Group : Alpha
  • 背景画像/茜ちゃん/葵ちゃんそれぞれの Sprite Renderer : Color の Color.a
  • おまけで文字は少しスライドして動かすため Anchored Position もアニメーションさせている。
  • 今回は使用していないが、茜ちゃん/葵ちゃんを回転アニメーション等させたい場合もこのエンディングアニメーションか、別途回転アニメーションを作成して追加するなどしても良い。

アニメーション制御の設定をする

• アニメーションコントローラーに対して、Animator で Ending に遷移する制御を実施する。
  • 今回は表示後は、Canvas ごと無効化して表示を削除するため、アニメーションは表示のみとしている。
  • Trigger は gameEnd トリガーを作成して設定した。

ついでにエンディング画面を消すアニメーションも追加して、制御も追加しておく。

• 省略
  • アルファ値をどんどん上げるアニメーションにしておく
  • ここでは cleseEnding トリガーで消す動作となるようにした。

エンディングの制御を行う (表示 → 一定時間後に非表示)

詳細を開く

• 1000 カウントでエンディング画面を 10 秒だけ表示して消す制御を実施する。
• EndingController オブジェクトに EndingController スクリプトを作成してアタッチする。
• EndingController オブジェクトは GameController の Counter Receivers リストに登録しておく。

using System;
using System.Collections;
using UnityEngine;
 
public class EndingController : MonoBehaviour, ICounterReceiver
{
    public GameObject canvasObject;
    Canvas canvas;
    Animator anime;
    AudioSource endAudio;
 
    void Start()
    {
        canvas = canvasObject.GetComponent<Canvas>();
        anime = canvas.gameObject.GetComponent<Animator>();
        endAudio = gameObject.GetComponent<AudioSource>();
    }
    public void UpdateCounter(int count) {
        // 数値変動に応じてアニメーションする
        if (count == 1000) {
            canvasObject.SetActive(true);
            anime.SetTrigger("gameEnd");
            // 10 秒後に close Ending を再生しエンディング画面を消す
            StartCoroutine(DelayCoroutineSeconds(10f, () => {  
                anime.SetTrigger("closeEnding");
                // その３秒後に canvas ごと無効化しておく
                StartCoroutine(DelayCoroutineSeconds(3f, () => {
                    canvasObject.SetActive(false);
                }));            
            }));            
        }
    }
    private IEnumerator DelayCoroutineSeconds(float interval, Action action)
    {
        yield return new WaitForSeconds(interval);
        action?.Invoke();
    }
}
 

最後に、Canvas を無効化しておく