UnityのGUIでボタンを表示させる方法【初心者向け】

ソーシャルゲームなどの開発にもよく使われている「Unity」という統合開発環境を知っていますでしょうか？

今回はUnityのUI パーツの中でも一番使われる「ボタン」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• ボタンとは
• ボタンの作り方
• ボタンの各種設定
• ボタンに処理を追加して実行してみよう
• まとめ
• Unityを学習中の方へ

そもそもUnityについてよく分からないという方は、Unityとは何なのかについて解説した記事を読むとさらに理解が深まります。

ボタンとは

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

平たく言ってしまえば「押すと何かが起こる UI パーツ」ということです。

スマートフォンや PC の画面上にも必ずと言っていいほど出てきますね。

では Unity 上でボタンを作るにはどうしたら良いか、この後解説をしていきます。

ボタンの作り方

本章では、unityにおけるボタンの作り方解説してください。
また、作成手順の各画面の画像と実行結果を添付/記載して頂けると幸いです。

以下の参考サイトは画面が少々古いですが、このような流れを想定されているという認識となりました。
https://xr-hub.com/archives/4300
このような内容で、以下に記載がないサンプルコードなどが記載されるのであれば、問題ないと思われます。

まずはじめに Game ビューにしておく必要がありますので、エディターの表示を切り替えましょう。

そのあとで GameObject → UI → Buttonを選択してください。

以下のようなダイアログが表示されることがあります。この場合は「Import TMP Essentials」のボタンを押します。

すると以下のようにボタンが出現します。

[PR] Unityコース

ボタンの各種設定

ボタンには様々な設定ができます。ここでは一般的な４つの使い方をご紹介します。

• 位置設定
• サイズ設定
• テキスト設定
• 配色設定

設定変更をする前に

調整をする前の準備としてCanvasの設定をします。

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

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

このモードは画面サイズによってGUIを拡大・縮小してくれます。

基準解像度よりも大きい場合は拡大し、小さい場合は縮小します。

基準解像度とは画面中の「Reference Resolution」のことで、デフォルトでは（X=800,Y=600）に設定されています。

この値は今回は変更しないで下さい。

位置設定

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

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

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

Pos Xは基準となるCanvasの真ん中X=0の位置から左右（プラスの数値にすると右、マイナスの数値にすると左）

Pos Yは基準となるCanvasの真ん中Y=0の位置から上下（プラスの数値にすると上、マイナスの数値にすると下）

にそれぞれ動かすことができます。

自分の好きな位置にボタンを配置してみましょう。

サイズ設定

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

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

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

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

変更前はこちらで

変更後は以下のように大きくなっていることがわかります。

テキスト設定

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

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

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

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

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

Game ビュー上のボタンも変更されたことがわかります。

次にフォントのサイズを変えてみます。

変更前は24だったので36にしてみます

ボタンの大きさに見合ったフォントのサイズになりました。

配色設定

次にボタンの配色の変更方法を解説します。

配色はButtonのTransitionで設定をします。

それぞれの設定は以下のとおりです。

• Normal Color・・・通常時の色
• Highlighted Color・・・マウスオーバー時の色
• Pressed Color・・・押下時の色
• Selected Color・・・選択時の色
• Disabled Color・・・非活性時の色

ここでは Normal Color を青（RGB 0 , 0, 255）に変更してみます。

ボタンの色が青に変わりました

ボタンに処理を追加する方法

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

まず処理に必要なScriptを用意します。エディター上で Assets＞Create＞ C# Script と進みます。

名前は「ShowDialog」とします。

上記のScriptをダブルクリックするとエディターが起動するので、そのエディターで以下のコードを入力して下さい。

using UnityEngine;
using UnityEditor;

public class ShowDialog : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    //ボタンを押した時の処理
    public void Click()
    {
        bool isOK = EditorUtility.DisplayDialog("ダイアログ表示", "表示されましたか？", "OK", "Cancel");
    }
}

Button の Inspector にある下部にある「On Click」のところにある「＋」ボタンを押します。

以下の部分を押下します。

ダイアログが表示されるので、検索窓に ShowDialog と入力し、クリックします。

ShowDialog ＞ Click () を選びます

 

これでボタンにScriptの処理が紐づいたので、エディターを起動しましょう。

ボタンに処理を追加して実行してみよう

本章ではボタンに処理を追加して実行し、オブジェクト等へのギミックを発生させる例を解説してください。
また、サンプルコードと実行結果を記載して頂けると幸いです。

まとめ

本記事では、unityにおけるボタンの作成方法について解説しました。

• ボタンとは
• ボタンの作り方
• ボタンの各種設定
• ボタンに処理を追加する方法

ボタンの作成方法を理解することで、機能実装やボタン処理による動作を実現できます。

ぜひ使いこなせるように覚えておきましょう。

Unityを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

Unityを学習していて、このように思ったことはありませんか？

テックアカデミーでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、はじめてでもUnityでオリジナルゲームの制作ができるようになります。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！