ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

Unity入門 - Buttonの使い方 -

初めに




 UnityでのButton(ボタン)の生成の仕方やボタンを押したときに実行される処理の設定の仕方などを解説いたします。

Buttonの生成の仕方

 ヒエラルキーで右クリックをし、UI内のButtonをクリックすると生成できます。




 Canvas内にButtonが生成されます。

Buttonが表示されない場合

 次のような原因が考えられます。

  • Canvasの子オブジェクト内にTextがない
  • Buttonがカメラに映っていない

 ButtonもUIなので、扱いは他のUIと同様にCanvas内になければ、画面に表示されません。

Buttonのサイズ、Textの変更等

Buttonのサイズの変更

 Buttonを選び、Inspectorから変更できます。



Textの変更

 Buttonの子オブジェクトにTextがあることが分かります。そのTextを選択すると、Inspectorから変更できます。



 Textが表示される範囲はButtonのサイズになっています。

 Textの使い方については、以前書いた記事をご覧ください。

Buttonを押したときの処理を設定

次の手順で設定します。
①Buttonが押された際に実行される関数をC#スクリプトに記述する

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

public class SampleScript : MonoBehaviour
{
  //実行される関数を記述する
  //関数の名前は使用済みのものでなければなんでもよい
  public void onClick(){
     //実行される処理を記入
    Debug.Log("ボタンが押されたにぇ");
  }
}

②ゲームオブジェクトにC#スクリプトをアタッチする



③Buttonを選択し、InspectorのButtonにゲームオブジェクトをアタッチする
 onClick内の+をクリックする



 C#スクリプトをアタッチしたゲームオブジェクトをButtonにアタッチする



④押されたときに実行したい関数を選択する



 これで設定完了です。今回は、Buttonを押すとコンソールに "ボタンが押されたにぇ" と表示されます。

よく使う処理

ボタンの色を変える

 次の方法で色を変えることができます。

・Inspectorから変える
 ButtonのImageにあるColorを変えると変更できます。また、ButtonのNormal Colorをクリックすると、通常時のButtonの色を変えることができます。



 他にも、Pressed Color(押されたときの色)やHighted Color(マウスをButtonの上に置いているときの色)なども変更できます。
 Buttonの色を変えると、押された際の影の加減などがバラバラになるため、ImageのColorを変えるようにするとよいでしょう。

スクリプトから変更する
 スクリプトからButtonにアタッチされているImageのColorを変更することで、Buttonの色を変えることができます。
(参考)

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;  //ImageはUIのため、追加しておく

public class ButtonScript : MonoBehaviour
{
    public void onClick()
    {
      //色をマゼンタに変更
      this.GetComponent<Image>().color = Color.magenta; 
     //thisのため、Buttonの色を変えるには, このスクリプトはButtonにアタッチする必要がある
    }
}

 色については、マゼンタ以外にも設定されているものがあります。
詳しくはこちらをご覧ください。

docs.unity3d.com


 また、RGBAの数値を設定しても変更可能です。

ボタンを無効(押せないよう)にする

 ButtonのInteractableをfalseにすると、ボタンが無効の状態になります。

(参考)ボタンを押すと、無効にする

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;  //ButtonはUIのため、追加しておく

public class ButtonScript : MonoBehaviour
{
    public void onClick()
    {
      //Buttonのコンポーネントを取得
      Button btn = this.GetComponent<Button>();
      //interactableをfalseにする
      btn.interactable = false;
    }
}

 同じ要領で、Setactiveをfalseにしたり、Destroyをしたりすることもできます。

最後に

 Buttonの使い方について解説しました。Buttonは便利でいろいろな使い方ができますので、試行錯誤してみてください。