【Unity】【uGUI】状態によってボタンの色を変える
ボタンにマウスオーバーしたり、クリックした時の色を変える方法です。
ちょっと目からウロコだったので、既知の話だとは思うけどご紹介。
開発環境
- Unity 2019.4.8f1
ボタンの中身が文字の場合
ボタンを作る
まずはボタンを作りましょう。
Hierarchyウィンドウで右クリックし、UI > Button を選択します。
すると自動的にCanvasが作成され、その下層にButtonが配置されます。
EventSystemがHierarchyになかった場合、こちらも自動的に作成されます。
※EventSystemはuGUIに必要なものだから、削除したダメダメ！！
Buttonコンポーネントの設定
InspectorでButtonオブジェクトの設定を行います。
* Normal Color・・・通常時の色
* Highlighted Color・・・マウスオーバー時の色
* Pressed Color・・・押下時の色
* Selected Color・・・選択時の色
* Disabled Color・・・非活性時の色
実際に色を設定して、試してみましょう。
こんな感じにしてみました。クッソ派手ですね。
こんなボタン作ったら、客先にどやされること間違いなしです。
こんな感じになりました。
Selected Colorが気になるところですね。
これは、ボタンを押下することでFocusが当たった状態と思われます。
ボタンの中身が画像の場合
ボタンを作る
テキストベースのボタンができたので、画像ベースのボタンを作ってみましょう。
ButtonオブジェクトのButtonコンポーネントとImageコンポーネントをいじります。
Imageコンポーネントの設定
- Source Image・・・通常ステータス用の画像
Buttonコンポーネントの設定
- Transition・・・Sprite Swap
- Highlighted Sprite・・・マウスオーバー時の画像
- Pressed Sprite・・・押下時の画像
- Selected Sprite・・・選択時の画像
- Disabled Sprite・・・非活性時の画像
こんな感じになりました！！
テキストベースのボタンと同様ですね。
ボタンの前景アイコンは変えず、背景色のみ変えたい
そりゃー、そう思うでしょう。
ボタンのためだけに、何枚も画像を用意したくなんてありませんよね。
そんな時にお役立ちなテクが、コチラ！！
背景が透過なアイコン画像を準備
この一枚だけで良いんです。
Imageコンポーネントを追加
Buttonオブジェクトの子供にImageを追加し、それにこの画像をセットします。
Buttonコンポーネントの設定
ボタンの中身が文字の場合と同様の設定となります。
そうすると、こんな感じになりました！！
知られているようで知られていない（というか、自分が知らなかった）テクのご紹介でした。
結論
- ボタンの状態を色で分ける方法
- テキストベースでの背景色、画像そのものの変更、アイコンベースでの背景色の変更が可能
- スマホアプリには、あまり不要なテクかもしれない・・。
