【unity】ボタンのクリック領域がずれた

自分のホームページを作ってみたものの何もゲームがなくて寂しい...
ということで急遽ゲームを作っています。GW?知らないなぁそんなものは
その作業中ボタンの領域判定がずれてしまったことを記事にします。

これは1~15まで書かれたボタンをプレハブを使って設置しています。
グラデーションは気にしないでください。
これだけだと問題あるようには見えませんがカーソルを近づけると、

自分のカーソルとは違う場所に色がついています。
グラデーションは(ry

1. canvasの描画順

私が見落としていた部分がいくつかあって、その１つがcanvasの描画順です。

この画像では上から1,2,3,...,15とCloneが作られています。
数字は子オブジェクトのテキストに表示させています。
canvas内で上にある方が一番奥に描画されるので、ここでは"1"が最も奥に描画されます。
先ほど見ていただいた動画では10や15などの右端の数字の判定領域が大きくなっていました。
これは10や15がその行で最も手前に描画されるためです。

2. 子オブジェクトの範囲

次は知らなかったのですが、ボタンの有効範囲は子オブジェクトに影響されることです。
子オブジェクトが広かったらその分クリックされる範囲も大きくなります。
実は他サイト様を参考にしながら透明な画像を追加してみたり迷走していましたが、うまく行かず、試行錯誤すること30分。

ワイ「だめや......いろいろ追加してみたけど表示がおかしいままや.......ん？」

ワイ「めっちゃ広いやんけええええええええええええええええええ」

というわけでwidthを親オブジェクトと同じにするとうまくいきました。
テキストもクリックの領域に含まれるんですね。

3. まとめ

今まで何を喋ってきたのかというのを横からの投影図で表しました。

緑がボタンの範囲(= 本来押されてほしい場所)で、

青がその数字のクリックが有効な場所で、

灰色が描画順により無効になっている部分です。

(この図で余計にわかりにくくなったらすみません)