モバイルゲーム向けのポップアップ画面(PopUp)を作成|Unityゲーム制作

今回はUnity2Dゲームで簡単なポップアップ画面を表示してみます。

はじめに
実装開始

はじめに

Unityのバージョンは2021.3.14f1です。

以前、簡単なダイアログを作成しました。似たような感じですが、今回はモバイルゲーム向けの「簡単なポップアップ画面」を作成してみます。メッセージを表示して、OKボタンを押すだけのシンプルなものです。

簡単なダイアログ(メッセージボックス)を作成する方法のメモ【Unityゲーム制作】 | NO システム, NO ライフ (nosystemnolife.com)

実装開始

スマートフォンを想定して、画面比率を「9:16」にします。

画面作成

「UI」→「Panel」を追加します。

Canvasの設定を下記のようにします。

Panelの名前を「BackPanel」に変更します。ポップアップ画面を表示したときの画面範囲外の色になるので、薄めの黒色にしておきます。

更にPanelを追加して、名前を「PopUpPanel」にします。実際のポップアップ画面になります。

PopUpPanelの配下に「CreateEmpty」で空オブジェクトを追加します。

空オブジェクトを３つ追加して、名前を「Header」、「Main」、「Footer」にします。

ヘッダーの作成

ヘッダー部分はポップアップのタイトルにします。「UI」→「Legacy」→「Text」を追加。

下記のように表示位置やテキストサイズをセットします。

メインの作成

メインにはメッセージテキストを表示します。同じように「UI」→「Legacy」→「Text」を追加して、表示位置、テキストを調整します。

フッターの作成

フッター部分には「OKボタン」を作成します。「UI」→「Legacy」→「Button」を追加。

ボタンの位置、色も調整しておきます。

作成したポップアップ画面は下記のようになります。

スクリプトの作成

下記スクリプトを新規で作成します。

using UnityEngine;
using UnityEngine.UI;

public class PopupSystem : MonoBehaviour
{
    [SerializeField] private GameObject canvas;
    [SerializeField] private Text title;
    [SerializeField] private Text main;

    [SerializeField] private string titleText;
    [TextArea(5, 5)][SerializeField] private string mainText;

    private void Awake()
    {
        title.text = titleText;
        main.text = mainText;
    }
    public void Show()
    {
        canvas.SetActive(true);
    }
    public void Close()
    {
        canvas.SetActive(false);
    }
}

タイトル、メッセージの内容をセット、ポップアップ画面の表示・非表示をできるようにしていきます。