【Unity uGUI】ボタン(Button)の基本的な使い方を徹底解説！

今回はuGUIのボタン（Button）の使用方法を解説していきます。

Unityではボタンをとても簡単に作成することができます。

本記事では以下の内容を解説します。

ボタン（Button）とは
ボタンの設置方法
処理の受け付け方法
画像をボタンにする方法

以上内容を解説していきます。

ボタンの設置方法はすでに理解しているという方は処理の受け付け方法からご覧ください。

Contents

1 ボタン（Button）とは
2 ボタンの設置方法
3 処理の受け付け方法
4 画像（イラスト）をボタンにする方法
5 まとめ

ボタン（Button）とは

ボタン(Button)とは「イベントをトリガーするためにクリックできる標準的なボタン」です。（公式リファレンスより）

button設置例

言い換えると、押された時にイベントを発生させる装置です。基本的にみなさんがイメージしているボタンと差はないと思います。

ボタンの設置方法

設置方法

ここからボタンの設置方法を解説していきます。

まずはじめに赤枠のGameObject→UI→Buttonを選択してください。

ボタン設置方法

すると以下のようなボタンが設置されると思います。

ボタン初期位置

Buttonを作成したにも関わらず、ボタンがGameビューで確認できない場合は、Canvasのサイズが大きすぎる可能性があります。

そのような場合はマウスホイールを使用し、ボタンがGame画面に出現するまでScene画面を縮小しましょう。

位置設定

次に配置の調節をします。

まずはじめに位置調整の準備としてCanvasの設定をします。

Canvasを選択してInspectorビューのCanvasScalerを変更します。

以下画像のように、UI Scale Modeを「Scale With Screen Size」に変更してください。

ScaleWithScreenSize

このモードは画面サイズによってGUIを拡大・縮小してくれます。基準解像度よりも大きい場合は拡大、小さい場合は縮小となります。

基準解像度とは画面中のReference Resolutionのことで、デフォルトでは（X=800,Y=600）に設定されています。この値は特別な理由がなければ変更しないほうが良いでしょう。

ここから位置の調整をはじめます。

HierarchyビューのButtonを選択してください。

選択したら、InspectorビューのRectTransformを変更していきます。

以下の画面のPos XとPos Yの値を変更することで位置を調整することができます。

ボタンX軸位置調節

このPos X＝−240というのは、基準となるCanvasの真ん中X=0の位置からみて−240ということです。（以下画像参考）

ボタンX軸位置調整確認画面

このXとYの値をそれぞれ変更することで、自分の好きな位置にボタンを配置することができます。

サイズ設定

次にボタンのサイズ変更の方法を解説します。

位置設定と同じようにButtonのRectTransformで設定をします。

WidthとHeightの値を変更することでボタンのサイズを変更することができます。

ボタンサイズ設定

初期値がWidth=160,Height=30ですので値をそれぞれ倍のWidth=320,Height=60に設定して変化を見てみましょう。

まずこちらが初期値のボタンサイズです。

初期値ボタンサイズ

こちらがサイズを２倍にしたボタンです。

２倍ボタンサイズ

サイズが変わっているのを確認いただけましたでしょうか。

テキストのサイズが小さいので違和感がありますね。

UIの位置・サイズに関する情報は以下記事をご参考ください。

参考記事）RectTransformの使い方

テキストの設定

次にテキストの設定方法を解説します。

Buttonの子要素にTextが存在します。こちらを選択してください。

ボタンの子要素

Textではテキストの内容やフォントサイズの変更、色の変更など様々な変更を行うことができます。

テキスト設定

基本的な部分を説明していきます。

まず画像最上部のTextではボタンのテキストを指定することができます。

Textを「Start」に変更して確認してみましょう。

ボタンテキスト変更

ボタンのテキストがStartに変更しているのが確認できると思います。

次にCharacterの３番目FontSizeでフォントのサイズを変更することができます。

