Unity5学習の際の覚え書き。

×

GUIはスクリプトで作る

UnityのGUIは、すべてスクリプトを使って作成する。
UnityのライブラリにはGUI部品のためのクラスが用意されており、そのインスタンスを作ることで画面上にGUIを表示できるようになっている。
作ったGUIは、表示するだけでなくクリックしたりして操作することができるし、その際のイベント処理なども行える。
このGUIクラスを利用することで、現在動いているゲームシーン上にGUIをオーバーラップして表示したりすることもできる。

簡単なGUIを表示させるスクリプト

スクリプトファイルを作成し、Main Cameraにアタッチ。

public class guiscript : MonoBehaviour {

	void OnGUI () {
		GUI.Box (new Rect (10, 10, 100, 100), "sample");

		if(GUI.Button(new Rect(20, 40, 80, 30), "Button")){
			Debug.Log("click now!!");
		}
	}
}

OnGUIの働き

今回のスクリプトは「OnGUI」というメソッドを使っている。
これはUpdateとほぼ同じような働きをする。
シーン表示を更新するごとに繰り返し呼び出し続けられる。
ただし、Updateと同期して同時に呼び出されているわけではなく、呼び出しのタイミングはUnityが判断している。
GUIがそこに存在するためには、常に描画し続けることが必要で、そのためのメソッドがOnGUI。

四角いパネルを描く「GUI.Box」

GUI.Box (new Rect (10, 10, 100, 100), "sample");
大枠の半透明のパネル。
ボックスは、GUIクラスの「Box」メソッドで描画する。
第1引数・・・「Rect」構造体。左下を起点として、開始位置(x)、開始位置(y)、横幅(x)、縦幅(y)を指定。
第2匹数・・・タイトル。テキストで指定。

Rectの考え方
位置と大きさを一度にまとめて扱うのに適している。

プッシュボタンを描く「GUI.Button」

GUI.Button(new Rect(20, 40, 80, 30), "Button")
プッシュボタンは、GUIクラスの「Button」メソッドで描画する。
第1引数・・・「Rect」構造体。左下を起点として、開始位置(x)、開始位置(y)、横幅(x)、縦幅(y)を指定。
第2匹数・・・ボタンに表示するテキスト。
ボタンクリックの処理
if(GUI.Button(new Rect(20, 40, 80, 30), "Button")){ ...

Buttonメソッドは真偽値を返すので、こういう書き方をしている。
このGUI.Buttonは、これで描画されたボタンをユーザーがクリックしたときにtrue、それ以外のときにはfalseを返す。
つまり、このGUI.Buttonの返値をチェックすることで、「このボタンをクリックしたときの処理」を用意することができるということ。

デバッグ処理の出力

Debug.Log("click now!!");

引数の値をConsoleビューに出力する。
ちょっとした値のチェックなどは、これでConsoleに表示すれば確認できる便利なメソッド。

ゲームの状況に応じてGUIを呼び出す

public class guiscript : MonoBehaviour {
	Color oldcolor;
	bool showGUI = false;

	void Start () {
		oldcolor = GameObject.Find ("Cube").GetComponent<Renderer> ().material.color;
	}
	
	void Update () {
		float h = Input.GetAxis ("Horizontal");
		float v = Input.GetAxis ("Vertical");
		GetComponent<Rigidbody>().AddForce (new Vector3 (h, 0f, v));
		GameObject.Find ("Cube").transform.Rotate (1f, 1f, 1f);
		Vector3 vec = transform.position;
		vec.y = 1.5f;
		vec.z -= 3;
		Camera.main.transform.position = vec;
	}

	void OnTriggerEnter(Collider collider){
		if (collider.name == "Cube"){
			collider.GetComponent<Renderer> ().material.color = Color.yellow;
			showGUI = true;
		}
	}

	void OnGUI () {
		if (showGUI) {
			GUI.Box (new Rect (10, 10, 100, 100), "Set Sphere");
			if (GUI.Button (new Rect (20, 40, 80, 30), "Reset!")) {
				GameObject selobj = GameObject.Find ("Cube");
				selobj.GetComponent<Renderer> ().material.color = oldcolor;
				showGUI = false;
			}
		}
	}
}

主要なGUI部品

テキストを表示するラベル

GUI.Label (new Rect (x位置, y位置, 横幅, 縦幅), "テキスト"));

(例)
GUI.Label (new Rect (10, 10, 100, 20), "あいうえお");

テキストを入力するフィールド/エリア

string 変数 = GUI.TextField ( <Rect>, "デフォルトのテキスト" );
string 変数 = GUI.TextArea ( <Rect>, "デフォルトのテキスト" );
TextFieldは1秒だけ。
TextAreaは複数行のテキストを入力する。
第2引数にはデフォルトで設定されるテキストを指定。
テキストを編集すると、そのテキストが返される。

設定をON/OFFするトグルボタン

