Unity UIに用意されているボタンの使い方です。とりあえず作成して、クリックした時に何かイベントを起こすところまでやります。
ボタンの作成
![unity ボタン button1](https://sunagitsune.com/wp-content/uploads/2021/10/162d9a92f01edc75fe448bd3602092a1.png)
ボタンを作るには、ヒエラルキーの+(Create)→UI→Buttonをクリックします。
![unity ボタン button2](https://sunagitsune.com/wp-content/uploads/2021/10/54d11ec30cf2e48b66f3ff733cdd6529-650x359.png)
ボタンが画面上に配置されました。
![unity ボタン button3](https://sunagitsune.com/wp-content/uploads/2021/10/02e2e84dcce345360343398609d6d78f.png)
UI要素は必ずCanvasとセットになるので、もしまだ作っていなければCanvasも一緒に作られているはずです。
もし後で書くスクリプトも試してみたい場合、UI→テキストもいっしょに作成して、画面内に配置しておいてください。
キャンバスがデカ過ぎる件についてはこちら参照。
もし後で書くスクリプトも試してみたい場合、UI→テキストもいっしょに作成して、画面内に配置しておいてください。
キャンバスがデカ過ぎる件についてはこちら参照。
![unity ボタン button4](https://sunagitsune.com/wp-content/uploads/2021/10/ff1151e81a4507da16170d561068fcda.png)
Buttonの子オブジェクトにさらにTextがあり、
![unity ボタン button5](https://sunagitsune.com/wp-content/uploads/2021/10/eafe17c06e018259c03e1baf7952c7ee-650x309.png)
Textのヒエラルキーをいじることで、表示する文字やフォント、色などを変更できます。
![unity ボタン button13](https://sunagitsune.com/wp-content/uploads/2021/10/98998e180fdc99a59f0bb1fc9d986ab4.png)
メインのテキストと差別化するために、ちょっと名前を変えておきます。
ボタンを押すとイベント
コライダーの追加
![unity ボタン button6](https://sunagitsune.com/wp-content/uploads/2021/10/c619ec6cf18883af1b990336574f8c9f.png)
先に当たり判定を作ります。
ボタンのインスペクター最下部でコンポーネントを追加→
ボタンのインスペクター最下部でコンポーネントを追加→
![unity ボタン button7](https://sunagitsune.com/wp-content/uploads/2021/10/0d5b225e70983289e29493f8e203125c-1.png)
2D物理→
![unity ボタン button8](https://sunagitsune.com/wp-content/uploads/2021/10/37afb79faf704022e970addab9fd5214-1.png)
2Dボックスコライダーをクリックします。
イベントトリガーの追加
UIオブジェクトはイベントトリガーという機能を使うことで何かした時にイベントを起こすことができ、この記事ではテキストをクリックするとイベントが起きるようにしています。
なのでこれの引き写しになるんですが、
なのでこれの引き写しになるんですが、
![numberbox15](https://sunagitsune.com/wp-content/uploads/2021/07/numberbox15.png)
ボタンのインスペクターでコンポーネントの追加→イベント→
![numberbox16](https://sunagitsune.com/wp-content/uploads/2021/07/numberbox16.png)
イベントトリガーをクリックします。
![numberbox17](https://sunagitsune.com/wp-content/uploads/2021/07/numberbox17.png)
イベントトリガーコンポーネントが追加されたら、新しいイベントタイプを追加→Pointer Clickをクリックします。
![numberbox18](https://sunagitsune.com/wp-content/uploads/2021/07/numberbox18.png)
+を押すとオブジェクトが「なし」となっているので、
![unity ボタン button9](https://sunagitsune.com/wp-content/uploads/2021/10/e80e125c6e7a14fa47c891f305319a7a.png)
自分自身(Button)をヒエラルキーからドラッグしてきてセットします。
スクリプトの設置
//Unity C#
using UnityEngine.UI;
//好きな名前で
public void ButtonClick()
{
GameObject text = GameObject.Find("Text");
text.GetComponent().text = "Changed!";
}
スクリプトを作成し、public voidの後に好きな名前をつけてメソッドを作り、その中に左記のコードを記述します。
やってることは「Text」という名前のオブジェクトを見付けて、そのテキストを変更するという処理です。これのためにさっきボタンのテキストの名前を変更しました。
やってることは「Text」という名前のオブジェクトを見付けて、そのテキストを変更するという処理です。これのためにさっきボタンのテキストの名前を変更しました。
![unity ボタン button10](https://sunagitsune.com/wp-content/uploads/2021/10/95585e699daf5c599dfa7a0055f7a973.png)
スクリプトをボタンにアタッチし、
![unity ボタン button11](https://sunagitsune.com/wp-content/uploads/2021/10/889304f37b1afb612ce7065e91848a49.png)
ボタンのイベントトリガーのNo Functionをクリック→作ったクラス名→作ったメソッド名をクリックします。これで大体終わり。
環境準備
![onclk16](https://sunagitsune.com/wp-content/uploads/2021/02/onclk16.jpg)
まだ作ってなければ、ヒエラルキーの+(Create)→UI→Event Systemを追加します。
![unity ボタン button12](https://sunagitsune.com/wp-content/uploads/2021/10/4fcae8fddf04b6a52196ad892f287127.png)
それからMain Cameraをクリックし、
![onclk18](https://sunagitsune.com/wp-content/uploads/2021/02/onclk18.jpg)
インスペクターでコンポーネントの追加→イベント→
![onclk19](https://sunagitsune.com/wp-content/uploads/2021/02/onclk19.jpg)
2D物理レイキャスターをクリックします。
完成品
![click changed](https://sunagitsune.com/wp-content/uploads/2021/10/click-changed.gif)
以上の手順を踏むと、「クリックするとテキストを変更するボタン」が作成できます。
![](https://sunagitsune.com/wp-content/uploads/2021/07/computer-1343393_1280-160x90.jpg)
やりたいことから逆引きするUNITYの使い方まとめ
Unityをやりたいことから学習していけるよう、機能・用途別にまとめたページです。C#の命令別の逆引きは現時点で作っていません。2019の時期に書き始めているので、それより前のバージョンについては言及しません。
コメント