Unity+UnrealEngine4+Blog.

UnityやUnrealEngine4とかについて学習したことを書いてます

Unity 同じCanvas内にあるButtonのレンダリング順を個別に調整する

同じCanvas内にあるButtonのレンダリング順を個別に調整する方法です。

 

いちいちCanvasをたくさん用意してSortingLayerやOrderInLayerで変更するのが面倒な時や動的にたくさんのUIをSortingしたい時に便利かもしれません。

 

下はCanvasにボタンを2つ配置しただけのものです。Scaleとテキストを変更しただけで他のパラメーターなどはそのままです。

f:id:nabesi777:20200106202203p:plain

 

ButtonAを押下でImageが大きくなるアニメーションを実装した時に、ButtonAをBの前面に出すという例で作っていきます。

 

上記の例ではHierarcyの階層がBの方が下にあるので、通常だと下の画像のようにBが前面に出てしまいます。

f:id:nabesi777:20200106203959p:plain

 

(念のため上を作成した手順→)ButtonAへ以下のスクリプトをアタッチしてクリックイベントへ登録しました。

f:id:nabesi777:20200106204223p:plain

f:id:nabesi777:20200106204312p:plain

 

 

ButtonAを全面へ描画する手順は、まずButtonAへCanvasとGraphicRaycasterをAddComponentします。次に追加したらCanvasのOverrideSortingにチェックを入れます。またGraphicRaycasterも追加しないとクリックができなくなるので注意です。

f:id:nabesi777:20200106204456p:plain

 

ここまでできたら、クリックイベント時に呼ばれる関数でOrderInLayerの数値を変更すれば描画順を調整することができます。

 

上で張ったスクリプトへ2行付け加えました。

f:id:nabesi777:20200106205823p:plain

 

下はここまでやった後のButtonAをクリックした画像です。

f:id:nabesi777:20200106205933p:plain

 

Canvasをたくさん用意しなくても、MainCanvas内にあるUI要素へSubCanvasをAddComponentしてあげることで、レンダリング順を調整することができました!

 

*ButtonAのScaleを戻す時などはOrderInLayerの数字も一緒に元に戻してあげるのを忘れずに!