Unity:クリッカーゲームを作ってみたい/05-マウスオーバーで表示されるメニューとSave＆Load機能をつける - 節電鯖民の遊び場

目次

できたもの

前提

• Unity:クリッカーゲームを作ってみたい/04-葵ちゃんが堆積するようにするの続き

素材集め

詳細を開く

• メニューウインドウを作るにあたって、枠を付けてみる
  • 洋風フレーム・装飾　A1 https://commons.nicovideo.jp/material/nc121822
    • 利用許可範囲：インターネット全体に許可
    • 営利利用：営利利用可能
    • その他付加細則あり
    • 素材のフレームのうち、角の部分を切り抜きAssetsに追加しておく。

マウスを載せたら展開するメニューを作る

詳細を開く

パネルの配置

• Canvas にウインドウになる Panel を配置する。
  • 色を変更する場合は、インスペクターから Image → Color で変更する
• 画面右側に少しだけ見えていて、マウスを載せたら展開するため左端に素材のフレームを載せる。
  • 一つは Sprite Renderer の設定でY軸反転して載せる。スケールをマイナス値にしても良い。
• 今後の拡張性を見越して、メニュー内部でスクロールができるよう UI → Scroll View を設置する
• Scroll View の Viewport → Content にスクロールさせたい文字やボタンを配置する
  • ここでは「めにゅー」の UI → Text (TextMeshPro) と UI → Button(TextMeshPro)

アンカーの設定はお好み

• Game 画面に見えている状態(パネルを展開した想定の位置)でウインドウサイズを変更してみて挙動を確認
• ここでの設定は以下
  • Panel は center/middle
  • 縁の素材は left/top と left/bottom
  • Scroll View / Viewport / Content は stretch/stretch
  • "めにゅー" の Text (TMP) は left/top
  • Save Button / Load Button と中の Text(TMP) は stretch/stretch

表示順序の制御

• カメラに映る表示順序は Canvas や素材 Sprite の Order in Layer の数値で調整する

その他の設定

• 他にも細かい挙動をインスペクターで設定する
• Button テキストの Auto Size
• Scroll View の Scroll Rect → Movement Type でスクロール挙動の調整等

展開/格納アニメーションを作る

• デフォルトのパネルの位置は格納している状態にする
• Panel を対象に、まずは展開アニメーションを作成する
  • 具体的な操作は Unity:クリッカーゲームを作ってみたい/01-茜ちゃんをクリックしてアニメーションさせる の回を参照のこと
    • 展開アニメーションなので、始点は格納された位置、終点は展開した位置になるようなアニメーションにする。
    • ここでは右端から左方向に展開するので Rect Transform の Anchored Position の x 座標を変化させる

• 続けて格納アニメーションを作成する

• Panel の Animator で 初期状態を空のState (ここでは Close に名前を変更している) に繋ぎ、その後 展開アニメーション → 格納アニメーション → 展開…となるように矢印を繋ぐ。
  • アニメーションの箱は Assets からドロップで追加できる
• Close からパネルの展開アニメーションに向かう矢印の設定は、open トリガー契機で、Has Exit Time 及び Fixed Duration のチェックは外し、Transition Duration の値は 0.5 、Interruption Source は Next に設定。

• パネルの展開アニメーションからパネルの格納アニメーションに向かう矢印の設定は、close トリガー契機で、Has Exit Time 及び Fixed Duration のチェックは外し、Transition Duration の値は 0.5 、Interruption Source は Next に設定。

• パネルの格納アニメーションからパネルの展開アニメーションに向かう矢印の設定は、open トリガー契機で、Has Exit Time 及び Fixed Duration のチェックは外し、Transition Duration の値は 0.5 、Interruption Source は Next に設定。

パネルにマウスを載せたら展開、パネルからマウスを外したら格納されるスクリプトを設定する

• パネルに Box Collider 2D を付け、コライダーのサイズをパネルと同じサイズに設定する。
• マウス検知制御用のスクリプトを付ける。

マウス検知をしてトリガー制御するスクリプト

• OnMouseEnter と OnMouseExit を実装する。
  • Enter はマウスが乗ったとき、Exit はマウスが離れた時の動作を記述する。

using UnityEngine;
 
