【Unity】Buttonを押してScriptの処理を実行させる方法 

Unityを始めたばかりの頃ボタンを押してScriptの処理をどう行うか不明で困ったことがあったためこの記事を書こうと思いました。
Unityを始めたばかりの方の参考になりましたら幸いです。

# 概要
Buttonを押してScriptの処理を実行させる方法について記述しています。
今回は、ボタンを押してImageの色を変更させる実装を行います。

# 目次

- Unityとは
- 実行環境
- プロジェクトの作成
- UIの作成
- Buttonを押した際の処理作成
- Buttonに押した際の実装を追加する
- プロジェクトの実行
- まとめ

# Unityとは
Unityは、ユニティ・テクノロジー社が提供している、ゲームエンジンになります。
様々なプラットフォームで動くゲームを作成できるのが魅力です。
また2D、3Dどちらのアプリも作成することができます。

# 実行環境
- OSバージョン : macOS Monterey version 12.4
- Unity Hub : 3.2.0
- Unity Editor : 2020.3.26f1 Personal
- Visual Studio Code : 1.69.2

※Unityのダウンロード等おこなっていない方は[こちらの記事](https://qiita.com/tommy1317/items/148fde8765f612af1f61)を参考に環境の構築をおこなってください。
※Visual Studio Codeのダウンロードをおこなっていない方は[こちらの記事](https://qiita.com/watamura/items/51c70fbb848e5f956fd6)を参考にダウンロードをおこなってください。
※Unity EditorでVisual Studio Codeを使用できるように[こちらの記事](https://qiita.com/riekure/items/c45868f37a187f8e1d69)参考に設定を行ってください。

# プロジェクトの作成
ここからプロジェクトの作成をおこなっていきます。
![スクリーンショット 2022-08-01 14.09.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/1d55bb13-9419-e2f2-70d2-8437015c48db.png)

・UnityHubを開き`新しいプロジェクト`を選択します。

![スクリーンショット 2022-08-01 14.10.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/07edd941-5305-5654-f9cd-74577195cfa5.png)

・選択後の画面で`2D`を選択します。
・プロジェクト設定の欄でプロジェクト名と保存場所を指定します。
　※今回はSampleButtonというプロジェクト名に設定しました。
・`プロジェクトを作成`を選択しプロジェクトの生成を行います。
![スクリーンショット 2022-08-04 14.14.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/347eddc6-1097-a787-79e9-3299a6c3d173.png)


・作成を終えると自動的に作成したプロジェクトのSceneが開かれ、上記の画面になります。
　　※自動で開かれない場合は、作成したプロジェクトファイルの`Assets/Scenes/`の`SampleScene.unity`を選択し、プロジェクトを開きます。
２.上記画像の赤枠`Default`を選択し、`2 by 3`にUnity EditorのLayoutを変更します。
![スクリーンショット 2022-08-01 14.16.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/b27e25ac-477b-9c04-5ba9-186932277fac.png)
上記の画面に変わっていましたら大丈夫です。
# UIの作成

![スクリーンショット 2022-08-02 15.11.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/2c872819-2638-2bf6-5ca5-c29a3ae9c490.png)

作成後Canvasの追加を行います。
・エディターの`Hierarchy上`で右クリックし`UI`の`Canvas`を選択しCanvasを作成します。

![スクリーンショット 2022-08-02 15.21.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/ed256589-465f-5bff-1dbc-dd4b473387b3.png)
次にImageの作成を行います。
先ほど作成した`Canvas`を右クリックし`UI`の`Image`を選択し、Imageを作成します。
※今回はImageのcolorを切り替えるためのプロジェクトになるため、わかりやすいようにImageに画像の設定を行っておりません。

![スクリーンショット 2022-08-02 15.50.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/513842d4-1e9b-f87f-a891-9f6a3baab6a2.png)

Imageの作成ができましたら、Imageのサイズを変更します。
・`Image`を選択した状態で`Inspector上`の`RectTransformを下記の値に変更します。　
※今回は画面サイズを1458px,854pxに設定を行っており、画面の大きさと同じになるようImageも同じ大きさに指定しております。
  |Width|Height|
  |:--|--:|
  |1458|854|

![スクリーンショット 2022-08-02 15.51.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/9035a01c-91a5-5c81-b6fb-d10060e1763c.png)
次にButtonの作成をしていきます。
先ほど作成した`Image`を右クリックし`UI`の`Button`を選択し、Buttonを作成します。
※Imageに対してButtonの位置を中央に配置したいため、Imageの子要素としてButtonの追加を行います。

![スクリーンショット 2022-08-02 15.53.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/4d2400ee-92d6-efbd-8d6b-3e16dcd3c16a.png)
作成後Game画面、Scene画面どちらにもButtonが追加されたのがわかるかと思います。

# Buttonを押した際の処理作成
次にボタンを押した際にImageのcolorを変更するScriptの作成を行っていきます。

　![スクリーンショット 2022-08-02 15.58.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/4b4284ff-c764-a055-6e2a-1ee27eb25800.png)
・作成した`Button`の`Inspector`で`Add　Component`を選択します。

![スクリーンショット 2022-08-02 16.00.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/6754229e-5bd4-d8e6-e0f5-3106b7d5fc35.png)
・選択後、検索で`NewScript`を検索し`Name`を`[Button]`に設定し`Create and Add`で`Button`という名前のScriptの追加を行います。

![スクリーンショット 2022-08-02 16.05.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/3ec7350c-aafd-ef4a-94a1-fffad117bc44.png)
追加したスクリプトを選択し、`Edit Script`でScriptを開きます。

![スクリーンショット 2022-08-02 16.08.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/dab4a0f4-3f79-6c83-e66f-965253df1d90.png)
Visual Studio Codeで開かれ、上記の画面のようになっているかと思います。

![スクリーンショット 2022-08-02 16.16.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/4add4ae7-1f2d-e8bd-5979-0a916cbfdd16.png)

先ほど開いたButtonScriptに赤枠のコードを追記します。
※追加後コードの保存を忘れないでください、`Control ＋　S`　で保存が行えます。

# Buttonに押した際の実装を追加する
UnityEditorに戻り、Buttonを押した際の処理をButtonに追加していきます。
![スクリーンショット 2022-08-02 16.19.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/4ac69361-e48f-f566-8866-180f481e2980.png)
・Buttonの`Inspector`にある`Button`内の`Onclick`を変更していきます。
・`None(Object)`となっている箇所に`Hierarchy`の`Button`をドラック&ドロップで追加します。

![スクリーンショット 2022-08-02 16.28.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/cafb841b-abe6-89cc-531d-83c9d89d9479.png)
`Onclick`の`No　Function`の箇所に先ほど追加した`ButtonScript`の関数を追加します。
・NoFunctionを選択し`Button`の`ChangeImageColor`を追加します。

![スクリーンショット 2022-08-02 16.33.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/5692fed0-4d54-bc6b-fade-1a245488297f.png)
追加後上記の画面のように、`None(Image)`が表示されます。
・`None（Image）`の箇所に作成した`Image`をドラック&ドロップで追加します。
※関数の引数にImageを追加し、変更したいImage（GameObject）を追加することでScript内でcolorの変更等が行えるようになります。

# プロジェクトの実行
実際に作成したボタンを押して実装の確認を行いましょう！![スクリーンショット 2022-08-02 16.40.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/46783c06-f01d-fd2d-c4aa-254eff7d99a7.png)
・Unity Editor上にある実行ボタンを押して、Game画面のButtonを押します。

![スクリーンショット 2022-08-02 16.42.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/a4b18f7a-91d1-4ec0-a270-652b06a18feb.png)

Imageの色がピンクに変わっていましたら成功になります

# まとめ
今回はボタンを押した際にImageのカラーを変える実装を行いました。
コードを書くのが苦手な方でも、コードの量が最小限で実装を行えるため初心者の方でも手をつけやすいかと思います。
Unityには様々なComponentが用意されており、覚えれば覚えるほどUIの作成が簡易的にできるのが魅力的だと感じております。
Unityに触れ始めて数ヶ月ではありますが、悩んでいる方のためになる記事をこれからも投稿していきたいと思います！