UnityでUIのボタンを使ってみる
Unity
以下の動画を参考に、UnityでのUIのボタンの見た目を変える方法、ボタンを押したときのイベントを扱う方法について学習しました。
完成したもの
昼と夜の背景をボタンで切り替えるようにします。
学んだこと
Canvasを画面に合わせる
UIのボタンなどは、Canvasと呼ばれる領域内に配置していきます。カメラが写す領域とCanvasの領域を揃えることで、管理しやすくなります。
- Canvasの「RenderMode」を「Screen Space – Camera」に設定
- 「Render Camera」に「Main Camera」を指定
UIボタンの見た目の設定
UnityのUIには、通常のUI(uGUI)とTextMeshProのUIの２つがあります。TextMeshProはもともとAssetStoreで提供されていたようですが、それがUnityのデフォルト機能として取り入れられたようです。
ちなみに、上記のYoutube動画ではTextMeshProをAssetStoreからインポートしていましたが、最近のUnityではその手順は不要になります。
ボタンの追加
Buttonではなく、Button – TextMeshProを追加します。
ボタンのテキストの見た目を変える
追加したButtonの子要素のTextの設定を変更します。フォントや文字色を変更することができます。文字色をグラデーションにしたい場合は、Color Gradientを ON にして、グラデーションの各色を指定します。
ボタンを選択したときの見た目を変える
ボタンの上にカーソルがのったことが分かりやすくなるように色を変えます。ButtonのTransitionを設定します。
ボタンの枠を変える場合は、Target Graphicを Button (Image) と指定します。そして、それぞれの状態のカラーを指定します。Fade Durationは、それぞれのカラーを切り換えるときのフェード時間です。
ボタンの枠ではなく、ボタンの文字の色を変えたい場合は、Target GraphicにButtonのTextを指定します。
ボタンを押したときのイベントの設定
ボタンを押したときのイベントを設定していきます。今回は、ボタンを押すと、朝の画像と夜の画像を切り換える処理を入れます。
まず、切り替えたい２つの画像ファイルを追加して、片方を非アクティブ状態にしておきます。
この２つのオブジェクトのActiveのOn/Offをボタン押下に合わせて切り換えるようにします。
ボタンのOnClickイベントに、night / morningオブジェクトのSetActiveで切り換えるように設定します。
まとめ
UnityのUIのボタンを使ってみました。
TextMeshProは多機能なので、やりたいことを大抵カバーできそうです。以下のページのようなまとめもありましたので、もう少し学習をしていきたいと思います。
