Doozy UIでポップアップ表示させる
UnityUnityの有料アセットDoozy UIには、簡単にポップアップ表示させる機能が用意されています。
今回はこのポップアップを使って、以下のような情報ウィンドウを表示させる方法を紹介します
もくじ
ポップアップのPrefabをつくる
まず、Canvasに UIPopup オブジェクトを追加します。
すると、以下のようなオブジェクトが生成されます。
生成直後のUIPopupオブジェクトは以下で構成されています。
- 半透明の背景
- ウィンドウのパネル
- アイコンのイメージ
- タイトルのテキスト
- メッセージのテキスト
- ボタン
すでに、ポップアップ表示に必要なオブジェクトは一通り揃えられています。
今回、イメージの指定とオブジェクトの配置とカラーだけ調整して以下のような見た目にしました。
今回つくるのが情報表示ウィンドウなので、(i)のアイコンを表示させています。Doozy UIでは、デフォルトで多くのアイコンを取り揃えているので、必要なものを選択するだけです。
ポップアップウィンドウの見た目が完成しましたので、Prefab化しておきます。
これでポップアップのPrefabが完成しました。
ポップアップを表示させる
それでは、ポップアップを表示させていきます。
ポップアップのアニメーションを設定する
まず、ポップアップのアニメーションを設定します。
ポップアップのPrefabを選択して、インスペクター上で設定します。Doozy UIでは、アニメのプレビュー表示を行えるので、設定がとても便利です。
Show Popup と Hide Popup のアニメーションをそれぞれ設定します。
DoozyUIに登録する
DoozyUIのコントロールパネルを開いて、ポップアップを登録します。
Popup Nameでポップアップの名前を指定します。今後、ポップアップを表示させるときに、この名前で指定することになります。
Popup Prefab には、先程つくったポップアップのPrefabを指定します。
ポップアップを表示させる
それではポップアップを表示させます。
ポップアップの表示は、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を追加しておきます。
今回は、ボタンを押したらポップアップ表示させるようにします。
ということで、ボタンを用意して、ボタンのClickイベントで PopupController の PopupShow を呼び出すように設定します。
これでボタンを押すと、ポップアップが表示できるようになりました。
ポップアップのタイトルやメッセージを変更する
ポップアップのタイトルやメッセージは、ゲームの状況に応じて変更したくなります。
以下のようにスクリプトで指定することができます。
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での指定が必要になります。
これで、ポップアップのタイトルやメッセージを表示することができました。
ポップアップのボタンイベントを登録する
ポップアップに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のポップアップ機能を紹介しました。
手数が少なくポップアップ表示ができるため、便利です。