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のダウンロード等おこなっていない方はこちらの記事を参考に環境の構築をおこなってください。
※Visual Studio Codeのダウンロードをおこなっていない方はこちらの記事を参考にダウンロードをおこなってください。
※Unity EditorでVisual Studio Codeを使用できるようにこちらの記事参考に設定を行ってください。
プロジェクトの作成
ここからプロジェクトの作成をおこなっていきます。
・UnityHubを開き新しいプロジェクトを選択します。
・選択後の画面で2Dを選択します。
・プロジェクト設定の欄でプロジェクト名と保存場所を指定します。
※今回はSampleButtonというプロジェクト名に設定しました。
・プロジェクトを作成を選択しプロジェクトの生成を行います。
・作成を終えると自動的に作成したプロジェクトのSceneが開かれ、上記の画面になります。
※自動で開かれない場合は、作成したプロジェクトファイルのAssets/Scenes/のSampleScene.unityを選択し、プロジェクトを開きます。
２.上記画像の赤枠Defaultを選択し、2 by 3にUnity EditorのLayoutを変更します。
上記の画面に変わっていましたら大丈夫です。
UIの作成
作成後Canvasの追加を行います。
・エディターのHierarchy上で右クリックしUIのCanvasを選択しCanvasを作成します。
次にImageの作成を行います。
先ほど作成したCanvasを右クリックしUIのImageを選択し、Imageを作成します。
※今回はImageのcolorを切り替えるためのプロジェクトになるため、わかりやすいようにImageに画像の設定を行っておりません。
Imageの作成ができましたら、Imageのサイズを変更します。
・Imageを選択した状態でInspector上の`RectTransformを下記の値に変更します。
※今回は画面サイズを1458px,854pxに設定を行っており、画面の大きさと同じになるようImageも同じ大きさに指定しております。
| Width | Height |
|---|---|
| 1458 | 854 |
次にButtonの作成をしていきます。
先ほど作成したImageを右クリックしUIのButtonを選択し、Buttonを作成します。
※Imageに対してButtonの位置を中央に配置したいため、Imageの子要素としてButtonの追加を行います。
作成後Game画面、Scene画面どちらにもButtonが追加されたのがわかるかと思います。
Buttonを押した際の処理作成
次にボタンを押した際にImageのcolorを変更するScriptの作成を行っていきます。
・作成したButtonのInspectorでAdd Componentを選択します。
・選択後、検索でNewScriptを検索しNameを[Button]に設定しCreate and AddでButtonという名前のScriptの追加を行います。
追加したスクリプトを選択し、Edit ScriptでScriptを開きます。
Visual Studio Codeで開かれ、上記の画面のようになっているかと思います。
先ほど開いたButtonScriptに赤枠のコードを追記します。
※追加後コードの保存を忘れないでください、Control ＋ S で保存が行えます。
Buttonに押した際の実装を追加する
UnityEditorに戻り、Buttonを押した際の処理をButtonに追加していきます。
・ButtonのInspectorにあるButton内のOnclickを変更していきます。
・None(Object)となっている箇所にHierarchyのButtonをドラック&ドロップで追加します。
OnclickのNo Functionの箇所に先ほど追加したButtonScriptの関数を追加します。
・NoFunctionを選択しButtonのChangeImageColorを追加します。
追加後上記の画面のように、None(Image)が表示されます。
・None（Image）の箇所に作成したImageをドラック&ドロップで追加します。
※関数の引数にImageを追加し、変更したいImage（GameObject）を追加することでScript内でcolorの変更等が行えるようになります。
プロジェクトの実行
実際に作成したボタンを押して実装の確認を行いましょう！
・Unity Editor上にある実行ボタンを押して、Game画面のButtonを押します。
Imageの色がピンクに変わっていましたら成功になります
まとめ
今回はボタンを押した際にImageのカラーを変える実装を行いました。
コードを書くのが苦手な方でも、コードの量が最小限で実装を行えるため初心者の方でも手をつけやすいかと思います。
Unityには様々なComponentが用意されており、覚えれば覚えるほどUIの作成が簡易的にできるのが魅力的だと感じております。
Unityに触れ始めて数ヶ月ではありますが、悩んでいる方のためになる記事をこれからも投稿していきたいと思います！