UI Imageをスクリプトで動的に生成する方法。

Question

###前提・実現したいこと
下図のように、GameObjectにアタッチしているスクリプトファイルから、
backgaugeImageという名前のUI Imageを動的に生成したいと思っています。

backgaugeImageは、既にシーン上に作成済みのpowergaugeImage(UI Image)と同じ大きさ、同じ位置で、重ね順は、powergaugeImageより背面にしたいと思っています。
(値を設定する際も、backgaugeImage.○○.width=107で値を代入するのではなく、backgaugeImage.○○.width=powergaugeImage.○○.widthのような形式で設定したい。)

スクリプトファイルでは、以下のコードでUI ImageのpowergaugeImageを取得しています。

GameObject powergauge = GameObject.Find("powergaugeImage");

なお、スクリプトで動的に生成したいので、インスペクターのドラッグ&ドロップで参照をセットするような作業はしない方法でお願いします。

###試したこと

このリンクを参考に作成を試みましたが、エラーになってしまいます。
また、作成できたとしても、重ね順の変更方法、大きさ、位置の設定方法などがわかりません。

GameObject canvas = GameObject.Find("Canvas");
GameObject bg = new GameObject ();
RectTransform rect = bg.AddComponent<RectTransform> ();
rect.SetParent (canvas.RectTransform);  //おそらくRectTransform型を正しく指定できていない為、ここがおかしい。

//最終的にGameObject型でUI Imageを取得したい。ここで左辺に代入できる？
GameObject backgauge = rect.gameObject.AddComponent<Image> ();

###発生している問題・エラーメッセージ

Assets/gaugeScript.cs(21,40): error CS1061: Type `UnityEngine.GameObject' does not contain a definition for `RectTransform' and no extension method `RectTransform' of type `UnityEngine.GameObject' could be found (are you missing a using directive or an assembly reference?)

ご教授お願いいたします。

Answer 1

０から作成する方法です。
アンカーの状態によっては他に設定する必要があったり、
アンカーの設定自体をコメントアウトする必要があるかもしれません。

GameObject powergaugeImage  = GameObject.Find("Canvas/powergaugeImage");
GameObject backgaugeImage   = new GameObject("backgaugeImage");

// 親子関係
backgaugeImage.transform.SetParent(canvas.transform, false);

// 並べ替え
backgaugeImage.transform.SetSiblingIndex( powergaugeImage.transform.GetSiblingIndex() );

// 位置・回転・スケール・アンカーなど
RectTransform baseTransform = powergaugeImage.transform as RectTransform;
RectTransform rectTransform = backgaugeImage.AddComponent<RectTransform>();
rectTransform.anchorMax        = baseTransform.anchorMax;
rectTransform.anchorMin        = baseTransform.anchorMin;
rectTransform.anchoredPosition = baseTransform.anchoredPosition;
rectTransform.sizeDelta        = baseTransform.sizeDelta;
rectTransform.localScale       = baseTransform.localScale;
rectTransform.localPosition    = baseTransform.localPosition;
rectTransform.localRotation    = baseTransform.localRotation;

// スプライト変更
Image img  = backgaugeImage.AddComponent<Image>();
img.sprite = powergaugeImage.GetComponent<Image>().sprite;

Comments

[退会済みユーザー]

ありがとうございます。解決しました。
pivotも設定していたので、「rectTransform.pivot = baseTransform.pivot;」を追記して、powergaugeImageのレイヤーがUIだったので、合わせるために「backgaugeImage.layer = powergaugeImage.layer;」を追記して完成しました。

Answer 2

こんな感じでどうでしょうか？

GameObject powergaugeImage  = GameObject.Find("Canvas/powergaugeImage");
GameObject backgaugeImage 　　　= (GameObject)Instantiate(powergaugeImage);
backgaugeImage.name           　　　 = "backgaugeImage";

// 親子関係
backgaugeImage.transform.SetParent(canvas.transform, false);

// 並べ替え
backgaugeImage.transform.SetSiblingIndex( powergaugeImage.transform.GetSiblingIndex() );

// スプライト変更
Image img = backgaugeImage.GetComponent<Image>();
img.sprite = [好きなスプライトに変更];

Comments

[退会済みユーザー]

ありがとうございます。Instantiateでコピーする方法があるのですね。今回の目的から、ご教授いただいたこの方法が効率的で定石だと思うのですが、コピーしてUI Imageを作成するのではなく、何もない所からUI Imageを生成して、それのWidthやHeightやX,Yを設定する方法をご教授いただけませんか？変なこだわりがあってすみません。