Prefabを自動生成で指定したところに表示したい

Question

Prefabを自動生成(Instantiate)しているときに、思った内容とは
異なる表示結果になってしまいました。

実行前の状況です。

実行後の状況です。

00のパネルが青い背景の真ん中に表示されました。

自分の頭の中では下記のようにボタン「99」の隣に並ぶことを想像していました。

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

public class StageManager : MonoBehaviour
{
    // プレファブの読み込み
    public Image panelPrefab;
    public Transform parentTranRect;


    // Start is called before the first frame update
    void Awake()
    {
        // オブジェクトの生成
        Image panel = Instantiate(panelPrefab);

        panel.transform.SetParent(parentTranRect);

        Debug.Log(panel.transform.position);
        panel.transform.position = new Vector2(0, 0);
        Debug.Log(panel.transform.position);


    }
}

transform.positonをx,y 0 にしても思った結果は得られず。

次に

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

public class StageManager : MonoBehaviour
{
    // プレファブの読み込み
    public Image panelPrefab;
    public Transform parentTranRect;


    // Start is called before the first frame update
    void Awake()
    {
        // オブジェクトの生成
        Image panel = Instantiate(panelPrefab);

        panel.transform.SetParent(parentTranRect);

        Debug.Log(panel.rectTransform.localPosition);
        panel.rectTransform.localPosition = new Vector2(0, 0);
        Debug.Log(panel.rectTransform.localPosition);

    }
}

次にrectTransformのlocalPositionを設定しましたが、
下記のようにおかしな結果が。

これはCanvasの値が関係しているのかと思われますが、
自分では解決できませんでした。

Body(Image)を以下のようにStretchで中央揃い指定しています。

この状態でPrefabを指定した座標に表示したいです。

お力添えをよろしくお願い致します。

Answer 1

UI を並べたいなら、Layout Group を使うのが楽です。〇〇 Layout Group コンポーネントにレイアウトを指定し、あとは GameObject をそのオブジェクトの子供にすれば指定したレイアウト通りに並びます。

参照: Unityのレイアウトグループを使ってUIを自動レイアウトする