問題 Unityのボタンに円形の画像を使った際、ボタンの選択範囲が四角になってしまうため、円形の外にも選択判定ができてしまう問題があった。 単純な円形なら後述するICanvasRaycastFilterを使えばいけるけど、半円やキャラクタの形をしたボタンなどを実装したい場合は厳しそう。 例えば、下の星の画像でボタンを作り、星の範囲だけに判定をもたせたいのに、 こんな感じに、画像がちょうど入る四角い範囲がボタンになってしまい、ピンク色のところにも判定ができてしまう。 前提 画像の非選択にしたい場所が透過されている ようは透過画像を使いたい デモ 処理の説明の前にとりあえずデモ。 左が処理前、右が処理後です。 処理前は星の外をクリックしても反応していますが、処理後は反応しなくなりました。
解決方法 RaycastMask.csをProjectにコピペ
RaycastMask.csをProjectに置く。 また、コピペする際、25,122行目のフラグがあると動かないのでそれを除いたものをする。
Projectにある使いたい画像の設定を変える ボタンを作る おわり
ちょっと解説 RaycastMask.csのざっくりとした処理 画像の情報を取り、透過されているかを判定する(GetPixcel) 透過されていない範囲にレイキャストを与える(ICanvasRaycastFilter) GetPixcel とは 座標(x, y)のピクセルのカラーを取得します。Unity - スクリプトリファレンス: Texture2D.GetPixel
これで画像の状態を取ることができる。
ICanvasRaycastFilter とは RaycastMask.cs が継承してるクラス。
この要素はレイキャストをフィルタリングすることができます。トップレベルの要素がヒットした場合、その位置が有効であるとさらに 'チェック' することができます。 ICanvasRaycastFilter - Unity スクリプトリファレンス
これを使うことで、uGUIの選択範囲を広めたり狭めたりできる。 詳しい使い方は以下のサイトをみればわかると思います。
UnityのuGUIのクリック範囲を広げたり制限したりする方法 - テラシュールブログ
Read/Write Enabled とは テクスチャデータをスクリプトからアクセスできるようにします(GetPixels、SetPixels、その他の Texture2D 関数)。注意することとして、作成されたテクスチャデータは、テクスチャアセットとして必要なメモリ量は倍となります。必ず、必要な場合のみ使用してください。これは非圧縮や DXT 圧縮のテクスチャでのみ有効であり、その他の圧縮テクスチャの種類では読みこむことができません。デフォルトでは無効となっています。 テクスチャ - Unity マニュアル