IshidaGames【UnityC#講座】Buttonを整列させる、キー選択をするTweetnoteで管理人イシゲーのゲームの思い出記事を100円で公開しました。今回はButtonをコンポーネントできれいに並べる方法を紹介します。ステータス画面やアイテム画面など、本格的にゲームを作ると大量のボタンの設置が必要になりますが、ひとつひとつ丁寧に設置なんてやってられません。そこで便利なUnityのシステムを紹介することにしました。ついでに選択しているボタンの色と大きさが少し変わるようにします。■Buttonを整列させるButtonを出し準備するまずはButtonを出します。ButtonするとButtonの他にCanvasとEventSystemが出てきます。CanvasはUIオブジェクトの親になるもので、それがなければUIオブジェクトは機能しません。EventSystemは入力機器とオブジェクトを仲立ちするコンポーネントを持っています。次は空のオブジェクトを出します。Empty名前をButtonSummaryにし、Buttonの親オブジェクトにします。ここからコンポーネントを3つつけます。Groupをつけてください。これは子オブジェクトを縦にきれいに並べるものです。Groupをつけます。Groupはひとつのオブジェクトに一緒に並べられません。Centerにしました。Elementをつけます。これは親オブジェクトのコンポーネントに合わせるためのものです。Heightにチェックを入れると現在のButtonの大きさそのままで利用できます。Fitterをつけましょう。これは子オブジェクトの数や大きさによって柔軟に形を変えることができるものです。これがあるとこのように子オブジェクトのButtonに合わせて形を変えてくれます。ボタンの数を倍にしても大丈夫です。Group次はButtonを2列、3列にしましょう。Groupコンポーネントを使います。Groupと一緒に使えないのでこれらを削除してからセットしてください。これを使うとこのように升目上に並びます。Sizeを替えるとButtonの大きさが変わります。SpacingSpacingで空白の長さを変えられます。Corner右の上下、左の上下の4方向のどこから並べられるかが決められます。Axis縦に並べるか横に並べるか決められます。Alignment「すべての利用可能なスペースが埋まっていない場合に子のレイアウト要素に使用する整列。」とのことで、おそらくは十分なスペースがある場合の位置を決めるのでしょう。Constraint行数か列数を制限できます。3行の場合2列の場合これでButtonの整列は終わります。■Buttonをキー選択する選択したら色が替わるようにする今回はついでにボタンをキーボードなどでキー選択する方法も紹介します。言っても最初からある機能なのでそれを分かりやすくするだけです。ButtonコンポーネントのVisualizeをクリックしてください。してからButtonを選択するとSceneに黄色の矢印が出ておりその通りにキーで選択できます。Colorを好きな色に替えましょう。すると一度マウスでクリックしたところからキー選択できるようになります。マウスなしでキー選択するスクリプト次はマウスなしでキー選択できるようにする簡単なスクリプトを書きます。Cameraにアタッチしてください。これで最初から選択されている状態になりました。Animationで選択中は少し大きくなるようにする次は市販されているゲームによくあるような、選択中のボタンを少し大きなるようにしましょう。ButtonのButtonコンポーネントを見てください。Animationというボタンが出るのでクリックします。するとファイルを保存することになるのでButtonSelectedにしました。次にAssetsにButtonSelectedのアイコンがあり、矢印をクリックすると開くのでその中にあるSelectedをダブルクリックします。Animationウィンドウが開くので赤丸の録画ボタンをクリックして録画を始めましょう。赤丸の下がSelectedになっているかチェックしてから始めてください。ButtonのInspectorで、TransformのScaleとImageコンポーネントのColorをちょうど良いように変更します。0秒のところだけで変更したら終わりなのでまた赤丸の録画ボタンを押して録画を終えてください。上のButtonだけ選択されると少し大きくなり色も変わりました。さあ他のButtonもButtonコンポーネントのTransitionをAnimationに替え、ButtonSelectedをアタッチしてください。Hierarchy上でアタッチすると自動でAnimatorコンポーネントが生成されるはずです。Componentしてください。その結果こうなります。Groupでももちろんできます。今回はこれで終わりです。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。