先ほどボタンサイズを２倍に変更したため、テキストとボタンのサイズに違和感があります。そこでフォントサイズを２倍にして調節してみましょう。

FontSizeの初期値が「14」ですので、２倍の「28」に変更して確認してみます。

フォントサイズ２倍

ボタンサイズとテキストのサイズに違和感がなくなりましたね。

以上でボタンの基本的な設置方法の解説は終了です。

テキストに関する詳しい情報は以下記事をご参考ください。

参考記事）Textの使い方

処理の受け付け方法

ここからボタンが実際にクリックされた時の処理の方法を解説します。

Buttonに関連づけるスクリプトの記述

クリックした時に発生させるイベントを作成します。

今回はボタンをクリックするとSphere（球体）に重力を発生させる機能を作成します。

まずはじめにSphereを一つ作成してください。

作成したSphereにRigidBodyを追加します。Inspectorビュー最下部のAddComponent→Physics→Rigidbodyを選択してください。

以下赤枠のように、追加したRigidbodyのUseGravityのチェックを外してください。

UseGravity設定

次にSphereに重力を発生させるための新しいスクリプトを作成します。

Inspectorビュー最下部のAddComponentでNewScriptを選択して、新しいスクリプトを作成してください。作成するスクリプトの名前は任意ですが、今回は「DropSphereSample」とします。

作成したスクリプトを編集します。

