LayoutGroup 内の各オブジェクトの位置を動的に自動調整する③

　この記事は、LayoutGroup を利用した自動調整機能において
ScrollView を持つコンポーネントが LayoutGroup 内に含まれている場合に、各UI 用ゲームオブジェクトの位置を動的に自動調整する方法の実装例です。

　前回に引き続き、こちらではスクリプトを作成して完成させます。

動画ファイルへのリンク

　なお。LayoutGroup 内に Slider や ScrollView などの子オブジェクトを複数持つ UI が含まれていない場合には、下記の記事を参考にすることで機能実装できます。

【ハルシオンブログ】様
Layoutグループの中で、ほかのオブジェクトのサイズが変わったときに自動で他のオブジェクトの位置を調整する方法
http://halcyonsystemblog.jp/blog-entry-1045.html

学習対象者

　スクリプタブル・オブジェクト、クラスの継承、UniRx を利用した購読処理が含まれています。
こちらの学習自体は含まれていませんので、これらの概念や機能を理解している方を対象としています。

設計

　Unity では UI の自動整列機能として LayoutGroup があります。
例えば、Image と Text を横一列に表示させ、その後、Text や Image の横サイズの変更に応じて
各オブジェクトの位置を自動調整する、というような使い方です。

　これは LayoutGroup をアタッチしただけでは実装が行えません。
LayoutGroup の設定のほか、制御下となる各子オブジェクトにも設定が必要となります。

　ここでは参考用に UI を作成し、かつ、それを動的に変化させるサンプルのスクリプトを用意して動作検証を行います。

　特に重要な点が子オブジェクトを複数持つ UI オブジェクトが LayoutGroup 内に含まれている場合の挙動です。
ScrollView には子オブジェクトがあり、それらの各サイズの調整も必要になります。

サンプルスクリプト

１．UpgradeDataSO クラス

　データベース用のスクリプタブル・オブジェクトです。

　データ用クラスも入れ子として作成しています。

UpgradeDataSO.cs

<=　クリックすると開きます。

using System.Collections.Generic;
using UnityEngine;

/// <summary>
/// 宝石の種類
/// </summary>
public enum GemType
{
    Purple,
    Gold,
    Diamond,
    Ruby,
}

[CreateAssetMenu(fileName = "UpgradeDataSO", menuName = "Create UpgradeDataSO")]
public class UpgradeDataSO : ScriptableObject
{
    public List<UpgradeData> upgradeDataList = new();


    [System.Serializable]
    public class UpgradeData
    {
        public int id;

        [Multiline] public string detail;
        public int cost;

        public GemType gemType;
    }
}

２．UpgradeElementController クラス

　作成した UpgradeElement プレハブにアタッチし、制御を行うためのクラスです。

UpgradeElementController.cs

<=　クリックすると開きます。

using UnityEngine;
using UnityEngine.UI;
using UniRx;

public class UpgradeElementController : MonoBehaviour
{
    [SerializeField] private Button btnUse;
    [SerializeField] private Button btnRevert;

    [SerializeField] private Text txtUpgradeDetail;
    [SerializeField] private Text txtCost;

    [SerializeField] private Image imgGem;

    [SerializeField] private CanvasGroup revertButtonGroup;


