今日、以前から行いたかったタイトル畫面のUI選択部分を実裝しました。通常、ゲームのタイトル畫面には「ゲームを始める」、「続きからプレイ」、「オプション」などのUIが並んでおり、プレイヤーが選択できます。Unityのボタン機能を使用すれば簡単に実現できますが、キーボードでUIを選択し、選択されたUIをハイライト表示する方法はどうすればいいのか、以前から考えていました。今日、時間をかけて調査して、解決策を見つけました。
まず、Unityはボタンを作成すると自動的にEventSystemを生成します。デフォルトのボタン(つまり、畫面に入るときに何もキーを押さないで事前に選択されるボタン)をEventSystem內のFirstSelectにドラッグ&ドロップするだけです。
次に、Standlone Inputの設定を変更する必要はありません。これにより、畫面に複數のボタンがある場合でも、キーボードの方向キーを使用して選択を切り替えることができます。Unityのデフォルトの機能設計は非常に使いやすいです。
キーボードでUIを操作できるようになったら、選択された後の外観をカスタマイズする問題が殘ります。ボタンにはNormal、Highlight、Selected、Pressed、Disableなどの異なる狀態があり、それぞれ選択された、押された、選択が解除されたなどの狀態を表します。ボタンのInspectorウィンドウで、これらの狀態の切り替え方法を選択できます。Transitionのドロップダウンメニューを変更することで、表示方法を変更できます。
最初に試みたのは、ボタンが選択されると、選択されたボタンの前に點滅する三角形の矢印が表示されるというアイデアでした。ボタンの畫像を変更する方法だけではうまくいかないように思われたため、Transitionでアニメーションを使用してみることにしました。Transitionの下にあるアニメーションを選択し、ボタンに対して設定を行うと、デフォルトのAnimatorが自動的に生成されます。
これを使用して、ボタンの狀態ごとにアニメーションを設定することができます。私が求めているのは、選択されたボタンが點滅するシンプルなテキスト効果です。
選択されたボタンが點滅すると、ゲーム界隈では一般的な表現と言えるでしょう。
対象のボタンを選択し、アニメーションを追加し、透明度が0から1に変化するループアニメーションを作成すれば、簡単に目的の効果が得られます。
最終的な効果は以下の通りです(私はキーボードを使用してコントロールしていますが、マウスクリックでも操作できます)。
今日はここまで、おやすみなさい。