スクリプトから作成したプレハブの子オブジェクトを操作できない

Question

前提・実現したいこと

以下の図のように
「グループA、Bに表示された画像からそれぞれ1つのみ選択し決定ボタンを押す」
という動作を求めるUIを作成しています。なお、表示される画像は毎回異なります。

グループA　[画像1][画像3][画像4]
グループB　[画像2][画像5]
[決定]

これに対し、トグルを利用し次のようなプレハブを作成し利用したいと考えています。

▼Toggle　　　　トグルグループ設定でグループ内で1つしか選べないようにする予定
_▼Background　画像変更スクリプト「ImageSet」をアタッチ
__▼Checkmark　

「ImageSet」
Start(){
Image img = GetComponent<Image>();
}
SetImage(){
img.sprite = 画像
}

発生している問題

このプレハブを

GameObject ins = Instantiate(”Toggle”) as GameObject;

として生成し、Canvasの子要素に設定するなどして画面に表示させることには成功しましたが、画像の変更の仕方がよく分かりません。

###試したこと
insがプレハブ化したToggleをインスタンス化したものならば、画像はその子要素なので子要素を取得すれば操作できると考えましたが、

ins.transform.Find("Background").gameObject.GetComponent<ImageSet>().SetImage();

このように記述すると次のようなエラーが表示され、これによるとimg.spriteがnullであると言っているようです。

NullReferenceException: Object reference not set to an instance of an object
ImageSet.SetImage () (at Assets/Script/ImageSet.cs:36)

Start()が起動していないのではないかと疑い、試しにGetCompornentを画像変更の直前で行ったところ、
エラーは発生しませんでしたが画像は変更されないままでした。

###質問
以上より、ご教示いただきたい点は次の2点です
1.そもそもToggleの背景画像を動的に変えるというアイデアは実現可能なのか？
→可能ならばどのようにスクリプトを修正すればよいですか？
2.ToggleではなくImageを配置しクリックイベントでオンオフを管理する方法にしてしまったほうが手っ取り早いのか？

###画像

Answer 1

Start()を使用せずにAwake()を使用したところChange()が動作する前にAwake()の処理を行うことができるようです。

Answer 2

ImageSetのStart()内の
Image img = GetComponent<Image>();
これは
img = GetComponent<Image>();
だと思います。（クラス変数imgが存在すること前提）

上のコードだと、ローカル変数imgに取得したImageを入れているので、クラス変数imgはnullのままであり、SetImage()を実行した時に「nullのspriteにアクセスしようとする」為にNullReferenceExceptionになります。
（Toggleは無関係です）

---

ぶっちゃけToggleコンポーネントは
「タッチされた時にどのImageの色をどう変えるか、どの画像を使うか（Transition > TargetGraphic）」と
「オンオフ時にどのImageを表示非表示するか（Graphic）」しか行いません。
（現在は前者にBackgroundのImageが、後者にはCheckmarkのImageが入っていると思います）

これ以外はそれぞれのImageが独立して存在しているだけなので、画像を変えるなり色を変えるなり好きにしてOKです。

別にクリックイベントで自力でオンオフしてもいいのですが、トグルグループに該当する機能を作るとなると「Imageの配列持って、オンでない画像はオフにして」という動作になるのでちょっと面倒かなーと思います。
なので今回についてはトグルで処理した方が良いかと。

Comments

[LunarEclipse]

すみません、Image型クラス変数imgが存在することを明示しようとして一番まずい書き方をしてしまいました。
現在次のような状態でテストしております.
プレハブ生成時にpic1は表示されますが、Change()を呼び出してもpic2を表示することができず、★の行のNullReferenceが返されます。

public class ImageSet : MonoBehaviour {
private Image img;
public Sprite pic1; //Unityでプレハブにアタッチ
public Sprite pic2; //Unityでプレハブにアタッチ

private void Start() {
img = GetComponent<Image>();
img.sprite = pic1;
}
public void Change() {
img.sprite = pic2;★
}
}

また、呼び出し元のスクリプトで次のようにプレハブを生成した直後にすぐpic2に切り替えるようにしてみたところ、NullReferenceが返されることは無くなりましたが画像は変わりませんでした。

GameObject ins = Instantiate(prefab, pos, Quaternion.identity) as GameObject;
ins.transform.parent = parent.transform;
ins.transform.Find("Background").gameObject.GetComponent<ImageSet>().Change();

[sakura_hana]

>プレハブ生成時にpic1は表示されますが、Change()を呼び出してもpic2を表示することができず、★の行のNullReferenceが返されます。
こちらについては、Change()をどんなタイミングで呼んでいるのでしょうか。
例えば別のスクリプトのUpdateでやっている場合、ImageSetのStartより早くChangeが呼ばれている可能性もあります（ただその場合エラーで止まるのでpic1も入らなさそうな気がするので、おかしい挙動ではあります）。
それかもしくは、Change時点でimgコンポーネントが削除されているケースですが、普通に使っていればまず無いかなーとは思います。

>プレハブを生成した直後にすぐpic2に切り替えるようにしてみた
理由がわからないです。本当にChangeのソースコードはこれだけでしょうか。
Changeの中にDebug.Logを仕掛けてimgとpic2がどんな値を取っているか確認してみてください。

なお単純に「Change時にimgがnull」が原因であれば、Changeの先頭で
if (img == null) img = GetComponent<Image>();
とでも書いておけばとりあえず動くとは思います。

[LunarEclipse]

本文側に取得したログ、呼び出し元のスクリプト、ImageSetスクリプトの画像を追加しました。
ログを見るとChange()が先に呼ばれ、picture2が貼られたのちStart()によりpicture1が貼られているようで、実際にStart()がらpicture1を貼る部分を削除したところpicture2が表示されました。
エラーが出ていた直接の原因はChange()が先に呼ばれてしまうためChange時にimgがnullということですね。

ではStart()が先に呼び出されるようにするにはどうしたらよいでしょうか。
現在は実験的に生成後すぐにChangeするコードにしていますが、エラーが発生した当初は表示するプレハブを全部生成し、その後spriteを貼るという動作だったのでStart()が呼び出される間もなくChange()が呼ばれていたとは考えにくいのでは？と思ってしまうのですが…。

[sakura_hana]

コメント遅れて申し訳無いです。
Start()は公式ドキュメント曰く「最初のフレームのアップデート前」に呼ばれるそうなので、その前に他の処理が割り込むとこのようなケースになるようですね。
https://docs.unity3d.com/ja/current/Manual/ExecutionOrder.html
正確なところが私もあやふやだったのですが解決されたようで何よりです。