    /// <summary>
    /// 初期設定
    /// </summary>
    /// <param name="data"></param>
    public void SetUp(UpgradeDataSO.UpgradeData data)
    {
        // 各値の設定
        txtUpgradeDetail.text = data.detail;
        txtCost.text = data.cost.ToString();
        imgGem.sprite = IconManager.instance.GetGemSprite(data.gemType);

        // ゲーム進行中はボタンを押せない
        GameData.instance.HasSaveData
            .Subscribe(value =>
            {
                btnUse.interactable = !value;
                btnRevert.interactable = !value;
            })
            .AddTo(this);

        // 購読処理
        btnUse.OnClickAsObservable()
            .ThrottleFirst(System.TimeSpan.FromSeconds(1f))
            .Where(_ => CheckEnoughGems(data))  // CheckEnoughGemsの戻り値がtrue(つまり、ジェムが足りる)時
            .Subscribe(_ =>
            {
                // ジェム消費
                GameData.instance.UpdateGemCount(data.gemType, -data.cost);

                revertButtonGroup.alpha = 1;
                revertButtonGroup.blocksRaycasts = true;
            })
            .AddTo(this);

        btnRevert.OnClickAsObservable()
            .ThrottleFirst(System.TimeSpan.FromSeconds(1f))
            .Subscribe(_ =>
            {
                // ジェムの払い戻し
                GameData.instance.UpdateGemCount(data.gemType, data.cost);

                revertButtonGroup.alpha = 0;
                revertButtonGroup.blocksRaycasts = false;
            })
            .AddTo(this);

        // テスト用
        //this.UpdateAsObservable()
        //    .Where(_ => Input.GetKeyDown(KeyCode.Space))
        //    .Subscribe(_ => GameData.instance.HasSaveData.Value = !GameData.instance.HasSaveData.Value);
    }

    /// <summary>
    /// ジェムが支払えるか(足りるか)どうかを確認
    /// </summary>
    /// <returns>trueで足りる、falseで足りない</returns>
    public bool CheckEnoughGems(UpgradeDataSO.UpgradeData data) => data.gemType switch
    {
        GemType.Purple => GameData.instance.PurpleGemCount.Value >= data.cost,
        GemType.Gold => GameData.instance.GoldGemCount.Value >= data.cost,
        GemType.Diamond => GameData.instance.DiamondGemCount.Value >= data.cost,
        GemType.Ruby => GameData.instance.RubyGemCount.Value >= data.cost,
        _ => true
    };
}

３．PopupBase クラス

　ポップアップ用の基底クラスです。

PopupBase.cs

<= クリックすると開きます。

using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;
using UniRx;

public class PopupBase : MonoBehaviour
{
    [SerializeField] protected Button btnClose;

    [SerializeField] protected Canvas canvas;

    [SerializeField] protected CanvasGroup canvasGroup;
    public CanvasGroup CanvasGroup => canvasGroup;

    [SerializeField] protected Ease ease;


    protected virtual void Reset()
    {
        if (TryGetComponent(out canvas))
        {
            Debug.Log($"{canvas} 取得しました");
        }
        else
        {
            Debug.Log($"{this} Canvasが取得できません");
        }

        if (TryGetComponent(out canvasGroup))
        {
            Debug.Log($"{canvasGroup} 取得しました");
        }
        else
        {
            Debug.Log($"{this} CanvasGroupが取得できません");
        }
    }

    /// <summary>
    /// 初期設定
    /// </summary>
    public virtual void SetUp()
    {
        canvasGroup.alpha = 0;
        canvasGroup.blocksRaycasts = false;

        btnClose.OnClickAsObservable()
            .ThrottleFirst(System.TimeSpan.FromSeconds(2))
            .Subscribe(_ => PopupManager.instance.GoBack())
            .AddTo(this);
    }

    /// <summary>
    /// ポップアップの表示
    /// </summary>
    public virtual void ShowPopUp(CardData cardData = null)  // DescriptionPopでCardData型が必要なので、省略可能な引数を追加
    {
        canvasGroup.DOFade(1, 0.5f)
            .SetEase(ease)
            .OnComplete(() => canvasGroup.blocksRaycasts = true);
    }

    /// <summary>
    /// ポップアップの非表示
    /// </summary>
    public virtual void HidePopUp()
    {
        canvasGroup.DOFade(0, 0.5f)
            .SetEase(ease)
            .OnComplete(() => canvasGroup.blocksRaycasts = false);
    }
}

４．UpgradePop クラス

　ポップアップの制御を行い、UpgradeElement プレハブを指定した位置に生成するためのスクリプトです。
PopupBase を継承しています。