bool 変数 = GUI.Toggle( <Rect>, 真偽値, "テキスト" );
設定をON/OFFするためのチェックボックスに相当する部品。
第2引数にはON/OFF状態を示す値、第3引数にはチェックボックス横に表示するテキストを指定。
返値はON/OFFの状態を示すbool値となる。

スライドして値を設定するスライダー

float 変数 = GUI.HorizontalSlider ( <Rect>, 初期値, 最小値, 最大値 );
float 変数 = GUI.VerticalSlider ( <Rect>, 初期値, 最小値, 最大値 );
ドラッグして値を設定するスライダー。
HorizontalSliderは水平スライダー、VerticalSliderは垂直スライダーをそれぞれ作る。
第2引数には初期値を指定。
第3、4引数に、スライダーの最小値と最大値を指定。
これらの値はすべてfloat値で指定。
返値は、設定された値(float値)となる。

複数項目から選ぶ選択グリッド

int 変数 = GUI.SelectionGrid ( <Rect>, 初期値, 配列, 配置数 );
いくつかの選択しを並べて表示し、その中から1つを選択させるラジオボタン的な働きをするもの。
あらかじめ用意しておいた配列をもとに選択しを表示し、その中から何番目のものを選択したかで選んだ項目をチェックする。

第2引数には、最初に選択されている項目の番号を指定。
第3引数には、表示する項目をまとめた配列(string配列と考えてOK)を用意。
第4匹数には、項目を横に何個ずつ並べるかを整数で指定。

返値は、選択されている項目の番号。
この番号は配列と同じく、一番最初はゼロ。

いろんなGUI部品を使ってみる

public class guiscript : MonoBehaviour {
	bool showGUI = false; // GUIのON/OFF
	bool transFlg = false; // 透明・不透明
	float transValue = 1f; // 透過度
	int rgbValue = 1; // RGBの値
	string msg = "スペースバーで設定"; // メッセージ

	void Start () {
		GameObject cube = GameObject.Find ("Cube");
		SetTransparent (cube, transFlg);
		SetTransValue (cube, transValue);
	}
	
	void Update () {
		float h = Input.GetAxis ("Horizontal");
		float v = Input.GetAxis ("Vertical");
		GetComponent<Rigidbody>().AddForce (new Vector3 (h, 0f, v));
		GameObject.Find ("Cube").transform.Rotate (1f, 1f, 1f);
		Vector3 vec = transform.position;
		vec.y = 1.5f;
		vec.z -= 3;
		Camera.main.transform.position = vec;
		if (Input.GetKeyDown (KeyCode.Space)) {
			showGUI = !showGUI;
		}
	}

	void OnTriggerEnter(Collider collider){
		// no action...
	}

	void OnGUI () {
		GUI.Label (new Rect (10, 10, 300, 20), msg);
		if (showGUI) {
			GameObject obj = GameObject.Find ("Cube");
			GUI.Box (new Rect (10, 40, 120, 160), "Set Cube.");
			msg = GUI.TextField (new Rect (20, 70, 100, 20), msg);
			transFlg = GUI.Toggle (new Rect (20, 100, 100, 20), transFlg, "透明/不透明");
			SetTransparent (obj, transFlg);
			transValue = GUI.HorizontalSlider (new Rect (20, 130, 100, 20), transValue, 0f, 1f);
			SetTransValue (obj, transValue);
			string[] items = { "R", "G", "B" };
			rgbValue = GUI.SelectionGrid (new Rect (20, 160, 100, 20), rgbValue, items, 3);
			SetRgbValue (obj, rgbValue);
		}
	}

	// 透明・不透明の切り替え
	void SetTransparent(GameObject obj, bool f){
		if (f) {
			obj.GetComponent<Renderer> ().material.shader = Shader.Find ("Transparent/Diffuse");
		} else {
			obj.GetComponent<Renderer> ().material.shader = Shader.Find ("Diffuse");
		}
	}

	// 透過度の設定
	void SetTransValue(GameObject obj, float v){
		Color c = obj.GetComponent<Renderer> ().material.color;
		c.a = v;
		obj.GetComponent<Renderer> ().material.color = c;
	}

	// RGBの変更
	void SetRgbValue(GameObject obj, int v){
		Color c = obj.GetComponent<Renderer> ().material.color;
		c.r = 0;
		c.g = 0;
		c.b = 0;
		switch (v) {
		case 0:
			c.r = 1f;
			break;
		case 1:
			c.g = 1f;
			break;
		case 2:
			c.b = 1f;
			break;
		}
		obj.GetComponent<Renderer> ().material.color = c;
	}
}

gui-sceneを参照

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu

【メニュー編集】
Wiki記法ガイド

リンク

ゲームバー大阪心斎橋

ゲームバー大阪梅田

ゲームバー大阪心斎橋

ダーツ&ダイニングバー大阪梅田

メニュー

Unity


スマホ操作

Unity - GameObject

Unity - 3DCG

メンバーのみ編集できます