Doozy UIでポップアップ表示させる

Unityの有料アセットDoozy UIには、簡単にポップアップ表示させる機能が用意されています。

今回はこのポップアップを使って、以下のような情報ウィンドウを表示させる方法を紹介します

ボタンを押したらポップアップ表示する

ポップアップのPrefabをつくる

まず、Canvasに UIPopup オブジェクトを追加します。

UIPopupオブジェクトの追加

すると、以下のようなオブジェクトが生成されます。

UIPopupオブジェクト

生成直後のUIPopupオブジェクトは以下で構成されています。

すでに、ポップアップ表示に必要なオブジェクトは一通り揃えられています。

今回、イメージの指定とオブジェクトの配置とカラーだけ調整して以下のような見た目にしました。

見た目だけを調整

今回つくるのが情報表示ウィンドウなので、(i)のアイコンを表示させています。Doozy UIでは、デフォルトで多くのアイコンを取り揃えているので、必要なものを選択するだけです。

DoozyUIで用意されているアイコンの一部

ポップアップウィンドウの見た目が完成しましたので、Prefab化しておきます。

Prefab化して、ヒエラルキーから削除しておく

これでポップアップのPrefabが完成しました。

ポップアップを表示させる

それでは、ポップアップを表示させていきます。

ポップアップのアニメーションを設定する

まず、ポップアップのアニメーションを設定します。

ポップアップのPrefabを選択して、インスペクター上で設定します。Doozy UIでは、アニメのプレビュー表示を行えるので、設定がとても便利です。

Show Popup と Hide Popup のアニメーションをそれぞれ設定します。

アニメーションの設定とプレビュー

DoozyUIに登録する

DoozyUIのコントロールパネルを開いて、ポップアップを登録します。

Popup Nameでポップアップの名前を指定します。今後、ポップアップを表示させるときに、この名前で指定することになります。

Popup Prefab には、先程つくったポップアップのPrefabを指定します。

DoozyUIにポップアップを登録する

ポップアップを表示させる

それではポップアップを表示させます。

ポップアップの表示は、C#スクリプトで制御します。

PopupControllerという名前のスクリプトを用意して、以下のコードを追加します。

using UnityEngine;
using Doozy.Engine.UI;

public class PopupController : MonoBehaviour
{
    UIPopup popup;

    public void PopupShow()
    {
        // PopupInfoという名前のポップアップを取得して
        popup = UIPopupManager.GetPopup("PopupInfo");

        // ポップアップ表示させる
        UIPopupManager.ShowPopup(popup, popup.AddToPopupQueue, false);
    }
}

これでスクリプトの準備はできたので、プロジェクトにPopupControllerを追加しておきます。

PopupControllerを追加

今回は、ボタンを押したらポップアップ表示させるようにします。

ということで、ボタンを用意して、ボタンのClickイベントで PopupController の PopupShow を呼び出すように設定します。

ボタンのClickでPopupControllerの関数を呼ぶ

これでボタンを押すと、ポップアップが表示できるようになりました。

ポップアップのタイトルやメッセージを変更する

ポップアップのタイトルやメッセージは、ゲームの状況に応じて変更したくなります。

以下のようにスクリプトで指定することができます。

    public void PopupShow()
    {
        popup = UIPopupManager.GetPopup("PopupInfo");

        // タイトルを指定
        popup.Data.SetLabelsTexts("Title", "Information");

        // メッセージを指定
        popup.Data.SetLabelsTexts("Message", "This is message\nHello,World!\nhogehoge");

        UIPopupManager.ShowPopup(popup, popup.AddToPopupQueue, false);
    }

ここで、TitleやMessageという名前は、UIPopup Prefabで設定されています。TitleとMessageはUIPopup生成時に自動で登録されているため、今回は設定不要ですが、ポップアップに新たにテキスト要素を追加する場合には、UIPopupでの指定が必要になります。

UIPopup での要素の指定箇所

これで、ポップアップのタイトルやメッセージを表示することができました。

ポップアップのボタンイベントを登録する

ポップアップにOKボタンがあります。OKボタンを押したら、ポップアップを閉じるようにします。

ポップアップのボタンのCallbackを設定します。

public class PopupController : MonoBehaviour
{
    UIPopup popup;

    public void PopupShow()
    {
        popup = UIPopupManager.GetPopup("PopupInfo");
        popup.Data.SetLabelsTexts("Title", "Information");
        popup.Data.SetLabelsTexts("Message", "This is message\nHello,World!\nhogehoge");

        // ボタンを押したときのコールバックを登録する
        popup.Data.SetButtonsCallbacks(PopupHide);

        UIPopupManager.ShowPopup(popup, popup.AddToPopupQueue, false);
    }

    public void PopupHide()
    {
        // ポップアップを閉じる
        popup.Hide();
    }
}

これで完成です。

実際の挙動は以下のようになります。

ポップアップの表示

まとめ

今回は、DoozyUIのポップアップ機能を紹介しました。

手数が少なくポップアップ表示ができるため、便利です。