　Setup メソッドは外部クラスから実行する想定ですが、デバッグする場合には、別途 Start メソッドを用意して実行して確認をおこなってください。

UpgradePop.cs

<=　クリックすると開きます。

using UnityEngine;
using UnityEngine.UI;
using UniRx;

public class UpgradePop : PopupBase
{
    [SerializeField] private UpgradeDataSO upgradeDataSO;

    [SerializeField] private Text txtPurpleGemCount;
    [SerializeField] private Text txtGoldGemCount;
    [SerializeField] private Text txtDiamondGemCount;
    [SerializeField] private Text txtRubyGemCount;

    [SerializeField] private Transform elementsTran;  // ScrollViewのContentのTransform

    [SerializeField] private Transform purpleElementTran;    // 各 UpgradeElement を生成する位置
    [SerializeField] private Transform goldElementTran;
    [SerializeField] private Transform diamondElementTran;
    [SerializeField] private Transform rubyElementTran;

    [SerializeField] private VerticalLayoutGroup verticalLayoutGroup;  // ScrollViewのContentのLayoutGroup

    [SerializeField] private UpgradeElementController upgradeElementPrefab;   // UpgradeElement のプレハブ

    [SerializeField] private GameObject upgradeDisabledDialog;

    private GameObject dialog;  // 生成したダイアログ


    /// <summary>
    /// 初期設定
    /// </summary>
    public override void SetUp()
    {
        base.SetUp();

        txtPurpleGemCount.text = GameData.instance.PurpleGemCount.ToString();
        txtGoldGemCount.text = GameData.instance.GoldGemCount.ToString();
        txtDiamondGemCount.text = GameData.instance.DiamondGemCount.ToString();
        txtRubyGemCount.text = GameData.instance.RubyGemCount.ToString();

        // 各ジェムの購読処理
        GameData.instance.PurpleGemCount
            .Subscribe(value => txtPurpleGemCount.text = Mathf.Clamp(value, 0, int.MaxValue).ToString())
            .AddTo(this);

        GameData.instance.GoldGemCount
            .Subscribe(value => txtGoldGemCount.text = Mathf.Clamp(value, 0, int.MaxValue).ToString())
            .AddTo(this);

        GameData.instance.DiamondGemCount
            .Subscribe(value => txtDiamondGemCount.text = Mathf.Clamp(value, 0, int.MaxValue).ToString())
            .AddTo(this);

        GameData.instance.RubyGemCount
            .Subscribe(value => txtRubyGemCount.text = Mathf.Clamp(value, 0, int.MaxValue).ToString())
            .AddTo(this);

        // ゲーム実行中にスクリプトからLayoutGroup内に子オブジェクトを生成してScrollView内のサイズが可変すると正しく表示されないので、以下の1、2、3で修正 (これはCanvasの画面表示更新のタイミングとLayoutGroup内のサイズ変更のタイミングがずれているために生じる)
        //Canvas.ForceUpdateCanvases();  // 1.Canvas内の表示更新

        // アップグレード要素の生成。種類ごとに適切な場所に生成する
        foreach (var data in upgradeDataSO.upgradeDataList)
        {
            Canvas.ForceUpdateCanvases();  // 1

            switch (data.gemType)
            {
                case GemType.Purple:
                    var purpleElement = Instantiate(upgradeElementPrefab, purpleElementTran);
                    purpleElement.SetUp(data);
                    break;

                case GemType.Gold:
                    var goldElement = Instantiate(upgradeElementPrefab, goldElementTran);
                    goldElement.SetUp(data);
                    break;

                case GemType.Diamond:
                    var diamondElement = Instantiate(upgradeElementPrefab, diamondElementTran);
                    diamondElement.SetUp(data);
                    break;

                case GemType.Ruby:
                    var rubyElement = Instantiate(upgradeElementPrefab, rubyElementTran);
                    rubyElement.SetUp(data);
                    break;

                default:
                    Debug.Log("該当のアップグレード要素が見つかりません");
                    break;
            }

            verticalLayoutGroup.CalculateLayoutInputVertical();  // 2
            verticalLayoutGroup.SetLayoutVertical();  // 3
        }

        // 2.LayoutGroup内の入力値を再計算
        //verticalLayoutGroup.CalculateLayoutInputVertical();

        // 3.レイアウト再設定(表示更新)
        //verticalLayoutGroup.SetLayoutVertical();
    }

