2022.4.13 1日目
ポップアップをスクリプト無しで実装する（見た目の部分はスクリプトあり） (1h)
実装環境
・Unity 2021.3.0f1
・Windows
ボタンを押す→ポップアップが表示される→クローズボタンを押すとポップアップが閉じる
ポップアップ内
・スクロールできる
・均等にオブジェクトが並べられている
↑のように実装しました。
1、ボタンの配置
Canvasオブジェクトの子にUI＞Buttonを選択し、ボタンを配置します
2、ポップアップの作成
空のオブジェクトを作成し、その子としてPopup内のオブジェクトを配置していきます。
ポップアップの背景を作成します。
空のオブジェクトを作成し、Inspector＞Add Component＞UI＞Imageを選択し大きさを好みの大きさにします。
バックグラウンドの子としてポップアップを閉じるボタンを配置します。（上の画像内のCloseButton）
（子とした理由は、hierarchy内で下にあるオブジェクトが上に表示されるためです）
※ここから見た目の実装（スクリプトあり）
3、ScrollViewの設定
2の中で作成した、バックグラウンドの下、Canvasの子としてScrollViewを作成します。
UI＞ScrollViewを選択し配置します。
（今回は縦のスクロールのみを実装するため、元々あった横のスクロールバーは削除しております）
ScrollView＞Viewport＞Contentの高さを変更することで、スクロールできる画面の範囲が変更できます。
Content内にAdd Component＞Grid Layout Groupを選択し、格子状にオブジェクトを並べるように設定します。
Padding
Left：一番左のスペースをどれくらいあけるか
Right：一番右のスペースをどれくらいあけるか
Top：一番上のスペースをどれくらいあけるか
Bottom：一番下のスペースをどれくらいあけるか
Cell Size：表示するオブジェクトのサイズ
Spacing：セルとセルの間
ボタンはあらかじめPrefab化してあります。
適当な位置に空のオブジェクトを作成し、ScrollViewを管理するようにします。
[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からオブジェクトや値を設定できるようにします。
[SerializeField] public GameObject cellPrefab;
[SerializeField] public GameObject content;
Prefabをcontentオブジェクトの子として生成します
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で作成したポップアップオブジェクトを設定します。
No Functionの部分を以下のように設定します。
SetActiveでオブジェクトのアクティブ状態を設定します。
チェックボックスにチェックを付けます。
（チェックあり：設定したオブジェクトをアクティブ状態にする。
チェックなし：設定したオブジェクトを非アクティブ状態にする。）
同じように、ポップアップに設定したポップアップを閉じるボタンの設定をして、
閉じるボタンをクリックするとポップアップが閉じるように設定します。
5、最後にポップアップオブジェクトをデフォルトで非アクティブ状態に設定します。
終わりです。