f:id:shikaku_sh:20200908114309g:plain:w500 — ダイアログを表示するサンプルです

こんな感じで、Canvas 上のボタンを押下すると、画面全体に背景つきのダイアログ（ポップアップ）を表示するサンプルです。（エフェクトも省略しています）

ダイアログを表示するサンプルはちょこちょこ見つかるのですが、Scroll View を中に入れている例が思ったほど見つからなかったので作成してみました。

Padding の設定に思ったよりも時間がかかりました。コツ・癖のようなポイントがあったので一応記録しておきます。また、Prefab 化と、ボタン押下のイベントに関するやり方を省略しています。

ダイアログの構成

Hierarchy の Canvas 中に追加するコンポーネントの構成は次のようになります。

f:id:shikaku_sh:20200908114421p:plain:w600

Rect Transform の多くはアンカープリセットを親コンポーネントにあわせた設定にしています。ポップアップダイアログの基底コンポーネントは、追加する Canvas の大きさにあわせる必要があるので、当然 Stretch。あとのコンポーネントも親コンポーネントのサイズを基準にして相対的に配置したほうが楽だと思います。

f:id:shikaku_sh:20200908114455p:plain:w600 f:id:shikaku_sh:20200908114509p:plain:w600 f:id:shikaku_sh:20200908114540p:plain:w600 f:id:shikaku_sh:20200908114556p:plain:w600 f:id:shikaku_sh:20200908114640p:plain:w600

スクロールビューはパラメーターが多いけど、把握しておいたほうがよさそうです。マニュアルを参照します。

viewport を２つ用意してあるのは、Mask のマージン対策です。「How padding a scrollable text inside a Scroll View ?」を参考にしました。

f:id:shikaku_sh:20200908114705p:plain:w600

画像のデザインを別にすると、こんな感じがわりと基本的な設定になるのだと思います。

ダイアログの構成を考える

UI 演出と同じように、ポップアップするダイアログは次の２つに気をつけるほうがよさそうです。

ユーザーの知りたい情報を適切に表示できる機能を有すること
ゲームの世界観に一致するようなデザインを有すること

このあたりは以下を参考にするとよさそうです。

ゲーム UI 演出 - ポップアップの見せ方_背面の種類

そんなわけでサンプルではダイアログの背景を画像で設定できるようにしました。世界観にあわせて透明度を与えたグレーやホワイト以外のデザインにも対応できたほうが具合よさそうです。

f:id:shikaku_sh:20200908114823p:plain — 使用した素材

f:id:shikaku_sh:20200908114826p:plain — 使用した素材

スクリプト

表示するためのスクリプトはこんな感じにしました。

インスペクター上で設定した Canvas の上に、Resources に追加したポップアップ用のプレハブをロードして、インスタンスするパターンです。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class DialogCaller : MonoBehaviour
{
    private GameObject _DialogPrefab;

    [SerializeField]
    private GameObject _Canvas = null;

    // Start is called before the first frame update
    void Start()
    {
        _DialogPrefab = Resources.Load("PopupDialog") as GameObject;
    }

    public void PopupTest()
    {
        var instance = Instantiate<GameObject>(_DialogPrefab);

        instance.transform.SetParent(_Canvas.transform, false);
    }
}

逆にインスタンス化したコンポーネントを削除するスクリプトは次。

OK ボタンを押下すると、CloseTest を実行します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PopupCloser : MonoBehaviour
{
    [SerializeField]
    private GameObject _PopupDialog;

    public void CloseTest(float delaySecond = 0.0F)
    {
        Destroy(_PopupDialog, delaySecond);
    }
}

サンプル

GitHub に「unity-popup-practice」を公開しています。

f:id:shikaku_sh:20200908114936p:plain — ポップアップ（ダイアログ）のサンプル

このあとは、ポップアップ時のエフェクトのテストを追加するかもしれません。繰り返し操作する UI は、パッと表示されるほうが好きですが、アニメーションでイージングさせてみるなど、抱く悪感情と相談しつつテストしようかと。
追記：２０２０年９月９日「Unity ダイアログをポップアップするときのエフェクト（拡大・透過）」の記事を書きました。