    /// <summary>
    /// ポップアップの表示
    /// </summary>
    /// <param name="cardData"></param>
    public override void ShowPopUp(CardData cardData = null)
    {
        // ゲーム進行中の場合は機能が使えないことを示すダイアログを生成
        if (GameData.instance.HasSaveData.Value)
        {
            dialog = Instantiate(upgradeDisabledDialog, elementsTran);
            dialog.transform.SetAsFirstSibling();  // 子要素のうち先頭に配置
        }

        base.ShowPopUp();
    }

    /// <summary>
    /// ポップアップの非表示
    /// </summary>
    public override void HidePopUp()
    {
        base.HidePopUp();

        // 生成したダイアログを破棄
        if (dialog)
        {
            Destroy(dialog);
        }
    }
}

各スクリプトをアタッチして、それぞれの設定を行う

　UpgradeElementController スクリプトは UpgradeElement プレハブにアタッチしています。

　UpgradePop スクリプトは、UpgradePop ゲームオブジェクトにアタッチしています。

　それらにつき、アサイン先の設定を行っています。

ゲームを実行して動作確認を行う

　ゲームを実行し、Content のサイズが各 ElementPlace 内に生成されたプレハブの数に応じて変更となり、
かつ、ScrollView の VerticalLayoutGroup 内の位置が自動で更新されて、手動で設定した場合と同じ挙動になっていれば制御成功です。

　処理のポイントは UpdragePop 内の以下の部分です。
うまくいかない場合の処理も併せて書いてありますので、どちらも試してみてください。

    /// <summary>
    /// 初期設定
    /// </summary>
    public override void SetUp()
    {
        base.SetUp();

        txtPurpleGemCount.text = GameData.instance.PurpleGemCount.ToString();
        txtGoldGemCount.text = GameData.instance.GoldGemCount.ToString();
        txtDiamondGemCount.text = GameData.instance.DiamondGemCount.ToString();
        txtRubyGemCount.text = GameData.instance.RubyGemCount.ToString();

        // 各ジェムの購読処理
        GameData.instance.PurpleGemCount
            .Subscribe(value => txtPurpleGemCount.text = Mathf.Clamp(value, 0, int.MaxValue).ToString())
            .AddTo(this);

        GameData.instance.GoldGemCount
            .Subscribe(value => txtGoldGemCount.text = Mathf.Clamp(value, 0, int.MaxValue).ToString())
            .AddTo(this);

        GameData.instance.DiamondGemCount
            .Subscribe(value => txtDiamondGemCount.text = Mathf.Clamp(value, 0, int.MaxValue).ToString())
            .AddTo(this);

        GameData.instance.RubyGemCount
            .Subscribe(value => txtRubyGemCount.text = Mathf.Clamp(value, 0, int.MaxValue).ToString())
            .AddTo(this);

        // ゲーム実行中にスクリプトからLayoutGroup内に子オブジェクトを生成してScrollView内のサイズが可変すると正しく表示されないので、以下の1、2、3で修正 (これはCanvasの画面表示更新のタイミングとLayoutGroup内のサイズ変更のタイミングがずれているために生じる)
        //Canvas.ForceUpdateCanvases();  // 1.Canvas内の表示更新

        // アップグレード要素の生成。種類ごとに適切な場所に生成する
        foreach (var data in upgradeDataSO.upgradeDataList)
        {
            Canvas.ForceUpdateCanvases();  // 1

            switch (data.gemType)
            {
                case GemType.Purple:
                    var purpleElement = Instantiate(upgradeElementPrefab, purpleElementTran);
                    purpleElement.SetUp(data);
                    break;

                case GemType.Gold:
                    var goldElement = Instantiate(upgradeElementPrefab, goldElementTran);
                    goldElement.SetUp(data);
                    break;

                case GemType.Diamond:
                    var diamondElement = Instantiate(upgradeElementPrefab, diamondElementTran);
                    diamondElement.SetUp(data);
                    break;

                case GemType.Ruby:
                    var rubyElement = Instantiate(upgradeElementPrefab, rubyElementTran);
                    rubyElement.SetUp(data);
                    break;

                default:
                    Debug.Log("該当のアップグレード要素が見つかりません");
                    break;
            }

            verticalLayoutGroup.CalculateLayoutInputVertical();  // 2
            verticalLayoutGroup.SetLayoutVertical();  // 3
        }

        // 2.LayoutGroup内の入力値を再計算
        //verticalLayoutGroup.CalculateLayoutInputVertical();

        // 3.レイアウト再設定(表示更新)
        //verticalLayoutGroup.SetLayoutVertical();
    }

