Layout Element

Unity2019.1.0f2
Windows10

□

今回はButtonをコンポーネントできれいに並べる方法を紹介します。
ステータス画面やアイテム画面など、本格的にゲームを作ると大量のボタンの設置が必要になりますが、ひとつひとつ丁寧に設置なんてやってられません。
そこで便利なUnityのシステムを紹介することにしました。
ついでに選択しているボタンの色と大きさが少し変わるようにします。

■Buttonを整列させる

Buttonを出し準備する

まずはButtonを出します。

Hierarchy > Create > UI > Button

するとButtonの他にCanvasとEventSystemが出てきます。

CanvasはUIオブジェクトの親になるもので、それがなければUIオブジェクトは機能しません。
EventSystemは入力機器とオブジェクトを仲立ちするコンポーネントを持っています。

次は空のオブジェクトを出します。

Hierarchy > Create > Create Empty

名前をButtonSummaryにし、Buttonの親オブジェクトにします。
さてここからコンポーネントを3つつけます。

Vertical Layout Group

まずButtonSummaryにVertical Layout Groupをつけてください。
これは子オブジェクトを縦にきれいに並べるものです。
横に並べる場合はHorizontal Layout Groupをつけます。
Horizontal Layout GroupとVertical Layout Groupはひとつのオブジェクトに一緒に並べられません。

真ん中に並べたいのでChild Alignmentを今回はUpper Centerにしました。

次はButtonにLayout Elementをつけます。
これは親オブジェクトのコンポーネントに合わせるためのものです。

Preferred WidthとPreferred Heightにチェックを入れると現在のButtonの大きさそのままで利用できます。

Content Size Fitter

最後はButtonSummaryにContent Size Fitterをつけましょう。
これは子オブジェクトの数や大きさによって柔軟に形を変えることができるものです。

今回は縦に並べるのでVertical FitをPreferred Sizeに替えます。

これがあるとこのように子オブジェクトのButtonに合わせて形を変えてくれます。

ボタンの数を倍にしても大丈夫です。

■Buttonを列にする

Grid Layout Group

次はButtonを2列、3列にしましょう。
そうするためにGrid Layout Groupコンポーネントを使います。

ButtonSummaryに付けますが、Horizontal Layout Group、Vertical Layout Groupと一緒に使えないのでこれらを削除してからセットしてください。

これを使うとこのように升目上に並びます。

Cell Size

Cell Sizeを替えるとButtonの大きさが変わります。

Spacing

Spacingで空白の長さを変えられます。

Start Corner

右の上下、左の上下の4方向のどこから並べられるかが決められます。

Start Axis

縦に並べるか横に並べるか決められます。

Child Alignment

「すべての利用可能なスペースが埋まっていない場合に子のレイアウト要素に使用する整列。」とのことで、おそらくは十分なスペースがある場合の位置を決めるのでしょう。

Constraint

行数か列数を制限できます。

3行の場合

2列の場合

これでButtonの整列は終わります。

■Buttonをキー選択する

選択したら色が替わるようにする

今回はついでにボタンをキーボードなどでキー選択する方法も紹介します。
と言っても最初からある機能なのでそれを分かりやすくするだけです。
まずButtonコンポーネントのVisualizeをクリックしてください。

そうしてからButtonを選択するとSceneに黄色の矢印が出ておりその通りにキーで選択できます。

分かりやすくするために、まずボタンのPressed ColorとSelecter Colorを好きな色に替えましょう。

そうすると一度マウスでクリックしたところからキー選択できるようになります。

マウスなしでキー選択するスクリプト

次はマウスなしでキー選択できるようにする簡単なスクリプトを書きます。

スクリプトはアクティブなオブジェクトならどこでも良いのでMain Cameraにアタッチしてください。
これで最初から選択されている状態になりました。

Auto Generate Animationで選択中は少し大きくなるようにする

次は市販されているゲームによくあるような、選択中のボタンを少し大きなるようにしましょう。

ButtonのButtonコンポーネントを見てください。
TransitionをAnimationに替えるとAuto Generate Animationというボタンが出るのでクリックします。

そうするとファイルを保存することになるのでButtonSelectedにしました。
次にAssetsにButtonSelectedのアイコンがあり、矢印をクリックすると開くのでその中にあるSelectedをダブルクリックします。

Animationウィンドウが開くので赤丸の録画ボタンをクリックして録画を始めましょう。
ちゃんと赤丸の下がSelectedになっているかチェックしてから始めてください。

そしてButtonのInspectorで、TransformのScaleとImageコンポーネントのColorをちょうど良いように変更します。

0秒のところだけで変更したら終わりなのでまた赤丸の録画ボタンを押して録画を終えてください。
するとこうなります。

一番上のButtonだけ選択されると少し大きくなり色も変わりました。
さあ他のButtonもButtonコンポーネントのTransitionをAnimationに替え、ButtonSelectedをアタッチしてください。
Hierarchy上でアタッチすると自動でAnimatorコンポーネントが生成されるはずです。
もしされなければ自前でAnimatorコンポーネントをAdd Componentしてください。

その結果こうなります。

Grid Layout Groupでももちろんできます。

今回はこれで終わりです。
お疲れさまでした。

フリーゲーム「一人称で生成迷路脱出」を公開しました

タグ: Layout Element

【UnityC#講座】Buttonを整列させる、キー選択をする