public class MenuMouseOver : MonoBehaviour
{
    Animator anime;
    private void Start() {
        anime = gameObject.GetComponent<Animator>();
    }
    void OnMouseEnter()
    {
        anime.SetTrigger("open");
    }
    void OnMouseExit()
    {
        anime.SetTrigger("close");
    }
}
 

• 他にもRaycastを使用して検知する方法等も存在する
  • 検索キーワード "unity マウスオーバー Raycast"

セーブとロードのボタンを制御する

メニュー操作をする際には葵ちゃんが増えないようにする

詳細を開く

• セーブおよびロードをクリックした際に通常のクリック制御が実行されないようにフラグ制御する
• GameController に通常クリック可否のフラグを設ける
  • 単純なフラグ制御なので、public bool メンバにして直接設定/参照できるようにしておく
    • ここでは public bool clickable とし、初期値は true (クリック可) にする。

public class GameController : MonoBehaviour
{
    public static GameController instance;
 
    // カウンタの通知を受けるオブジェクトのリスト(インスペクターより登録)
    public List<GameObject> counterReceivers;
    int clickCount;
    public bool clickable;
 
    void Awake() {
～省略～
    void Start() {
        // オブジェクトを永続化
        DontDestroyOnLoad(gameObject);
        clickable = true;
    }
～省略～
 

• メニューを展開した場合には clickable を false に、格納したときは true に制御する。

public class MenuMouseOver : MonoBehaviour
{
    Animator anime;
    GameController gameCtrl;
    private void Start() {
        gameCtrl = GameObject.FindObjectOfType<GameController>();
        anime = gameObject.GetComponent<Animator>();
    }
    void OnMouseEnter()
    {
        anime.SetTrigger("open");
        gameCtrl.clickable = false;
    }
    void OnMouseExit()
    {
        anime.SetTrigger("close");
        gameCtrl.clickable = true;
    }
}
 

• 画面クリック時に、clickable が false の場合には何もしないで return で終了するようにする。
  • これにより、メニューを展開している間は葵ちゃんが増えなくなる

public class Click : MonoBehaviour
{
～省略～
    void Update() {
        if (!controller.clickable) {
            return;
        }
        if (Input.GetMouseButtonDown(0)) {
            anime.SetTrigger("click_cancel");
            anime.SetTrigger("click");
～省略～
 

カウンタ値を制御する共通処理を実装する

詳細を開く

• GameController が保持するカウンタ値を設定/取得できる関数を追加する
  • 設定時にはカウンタ値を監視している機能に通知をする必要がある
    • 既存のカウンタ値をインクリメントする機能と共通化するため、通知処理はnotyfyCount関数として分離し、設定やインクリメント時に呼び出すように変更する。

～省略～
    void Start() {
        // オブジェクトを永続化
        DontDestroyOnLoad(gameObject);
        clickable = true;
    }
    void notifyCount(int count) {
        // 指定されたカウント値を、登録オブジェクト全てに通知
        foreach (GameObject obj in counterReceivers) {
            ICounterReceiver receiver = obj.GetComponent<ICounterReceiver>();
            if (receiver != null) {
                receiver.UpdateCounter(count);
            }
        }
    }
    public void IncrementCount() {
        // カウンタをインクリメントして、登録オブジェクト全てに通知
        clickCount++;
        notifyCount(clickCount);
    }
    public void SetCount(int count) {
        // 設定されたカウンタ値を、登録オブジェクト全てに通知
        clickCount = count;
        notifyCount(clickCount);
    }
    public int GetCount() {
        // カウンタ値を返却
        return clickCount;
    }
}
 

セーブの動作を実装する

詳細を開く

• Save用のスクリプトを作成し、Save用の Button オブジェクトにコンポーネント追加する。
• Save用のスクリプトを記述する
  • ここでは、簡易な保存方法として PlayerPrefs への保存/読み込みを実施する。
  • セーブを実施した旨は、カウンタ表示用テキストに追記する

using UnityEngine;
using TMPro;
 
public class Save : MonoBehaviour
{
    GameController gameCtrl;
    TextMeshProUGUI tmp;
 
    void Start()
    {
        gameCtrl = GameObject.FindObjectOfType<GameController>();
        tmp = GameObject.FindObjectOfType<CounterTextController>().gameObject.GetComponent<TextMeshProUGUI>();
    }
    public void OnClick() {
        PlayerPrefs.SetInt("Count", gameCtrl.GetCount());
        PlayerPrefs.Save();
        tmp.text += "(せーぶしました)";
    }
}
 

• ボタンクリックで OnClick() 関数が呼び出されるようにインスペクターで設定する。
  • ボタンのイベントを ＋ ボタンで増やし、オブジェクトとしてヒエラルキーウインドウから Save用の Button をドラッグしてきてドロップする。
  • 呼び出される関数として、Save スクリプトの OnClick() を選択する。

ロードの動作を実装する

詳細を開く

• 葵ちゃんの数を調整するのは、今後のことも考慮してGameControllerに実施してもらう。
  • GameController に Click クラスを保持するよう修正
  • public の AdjustAoiChan() 関数として葵ちゃんの数を調整する関数を作成
    • 葵ちゃんの数調整と合わせて登録クラスへの通知も実施する(表示も変更される)

using System.Collections.Generic;
using UnityEngine;
 
public class GameController : MonoBehaviour
{
    public static GameController instance;
 
    // カウンタの通知を受けるオブジェクトのリスト(インスペクターより登録)
    public List<GameObject> counterReceivers;
    public bool clickable;
    int clickCount;
    Click click;
～省略～
    void Start() {
        // オブジェクトを永続化
        DontDestroyOnLoad(gameObject);
        clickable = true;
        click = GameObject.FindObjectOfType<Click>();
    }
～省略～
    public int GetCount() {
        // カウンタ値を返却
        return clickCount;
    }
 
    public void AdjustAoiChan(int target) {
        // 今いる葵ちゃんの数をカウント
        GameObject[] aois = GameObject.FindGameObjectsWithTag("Aoi");
        int now = aois.Length;
 
        if (now > target) {
            // 今いる人数の方が多い場合
            while (now > target) {
                // 葵ちゃんには消えてもらう
                Destroy(aois[now - 1]);
                now--;
            }
        } else {
            // 今いる人数の方が少ない場合
            while (now < target) {
                click.spawnAoi();
                now++;
            }
        }
        // 終わったら登録オブジェクトに通知
        SetCount(target);
    }
}
 

• Load用のスクリプトを作成し、Load用の Button オブジェクトにコンポーネント追加する。
• Load用のスクリプトを記述する
  • PlayerPrefs に保存していた情報を読み込み、GameControllerへ葵ちゃんの数調整を依頼。
  • ロードを実施した旨は、カウンタ表示用テキストに追記する

using UnityEngine;
using TMPro;
 
public class Load : MonoBehaviour
{
    GameController gameCtrl;
    TextMeshProUGUI tmp;
    void Start()
    {
        gameCtrl = GameObject.FindObjectOfType<GameController>();
        tmp = GameObject.FindObjectOfType<CounterTextController>().gameObject.GetComponent<TextMeshProUGUI>();
    }
    public void OnClick() {
        // 葵ちゃんの数を調整する
        int target = PlayerPrefs.GetInt("Count");
        gameCtrl.AdjustAoiChan(target);
 
        tmp.text += "(ろーどしました)";
    }
}
 

おまけ：リセットボタンとセーブのクリアボタンを実装する

詳細を開く

• リセットボタンとセーブのクリアボタンを配置する。
  • 設置方法やスクリプトの付け方はセーブやロードと同じ。

• リセットボタン

using UnityEngine;
using TMPro;
 
public class Reset : MonoBehaviour
{
    GameController gameCtrl;
    TextMeshProUGUI tmp;
    void Start()
    {
        gameCtrl = GameObject.FindObjectOfType<GameController>();
        tmp = GameObject.FindObjectOfType<CounterTextController>().gameObject.GetComponent<TextMeshProUGUI>();
    }
    public void OnClick() {
        // 葵ちゃんの数をリセットする
        gameCtrl.AdjustAoiChan(0);
 
        tmp.text += "(りせっとしました)";
    }
}
 

• セーブのクリアボタン

using UnityEngine;
using TMPro;
 
public class Clear : MonoBehaviour
{
    TextMeshProUGUI tmp;
 
    void Start()
    {
        tmp = GameObject.FindObjectOfType<CounterTextController>().gameObject.GetComponent<TextMeshProUGUI>();
    }
    public void OnClick() {
        PlayerPrefs.DeleteKey("Count");
        tmp.text += "(せーぶをクリアしました)";
    }
}