P1-M02

【UNITY】UIを学ぶ１

1

UIの基「Canvas」を配置する

Unityが提供するUIを使う場合、まずHierarchy > Create > UI > Canvas でCanvasを作成します。ボタンやテキストなどのUIはすべてこのCanvasの中に配置していきます。

Canvasの設定

Unityではいろいろなディスプレイに対応できるように様々な設定をすることができます。

今回はとりあえず図のような設定にしましょう。この設定は基準となるディスプレイサイズを設定して、そのサイズ感を基にディスプレイ内のものを配置していきます。

2

ボタンとテキストエリアをおく

まずCanvas 内にCreate > UI > Button でボタンオブジェクトをアタッチしてみましょう。

ボタンの位置を調整する

ButtonのInspectorで場所をきめます

ボタンに表示する文字を変える

Button > Text のInspectorでボタンに表示される文字を変更します

3

ボタンとテキストエリアをおく

Project > Create > C#Script で新しいプログラムファイルを作成します

Canvas に作成したプログラムをアタッチします

4

ボタンを押すとテキストエリアに文字が表示されるプログラム

１．ボタンとテキストエリアを定義

２．ボタンを初期化し、クリックされたときに呼ばれるメソッドを指定

３．ボタンに応じでテキストエリアに文字を表示

	using System.Collections;
	using System.Collections.Generic;
	using UnityEngine;
	using UnityEngine.UI;//Unity UI を使うために必要です

	public class ButtonCont : MonoBehaviour
	{

	// ボタンをアタッチできるように変数をpublic定義
	public Button Button01, Button02;
	// テキストをアタッチできるように変数をpublic定義
	public Text Text01;

	// 初期化
	void Start()
	{
	Button btn1 = Button01.GetComponent<Button>();
	Button btn2 = Button02.GetComponent<Button>();
	btn1.onClick.AddListener(TaskOnClick);//ボタン1がクリックされたとき呼ばれるメソッドを定義
	btn2.onClick.AddListener(delegate { TaskWithParameters("Hello"); });//ボタン２がクリックされたときに呼ばれるメソッドを定義（delegateで引数を渡すことができます）
	}

	// 画面が更新されるたびに呼ばれます（毎フレームよばれる）
	void Update()
	{

	}
	//ボタン１がクリックされときに呼ばれます。
	void TaskOnClick()
	{
	Text01.text = "ボタン１クリック";
	}

	// ボタン２がクリックされたときに呼ばれます
	// 参考に引数がもたせてあります。
	void TaskWithParameters(string message)
	{
	Text01.text = "ボタン２クリック";
	}

	}