【Unity】Button(ボタン)をクリックすると色が変わるようにする方法【Script】

モンエナが至高だと思う。mizkyどす。

本記事ではUnityでButton(ボタン)を押したときにButtonの色が変わるようにする方法、特にScript(スクリプト)を用いた方法を紹介します。

色の切り替え

1. オブジェクトを作成

下記画像のようにButton(ボタン)やText(テキスト)オブジェクトを適当に配置します。Unity起動からオブジェクト配置までの流れはこちらの記事をご覧ください。

UIの作成

2. Script(スクリプト)の作成

オブジェクトを配置したら新規でScript(スクリプト)を作成しVisual Studio(ビジュアルスタジオ)で開きます。

下記に全体ソースコードを示します。(これコピペして貼り付ければいいと思うよ)

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

public class init_Script : MonoBehaviour
{
    GameObject japButton;
    GameObject engButton;
    GameObject checkButton;

    void Awake()
    {
        japButton = GameObject.Find("Button");

        engButton = GameObject.Find("Button (1)");
  
        checkButton = GameObject.Find("Button (2)");

        nameInput = GameObject.Find("InputField");

        checkButton.SetActive(false);

        japButton.GetComponent<Image>().color = Color.black;
        engButton.GetComponent<Image>().color = Color.cyan;

    }

    // Start is called before the first frame update
    void Start()
    {
        
    }

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

    }

    public void onClick_japButton()
    {
        japButton.GetComponent<Image>().color = Color.cyan;
        engButton.GetComponent<Image>().color = Color.black;
    }

    public void onClick_engButton()
    {
        japButton.GetComponent<Image>().color = Color.black;
        engButton.GetComponent<Image>().color = Color.cyan;
    }

    public void onClick_checkButton()
    {

    }
}

2.1. GameObjectの宣言

GameObject japButton;
GameObject engButton;
GameObject checkButton;

上記コードで、GameObjectを宣言します。

このスクリプトで3種類のButton(japButton/engButton/checkButton)を使用することをここで宣言しておきます。

2.2. Awake(初期起動時)の設定

void Awake()
{
    japButton = GameObject.Find("Button");

    engButton = GameObject.Find("Button (1)");

    checkButton = GameObject.Find("Button (2)");

    nameInput = GameObject.Find("InputField");

    checkButton.SetActive(false);

    japButton.GetComponent<Image>().color = Color.black;
    engButton.GetComponent<Image>().color = Color.cyan;

}

void Awake()関数は、このスクリプトが読み込まれたとき一度だけ実行される関数です。(jonaは正直void Start()関数との違いが分かっていない)

    japButton = GameObject.Find("Button");
    engButton = GameObject.Find("Button (1)");
    checkButton = GameObject.Find("Button (2)");

まずはGameObjectで宣言した3つのButtonとCanvasに配置したButtonを紐づけます。

Canvas内には下記画像のようにButton、Button (1)、Button (2)と命名されたButtonが配置されています。

GameObject (japButton/engButton/checkButton) に紐づけたいButton名をGameObject.Find(“ここにButton名入力”);のように入力すると紐づきます。

以降、GameObjectの設定をいじくると、UI上のButtonの設定に反映されるようになります。

2.3. Button(ボタン)が押されたときの処理

    public void onClick_japButton()
    {
        japButton.GetComponent<Image>().color = Color.cyan;
        engButton.GetComponent<Image>().color = Color.black;
    }

    public void onClick_engButton()
    {
        japButton.GetComponent<Image>().color = Color.black;
        engButton.GetComponent<Image>().color = Color.cyan;
    }

    public void onClick_checkButton()
    {

    }

public void onClick_***()関数はButton(ボタン)が押されたとき(クリックorタップ)に実行する関数です。この関数はスクリプトの外部からのトリガで実行する関数になるので、外部から読み込めるようにPublicにしてください。

        japButton.GetComponent<Image>().color = Color.cyan;
        engButton.GetComponent<Image>().color = Color.black;

GameObject名.GetComponent<Image>().colorはGameObjectの色の設定プロパティです。

これを指定する色の設定値に変更することでButtonの色を変更することができます。

3. Script(スクリプト)をButton(ボタン)にAttach(アタッチ)する

Script(スクリプト)作成後は、これをButtonにAttach(アタッチ=紐づけ・くっ付けるとかそんな感じの意味)します。

下記画像のように、 Create→Create Emptyで空のGame Objectを作成します。

すると下記画像のように赤丸で囲った部分に「GameObject」ができます。

これをクリックしてInspectorタブを表示させ、そこに先ほど作ったScript(スクリプト)をドラッグ&ドロップします。

次に、ButtonをクリックしてInspectorタブを表示させ、Button(Script)欄内のOn Click()欄の「+」をクリックします。

すると下記画像のような感じになります。

さっき作った「GameObject」をOn Click()欄内のNoneとか書いているところにドラッグ&ドロップします。

その後、 On Click()欄内のNo Functionとか書いてある場所をクリックすると先ほど作成したScriptのScript名が表示されるのでそこにカーソルを合わせます。

すると、Script内の関数一覧が表示されますので、先ほど作成したonClick_japButton()を選択します。

同様に、Button (1)のon ClickにもGameObjectをドラッグ&ドロップし、先ほど作成したonClick_engButton() を選択します。

これでAttach(アタッチ)は完了です。

4. 完成!!

完成

コメント

タイトルとURLをコピーしました