簡単なポップアップの実装


2022.4.13 1日目

## ポップアップをスクリプト無しで実装する（見た目の部分はスクリプトあり） (1h)
<img width="400" alt="download.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940156/0aeae5cd-ed0f-c37c-9c28-c8c42654cbb1.gif">

実装環境
・Unity 2021.3.0f1
・Windows

ボタンを押す→ポップアップが表示される→クローズボタンを押すとポップアップが閉じる
　ポップアップ内　
　　・スクロールできる　
　　・均等にオブジェクトが並べられている

↑のように実装しました。

1、ボタンの配置

Canvasオブジェクトの子にUI＞Buttonを選択し、ボタンを配置します
![bandicam 2022-04-14 11-48-20-502.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940156/11456fe8-6ca7-0798-a53d-c232f6b9e366.jpeg)
![bandicam 2022-04-14 11-46-35-620.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940156/fb8adcfb-ef54-d423-f0e9-f80f25afcff8.jpeg)


2、ポップアップの作成
![bandicam 2022-04-14 11-54-02-079.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940156/c4acb3a5-5909-d02a-9fa0-afd1fe5341bb.jpeg)

空のオブジェクトを作成し、その子としてPopup内のオブジェクトを配置していきます。
![bandicam 2022-04-14 11-55-54-101.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940156/3c518eac-040a-37b1-29d9-93d02dce1eec.jpeg)

ポップアップの背景を作成します。
空のオブジェクトを作成し、Inspector＞Add Component＞UI＞Imageを選択し大きさを好みの大きさにします。
![bandicam 2022-04-14 11-59-05-716.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940156/6ebbcfe3-a824-07c1-23de-3af7d549c6ed.jpeg)

バックグラウンドの子としてポップアップを閉じるボタンを配置します。（上の画像内のCloseButton）
（子とした理由は、hierarchy内で下にあるオブジェクトが上に表示されるためです）

※ここから見た目の実装（スクリプトあり）
3、ScrollViewの設定

2の中で作成した、バックグラウンドの下、Canvasの子としてScrollViewを作成します。
UI＞ScrollViewを選択し配置します。
![bandicam 2022-04-14 12-10-45-087.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940156/ff9ca534-dbf9-cf33-7820-5612c943f123.jpeg)

（今回は縦のスクロールのみを実装するため、元々あった横のスクロールバーは削除しております）
![bandicam 2022-04-14 12-11-38-531.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940156/93158a56-4ef1-1a42-6234-066b4ede3bd6.jpeg)

ScrollView＞Viewport＞Contentの高さを変更することで、スクロールできる画面の範囲が変更できます。
![bandicam 2022-04-14 12-16-49-743.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940156/825a4efb-1f3e-06b9-4a0f-7d64a60d1e21.jpeg)

Content内にAdd Component＞Grid Layout Groupを選択し、格子状にオブジェクトを並べるように設定します。

　Padding
　　　Left：一番左のスペースをどれくらいあけるか
　　　Right：一番右のスペースをどれくらいあけるか
　　　Top：一番上のスペースをどれくらいあけるか
　　　Bottom：一番下のスペースをどれくらいあけるか
　Cell Size：表示するオブジェクトのサイズ
　Spacing：セルとセルの間

![bandicam 2022-04-14 12-20-22-837.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940156/d26fe6e3-2005-65a5-4461-454ac54f4213.jpeg)

ボタンはあらかじめPrefab化してあります。
適当な位置に空のオブジェクトを作成し、ScrollViewを管理するようにします。

```C#
[SerializeField] public GameObject cellPrefab;
[SerializeField] public GameObject content;
    // Start is called before the first frame update
    void Start()
    {
        for ( int i = 0; i < 20; i++ )
        {
            GameObject instance = Instantiate(cellPrefab);
            instance.transform.parent = content.transform;
        }
    }
```

SerializeFieldでInspectorからオブジェクトや値を設定できるようにします。

```C#
[SerializeField] public GameObject cellPrefab;
[SerializeField] public GameObject content;
```

Prefabをcontentオブジェクトの子として生成します
```C#
for ( int i = 0; i < 20; i++ )
{
    GameObject instance = Instantiate(cellPrefab);
    instance.transform.parent = content.transform;
}
```
Instantiate(生成するオブジェクト,生成する座標Vec3）
ですが、今回GridLayoutGroupを設定して、生成する座標は固定なので設定しなくて大丈夫です。

ここまで見た目の部分です。

4、ボタンの設定

1で設定したボタン（ポップアップを表示するボタン）のInspector＞On Click()に、2で作成したポップアップオブジェクトを設定します。
![bandicam 2022-04-14 12-27-17-188.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940156/b6375f64-e88d-3384-13e5-f01e4042fe33.jpeg)

No Functionの部分を以下のように設定します。
SetActiveでオブジェクトのアクティブ状態を設定します。
![bandicam 2022-04-14 12-27-38-029.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940156/2b0528d8-7adc-137a-2d8b-dee1b2267dd8.jpeg)

チェックボックスにチェックを付けます。
（チェックあり：設定したオブジェクトをアクティブ状態にする。
　チェックなし：設定したオブジェクトを非アクティブ状態にする。）
![bandicam 2022-04-14 11-47-02-408.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940156/4f9d1f96-1eb0-63ed-0112-151dce8e7630.jpeg)

同じように、ポップアップに設定したポップアップを閉じるボタンの設定をして、
閉じるボタンをクリックするとポップアップが閉じるように設定します。

5、最後にポップアップオブジェクトをデフォルトで非アクティブ状態に設定します。

終わりです。