以下のようなプログラムに書き換えてください。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class DropSphereSample : MonoBehaviour {

    //GameObject型の変数objを作成
    GameObject obj;

    //Rigidbody型の変数rbを作成
    Rigidbody rb;

	//Start関数
	void Start () {
        //FindメソッドでSphereを探してobjで参照
        obj = GameObject.Find("Sphere");

        //GetComponentでRigidbodyコンポーネントを取得してrbで参照
        rb = obj.GetComponent<Rigidbody>();

	}
	
    //Drop関数→ボタンが押された時に行う処理
    public void Drop(){
        //RigidbodyのUseGrvityの値をTrueにする→重力が発生
        rb.useGravity = true;

    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

public class DropSphereSample : MonoBehaviour {

//GameObject型の変数objを作成

GameObject obj;

//Rigidbody型の変数rbを作成

Rigidbody rb;

//Start関数

void Start () {

//FindメソッドでSphereを探してobjで参照

obj = GameObject.Find("Sphere");

//GetComponentでRigidbodyコンポーネントを取得してrbで参照

rb = obj.GetComponent<Rigidbody>();

}

//Drop関数→ボタンが押された時に行う処理

public void Drop(){

//RigidbodyのUseGrvityの値をTrueにする→重力が発生

rb.useGravity = true;

}

プログラムの説明はプログラム内のコメントをご参考ください。

スクリプトとボタンの連動方法

次に作成したスクリプトとクリックを連動させます。

以下赤枠のButtonオブジェクト→InspectorビューButton→OnClickの「＋（プラス）」を選択してください。

Button_OnClick

これによってクリックされた時の処理を追加することができます。

次に以下画像のようにSphereオブジェクトをオブジェクト指定欄にドラッグ&ドロップしてください。

Sphereをドラッグ&ドロップ

ドラッグ&ドロップが完了したら、以下赤枠のNoFunction→DropSphereSample→Dropを選択してください。

Onclick_Drop選択

これでクリックされた時に重力を発生させるDrop()を設定することができました。

では実際に実行して確認してみましょう。

DropSphere

少しわかりづらいかもしれませんが、ボタンをクリックすることでボールに重力が発生していることがわかると思います。

画像（イラスト）をボタンにする方法

次に画像をボタンにする方法をご紹介します。

まずはじめに先ほどと同様にボタンを一つ作成してください。

座標はアンカーを真ん中にしてX,Y=(0,0)に設定すると以上のように表示されます。

次に使用したい画像をUnityにインポートします。

今回は以下の画像を使用しますが任意ですのでお好きな画像をご使用ください。

ターン・バックするの矢印アイコン素材 3

画像ファイルを準備できたら、画像ファイルをドラッグ&ドロップでプロジェクトウィンドウに落とします。

画像インポート後のプロジェクトビュー

次にインポートした画像をスプライト化します。

インポートした画像をプロジェクトウィンドウで選択してください。

次に以下GIFのようにTexture Type→Spriteを選択してください。

画像のスプライト化

すると以下のようなウィンドウが表示されますので「Apply」を選択してください。

スプライト化を承認する

以上で画像のスプライト化は完了です。

画像（スプライト）に関する情報は以下記事をご参考ください。

参考記事）スプライトを使用して画像を使用する

次にヒエラルキーウィンドウのButtonの子オブジェクトであるTextを削除してください。

テキストを削除

これでボタンに表示されているテキストが削除されます。

同じくヒエラルキーウィンドウのButtonを選択します。

選択したら先ほどインポートしてスプライト化した画像をボタンに適用させます。

インスペクターウィンドウのImageコンポーネント→SourceImageにスプライト化した画像をドラッグ&ドロップしてください。

ボタンに画像を適用

これで画像をボタンに適用することができました。

また、今回の画像はサイズが1:1の比率ですのでRectTransformのWidthとHeightの値を1:1の関係にしておくと綺麗に表示されます。

ボタンとしてもちゃんと機能します。使い方は通常のボタンと全く変わりません。

ボタンに画像を適用実行結果

念のため上記で使用したスクリプトを記載しておきます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ReturnButton : MonoBehaviour
{
    //内容を変更するテキスト変数
    public Text returnText;
    //時間カウント用変数
    float TimeCount = 3f;

    // Start is called before the first frame update
    void Start()
    {
        returnText.text = "初期状態です";
    }

    // Update is called once per frame
    void Update()
    {
        //時間を計測
        TimeCount -= Time.deltaTime;

        if (TimeCount <= 0)
        {
            returnText.text = "初期状態です";
        }
    }

    //ボタンが押されたときの処理
    public void ChangeText(){
        returnText.text = "ボタンが押されました！(3秒後に戻ります)";
        TimeCount = 3f;
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class ReturnButton : MonoBehaviour

{

//内容を変更するテキスト変数

public Text returnText;

//時間カウント用変数

float TimeCount = 3f;

// Start is called before the first frame update

void Start()

{

returnText.text = "初期状態です";

}

// Update is called once per frame

void Update()

{

//時間を計測

TimeCount -= Time.deltaTime;

if (TimeCount <= 0)

{

returnText.text = "初期状態です";

}

//ボタンが押されたときの処理

public void ChangeText(){

returnText.text = "ボタンが押されました！(3秒後に戻ります)";

TimeCount = 3f;

}

まとめ

いかがでしたでしょうか。

今回はボタンの使用方法について解説してきました。

ボタンなど、イベントのトリガーを作成できるようになると、ゲーム開発がはかどりますのでぜひチャレンジしてみてください。

Yuya Furui

株式会社x gardenのLead Engineer。

バックエンドからフロントエンドまでフルスタックで開発しています。

最近Twitterはじめました　@FuruiYuya

ボタン（Button）とは

ボタンの設置方法

設置方法

位置設定

サイズ設定

テキストの設定

処理の受け付け方法

Buttonに関連づけるスクリプトの記述

スクリプトとボタンの連動方法

画像（イラスト）をボタンにする方法

まとめ

シェアする

関連投稿

XTELE VR Learningとは？活用事例や導入メリット、価格・評判を徹底解説

XRテックカンパニー「プレミアムアーツ」大解剖 – 技術力・開発力から採用情報まで

【スマホでDMMのVR動画を鑑賞する】対応スマホ機種・手順を徹底解説！

大阪・道頓堀でARによる観光DX体験！「道頓堀XRパーク」を紹介！

【Unity】Skyboxを使って背景を簡単に編集する方法

素人でも分かる！ARマーカーの仕組みを実例付きで解説