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



【Unityアセットストア公式】初購入特別キャンペーン

期間:日本時間 10月31日 17:00時まで
対象:アセットストアで初購入のユーザー限定
詳細:Unityアセットストアで初めてアセットを購入いただく方限定、アセット全品20%OFF


◆◆◆◆


Unity2019.1.0f2
Windows10

Button整列&キー選択/トップ

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

■Buttonを整列させる

Buttonを出し準備する

まずはButtonを出します。

Hierarchy > Create > UI > Button

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

Button整列&キー選択/Buttonを出す

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

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

Hierarchy > Create > Create Empty

Button整列&キー選択/空のオブジェクトを出す

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

Vertical Layout Group

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

Button整列&キー選択/Vertical Layout Group

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

Layout Element

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

Button整列&キー選択/Layout Element

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

Content Size Fitter

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

Button整列&キー選択/Content Size Fitter

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

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

Button整列&キー選択/Content Size Fitter/サイズ変わる

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

Button整列&キー選択/Content Size Fitter/倍でもサイズ変わる

■Buttonを列にする

Grid Layout Group

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

Button整列&キー選択/Grid Layout Group

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

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

Button整列&キー選択/Grid Layout Group/Button配置

Cell Size

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

Button整列&キー選択/Grid Layout Group/Cell Size

Spacing

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

Button整列&キー選択/Grid Layout Group/Spacing

Start Corner

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

スポンサーリンク

Start Axis

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

Child Alignment

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

Constraint

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

3行の場合

Button整列&キー選択/Grid Layout Group/Constraint/3行/設定

Button整列&キー選択/Grid Layout Group/Constraint/3行/Button配置

2列の場合

Button整列&キー選択/Grid Layout Group/Constraint/2列/設定

Button整列&キー選択/Grid Layout Group/Constraint/2列/Button配置

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

■Buttonをキー選択する

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

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

Button整列&キー選択/Visualizeボタン

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

Button整列&キー選択/Transitionの矢印

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

Button整列&キー選択/Pressed ColorとSelecter Color

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

Button整列&キー選択/マウス選択からキー選択へ

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

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

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

Button整列&キー選択/選択で色変わる

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

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

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

Button整列&キー選択/Auto Generate Animation

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

Button整列&キー選択/ButtonSelected

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

Button整列&キー選択/Selected/録画

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

Button整列&キー選択/Selected/録画/ScaleとColor

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

Button整列&キー選択/一番上の選択中のButtonサイズ

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

その結果こうなります。

Button整列&キー選択/選択中のButtonサイズ変わる

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

Button整列&キー選択/選択中のButtonサイズ変わる/Grid Layout Group

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

■関連記事

【UnityC#講座】角度と力を決めてボールの飛距離を競うゲーム【Flying Ball】

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

スポンサーリンク

目次に戻る


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください