そらい研究室

関心のある物事について、少し深堀りして解説しています。

MENU

Unity UIを実装する方法とサンプルコード

UnityUIを使う前の下準備

①Unityに用意されているUI機能を使うときには、下記の設定を行う

  • Canvas(キャンバスグループ)を作成

  • UIの各要素をCanvas(キャンバスグループ)の子の階層に追加

  • Canvasのレンダーモード設定をカメラにする

  • コードの最上部に下のコードを追加

using UnityEngine.UI;

テキストUIの実装

テキストを実装する場合は、Canvas(キャンバスグループ)を作成し、Canvasを選択した状態でTextを作成する。

サンプルコード

アタッチしたテキストを任意の文字に書き換えるスクリプト

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


public class textWrite : MonoBehaviour
{
    public GameObject text_object = null; // Textオブジェクト

    void Start()
    {
       Text message = text_object.GetComponent<Text> ();
       message.text = "HelloWorld!";//テキスト表示
}

なお、Textの枠より文字サイズが大きいと文字が消えてしまうので、文字を大きくするときはあらかじめテキストの表示範囲も広げておく。

ゲージ(スライダー)UIの実装

HPゲージやタイミングゲージなどに用いる「スライダー」を実装する場合は、Canvas(キャンバスグループ)を作成し、選択した状態でスライダーを作成する。(スライダーの持ち手が要らない場合は、ヒエラルキーウィンドウ「Slider」内の「Handle Slide Area」を選択してDeleteする)

サンプルコード

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

public class Gauge : MonoBehaviour
{
    Slider timingSlider;

    void Start()
    {
        timingSlider = GetComponent<Slider>();
        timingSlider.maxValue = 100;
        timingSlider.minValue = 0;
        timingSlider.value = 0;

    }
}

応用:往復するゲージ(タイミングゲームとかによくあるやつ)

アルゴリズム

①trueフラグが立っているとき(初期状態)現在値をプラスする。
②ゲージが最大値になったらfalseフラグを立てる。
③次にfalseフラグがたったら現在値をマイナスする。
④ゲージが最小値になったらtrueフラグを立てる。

サンプルコード

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
 
 
public class Gauge: MonoBehaviour
{
 
    Slider timingSlider;
    float maxMeter = 100f;
    float minMeter = 0f;
    float nowMeter = 0f;
    bool status = true;

    void Start()
    {
 
        timingSlider = GetComponent<Slider>();

        //スライダーの最大値と最小値の設定
        timingSlider.maxValue = maxMeter;
        timingSlider.minValue = minMeter;

        //スライダーの現在値の設定
        timingSlider.value= nowMeter;
    }
 
    void Update()
    {
        if(status == true) {
            nowMeter += 0.5f; //trueフラグが立っているとき現在値をプラスする

            if (nowMeter == maxMeter)
            {
                status = false; //ゲージが最大値になったらfalseフラグを立てる
            }
        }
        else if(status == false) {
            nowMeter -= 0.5f; //falseフラグが立っているとき現在値をマイナスする

            if (nowMeter == minMeter)
            {
                status = true; //ゲージが最小値になったらtrueフラグを立てる
            }

        }
        timingSlider.value = nowMeter;
    }

}

ボタンの実装

ボタンの実装方法。Canvas(キャンバスグループ)を作成し、選択した状態でButtonを作成する。
そして、下のコードをボタンオブジェクトにアタッチする。

アルゴリズム

①Button型のclickButton変数を作成
②アタッチしたButtonコンポーネントからプロパティをclickButton変数に入力
③ボタンにクリックイベントが起きた時にAddListenerで「TestButtonOnClick」メソッドを呼び出す

サンプルコード

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


public class pushButton : MonoBehaviour

{

    Button clickButton;
    void Start()

    {
        clickButton = GetComponent<Button>();
        clickButton.onClick.AddListener(TestButtonOnClick);
    }

    public void TestButtonOnClick()
    {

        Debug.Log("Test Button");

    }

}