Unity+UnrealEngine4+Blog.

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

Unity 数の多いUIの編集を少し楽にする工夫

UIの色やテキストの文字を変更したい時に、項目が沢山あるメニューだったりしたら、オブジェクトの数が多くなったり、階層が深くなったりして、変更したいテキストやボタンを探すのが大変!ということが起こりがちです。

目的のものを見つけるために少しですが時間を浪費しますし、めっちゃイライラします。

 

なので直接個別のコンポーネントを修正しに行くのではなく、1つ空オブジェクトを作成し、そこから複数のUIを修正できるようにしておくと、後々の修正が楽になります。

 

言葉より見るほうが早いので、例を作成してみました。

 

Canvasの中に以下の様な階層で、空ゲームオブジェクトを作成します。

f:id:nabesi777:20200626174850p:plain

 

 分かりやすいように名前を変更して、子オブジェクトの2つに、ImageコンポーネントとTextコンポーネントを加えました。通常だと、この2つのUIコンポーネントを編集する為にそれぞれのゲームオブジェクトを選択してそこから編集します。しかしUIオブジェクトの数や階層が深くなると、探すのが大変なので親のUIGroupParentから修正できたら楽よね!ということです。あとprefab化して、使いまわしやすいよね!ということです。

f:id:nabesi777:20200626174931p:plain

 

下のようにスクリプトスクリプトを作成して、UIGroupParentへアタッチしました。 

 

 

簡単にスクリプトの説明をすると、

[Header("")]を使用している理由は、複数のUIをここから編集するため、自分がどのUIを編集しようとしているか分かりやすくするためです。下のほうにあるInspectorの画像を見るとわかりやすいです。

 

今回はImageの色を変えるのと、Textのテキストと色を変更するように変数を宣言しています。ここは必要に応じて変更したい項目を追加していきます。ただしすべての項目をここから変更しようとすると膨大な数になるかもしれないので、頻繁に変更しそうな部分・コンポーネントをピックアップするのが良さそうです。

 

private void OnValidate()内で、変数の変更を反映させるようにしています。

OnValidateはInspectorで変更した値をエディターを再生しなくても即座に反映させるメソッドです。これで、個別コンポーネントを触っている感覚でUIの編集作業ができます。

 

下の画像がスクリプトを加えたInspectorです。

f:id:nabesi777:20200626180121p:plain

 

 

 ちりも積もれば・・なので、少しでも作業効率が上がるように色々工夫していきたいですね!