Unity ショップのUI設計

目次

• 概要
• 作成物の説明
• 仕様の説明
• 完成品
• 詳細

概要

前回、delegateを利用することで各スクリプトで呼び出したいメソッドをあらかじめ登録して処理ができることを説明した。
yasuaki-ohama.hatenablog.com

今回は、それを応用し、ショップのUIをdelegateを利用して作成する。

作成物の説明

ActionとUnityEventを利用して以下のようなUIを作成する。

1. ボタンを押して所持金を加算
2. アイテムを購入
3. 現在購入できないアイテムを赤表示にする

仕様の説明

初期化

①初期化時にアイテムidを利用して必要なボタン数を作成
②マスターデータを利用して画像、名前、価格、説明のテキストをボタンに入れる
③作成されたボタンの参照先を渡す（購入できないボタンを非表示にする処理を渡すため）
④delegateの処理に登録するためのメソッドを登録して返す
⑤アイテムボタンの参照先と実行処理を利用して、コインが変更された時に呼び出すように設定する

入力操作

⑥アイテムボタンが押されたらYes/Noウィンドウを開き、idを渡しマスターデータを利用して表示
⑥アイテムパネルが押されたら説明テキストを押したアイテムの説明に変更する
⑦Yesボタンを押したらコインの減算を行う
⑧所持金表示パネルを更新
⑧現在のコインで購入できないボタンを非表示にする

完成品

github.com

詳細

今回はボタンを押した後の処理の設定を「インスペクター」と「コード」の二種類の方法で行った

インスペクター

インスペクターでUnityEventを利用した設定方法はコードを書かずにクリックするだけで簡単に作成することができる。しかし、登録した内容を変更することや渡す引数を変更することは基本的にできないので以下のような場所で利用した。

所持金を1000円増やす処理

ウィンドウを非表示にする処理

コード

新しく追加したオブジェクトに対して設定を行ったり、渡すパラメータを動的に変更したい場所は生成時にコードで直接設定を行った。

CreateShopItem.cs

ボタンをタップした後にYes/Noウィンドウを開いてアイテムデータを渡す処理

button.onClick.AddListener (() => {
    OpenYesNoWindow (key);
});

アイテムのパネルを押した時にアイテムテキストにアイテムの説明を表示する処理

panel.onClick.AddListener (() => {
    ChangeItemText (key);
});

アイテム購入後に購入できないアイテムを赤表示にする処理

onChangeCoin += (coin) => {
    bool canBuy = coin >= ItemMasterData.GetValue (key).prise;
    button.interactable = canBuy;
    panel.interactable = canBuy;
};

CoinManager.cs

所持金が変更された時に表示を変更する

this.onChangeCoin += (coin) => {
    coinText.text = coin.ToString ();
};

アイテムを購入した時に所持金を減らす

yesNoCanvas.transform.FindChild ("YesNoPanel/Yes").GetComponent<Button> ().onClick.AddListener (() => {
    SubCoin (yesNoCanvas.GetComponent<ShowItemData> ().GetPrice);
});