　①まず最初に Canvas.ForceUpdateCanvases()が呼び出され、キャンバスとその子要素が更新されます。
通常 Canvas 内のオブジェクトの表示更新は 1フレームまたぐ必要がありますが、このメソッドを実行することで即座に更新されます。

　②verticalLayoutGroup.CalculateLayoutInputVertical()が呼び出され、垂直方向のレイアウトの入力が再計算されます。
これにより、VerticalLayoutGroup 内のオブジェクトのサイズと、その子オブジェクトのサイズが再計算されます。

　③最後に verticalLayoutGroup.SetLayoutVertical()が呼び出され、垂直方向のレイアウトが再設定され、UI要素が描画される更新が行われます。

　以上の処理の内容により、この順序で処理を行うことで、UI要素のサイズ変更が正常に画面に反映されるようになります。

　特に LayoutGroup 利用時の ScrollView のサイズ動的な更新においては、①②③の処理と、その実行する順番と場所が重要です。
ScrollView には子オブジェクトがあるため、この処理を適切な順番で実行することにより、LayoutGroup 内の各オブジェクトの位置を動的に自動調整することが可能です。

＜振り返り学習＞

　LayoutGroup 内に１つ新しいオブジェクトが生成される、ということは、その中にあるほかのオブジェクトの位置が再計算しないと、どの位置に配置していいのか、わからない状態になります。
そのため、何か１つでも変化があったら、それに関連するすべての UI が更新される必要があります。

　通常、この更新の処理には 1フレームかかります。
これは Canvas 自体の仕様で、何か UI に変更があったとき（オブジェクトが増減した、位置が変わった、サイズが変わったなど）が 1 フレーム後に画面に反映されるためです。

　今回の処理ですが、LayoutGroup 内にオブジェクトを作ったとしても、そのタイミングでは、Canvas の更新は自動的には入りません。なぜなら、生成しても 1 フレーム経過しないためです。
ということは、新しく追加されたオブジェクトと、以前からあったオブジェクトは、その位置関係が更新されないまま画面に映ります。

　このとき、Slider や ScrollView のような、子オブジェクトを複数持つオブジェクトについては、正しい位置が反映されないでゲーム画面が作られてしまいます。

　よって、

１．LayoutGroup を利用している UI 内に何かオブジェクトを作る
２．LayoutGroup 内の再計算をしないと、正しい位置にならない
３．正しい位置になったら、それを設定しないと画面に反映されない（これは Canvas の更新を含みます）

　このような流れが生じます。

　特に Slider や ScrollView のような、子オブジェクトを持つオブジェクトの場合、オブジェクト内のオブジェクトの数が変わって位置が変えるごとに再計算をして画面の更新をその都度してあげないと、
例えば、３つオブジェクトが作られたとしたら、その前にできていた２つのオブジェクトが正しい位置になっていないため、結果、どんどんとずれていくようになります。

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

LayoutGroup 内の各オブジェクトの位置を動的に自動調整する③ - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school