【Unity備忘録】ボタンUIを設置する

アイキャッチ画像 ゲーム制作
スポンサーリンク

ご挨拶

こんにちは、slashです。
ブログ更新は約3年ぶりです。

私がいつも自作ゲームを投稿していたサイト
ゲームアツマールのサービス終了が決定する、
という残念な事がありましたが、
ゲーム制作はまだまだ続けていくつもりです。

『ゲームアツマール』サービス終了のお知らせ
https://blog.nicovideo.jp/niconews/183352.html

いつもRPGツクールMVでゲーム制作をしていますが、
最近はUnityも使い始めました。
結構有名なゲーム制作エンジンですね。

今回の記事は私自身のためのメモみたいなものですが、
使い方をアウトプットする事で
自分自身にとっても勉強になりそうなので
書いていきます。

今回の記事はボタンUIを設置する方法です。

ボタンUIを設置する方法

記事作成時のUnityエディタのバージョン:2021.3.23f1

画面上にボタンのUIを設置する方法です。
ボタンがクリックされた時に何かの動作をさせる、
といった事ができるようになります。

素材の準備

ボタンの画像を準備します。
ここでは以下のような画像を使います。

ボタンの画像

これをUnityのプロジェクトビューにインポートします。

図1 ボタン画像のインポート

ボタンのオブジェクトを作る

ヒエラルキービューの「+」>「UI」>「Button – TextMeshPro」で
ボタンのオブジェクトを作成します。

図2 ボタンのオブジェクトを作成

すると、Sceneビューには画面に収まりきらない程の大きな
ボタンのオブジェクトが配置されるかと思います。
そこで、ヒエラルキービューの「canvas」を選択し、
インスペクタービューの「RenderMode」を「Screen Space – Camera」に設定し、
「RenderCamera」に「Main camera」をアタッチしてやります。

図3-1 Canvasの設定1
図3-2 Canvasの設定2

こうすると、ボタンのオブジェクトが画面内に
収まるような表示になるかと思います。

ボタン画像の設定

ヒエラルキービューから「Button」を選択し、
Source Imageに先ほどインポートしたボタンを画像を設定しましょう。
ボタンの大きさや縦横の拡大比率が気に食わない場合は
「Set Native Size」をクリックして「Preserve Aspect」にチェックを入れれば
画像本来のサイズで表示されます。
あとはScaleの数値をいじったり、拡縮ツールで
良い感じの大きさに設定しましょう。

また、アンカーの設定も行っておきます。
インスペクタービューのRectTransformの左上辺りにある
メニューからアンカーの位置を設定できます。
今回はボタンを画面下の中央付近に設置するので
「bottom」に設定します。

図4 ボタン画像の設定

補足
ボタン画像が他のオブジェクトの後ろに隠れてしまう場合は、
ヒエラルキービューの「canvas」を選択し、
「Order in Layer」の値を大きくすると
前面に表示されるようになります。

スポンサーリンク

スクリプトの作成

ボタンが押された時に実行される内容を記述したスクリプトを作成します。
プロジェクトビューに「C#script」を作成します。
ファイル名は任意でOKです。
ここでは「ButtonScript」にします。
このスクリプトをヒエラルキービューの
「Button」にアタッチします。

図5-1 C#Scriptを作る
図5-2 C#Scriptをアタッチする

今回は、
ボタンが押された時にコンソールにメッセージを表示する
という動作を作成します。

先ほど作成したC#Scriptに、
以下のメソッドを追加します。

public void DisplayMessage()
{
 Debug.Log("ボタンが押されたよ");
}

コンソールに「ボタンが押されたよ」という
メッセージを表示させるだけの
超シンプルなメソッドです。

ボタンが押された時の動作を設定する

ヒエラルキービューの「Button」を選択し、
インスペクタービューのOn Click()の項目にある「+」をクリックします。

以下の画像のように
「Button」オブジェクトをドラッグアンドドロップで設定し、
ButtonScript>DisplayMessage()を選択します。

図6 ボタンが押された時の設定をする

これでボタンが押された時に
DisplayMessage()メソッドが実行されるようになりました。

実行する

画面のボタンを左クリックし、
エディターの下の方に「ボタンが押されたよ」という
メッセージが表示されたら成功です。

図7 実行して動作を確認する
タイトルとURLをコピーしました