UI | はじめてプログラム

Unity5のColor構造体は、0から1の範囲で、Color32構造体が0から255の範囲を取ります。

Unity5では、UnityEngine.Color構造体とUnityEngine.Color32構造体があります。(公式) Color構造体は、floatを引数に取ります。Color32構造体はbyteで、0-255を引数に取ります。Color構造体は、0f～1.0fの値をれるもので、0f-255.0fの値を入れないように注意しましょう。

public Color (float r, float g, float b, float a);

public Color32 (byte r, byte g, byte b, byte a);

スクリプトで使う場合は、ColorかColor32か意識しましょう。

using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class ChangingColor : MonoBehaviour, IPointerClickHandler
{
	public GameObject helloworld;
	private Text textHellworld;
	private Outline textOutline;
	private Shadow textShadow;

	public Color testColor0 = new Color (1f, 0f, 0.5f, 1.0f);
	public Color testColor1 = new Color32 (255, 100, 5, 245);

	void Start ()
	{
		textHellworld = helloworld.GetComponent<Text> ();
		textOutline = helloworld.GetComponent<Outline> ();

		// OutlineコンポーネントはShadowを継承したクラスなので、
		// GetComponent<Shadow>()をすると、Outlineを取得してしまう。
		// 以下のように配列で取得するか、
		// または、Unityエディターで順序を変える(=私は未検証)
		textShadow = helloworld.GetComponents<Shadow> () [1];

		textHellworld.color = testColor1;
	}

	public void OnPointerClick (PointerEventData eventData)
	{
		Debug.Log ("OnPointerClick");

		if (textHellworld.color == testColor1) {
			textHellworld.color = testColor0;
		} else {
			textHellworld.color = testColor1;
		}

		textOutline.effectColor = new Color32 ((byte)Random.Range (0, 255), (byte)Random.Range (0, 255), (byte)Random.Range (0, 255), (byte)Random.Range (0, 255));

		textShadow.effectColor = new Color32 ((byte)Random.Range (0, 255), (byte)Random.Range (0, 255), (byte)Random.Range (0, 255), (byte)Random.Range (0, 255));
	}
}

using UnityEngine;

using System.Collections;

using UnityEngine.EventSystems;

using UnityEngine.UI;

public class ChangingColor : MonoBehaviour, IPointerClickHandler

{

public GameObject helloworld;

private Text textHellworld;

private Outline textOutline;

private Shadow textShadow;

public Color testColor0 = new Color (1f, 0f, 0.5f, 1.0f);

public Color testColor1 = new Color32 (255, 100, 5, 245);

void Start ()

{

textHellworld = helloworld.GetComponent<Text> ();

textOutline = helloworld.GetComponent<Outline> ();

// OutlineコンポーネントはShadowを継承したクラスなので、

// GetComponent<Shadow>()をすると、Outlineを取得してしまう。

// 以下のように配列で取得するか、

// または、Unityエディターで順序を変える(=私は未検証)

textShadow = helloworld.GetComponents<Shadow> () [1];

textHellworld.color = testColor1;

}

public void OnPointerClick (PointerEventData eventData)

{

Debug.Log ("OnPointerClick");

if (textHellworld.color == testColor1) {

textHellworld.color = testColor0;

} else {

textHellworld.color = testColor1;

}

textOutline.effectColor = new Color32 ((byte)Random.Range (0, 255), (byte)Random.Range (0, 255), (byte)Random.Range (0, 255), (byte)Random.Range (0, 255));

textShadow.effectColor = new Color32 ((byte)Random.Range (0, 255), (byte)Random.Range (0, 255), (byte)Random.Range (0, 255), (byte)Random.Range (0, 255));

}

上記は、GUIのTextの色を変更するC#スクリプトです。またOutlineコンポーネント、Shadowコンポーネントの記述もあり、Outlineもランダムで変更するようにしています。

ここで、注意ですが、UnityのColor構造体は、0f～1fの値の範囲チェックしないので、new Color(255f, 255f, 0f, 0f)などのようにも記述できてしまいます。他のプログラミング言語で似たようなColorクラスなどがあって、安易に0から255の値を入れてしまうと、コンパイルエラーは出ませんがColor構造体は、1以上を1とみなすだけなので、プログラマーの意図とは異なる挙動になってしまいます。

私は、ちゃんと確認せず、Colorは0から255を取ると思っていたので、この問題解決に結構苦労しました。

OutlineとShadowの関係

001

Outlineで、テキストに枠を付けることができます。またShadowで文字の影を作れます。OutlineはShadowを継承しています。そのため以下の画像のように、TextにOutlineコンポーネントとShadowコンポーネントを用意した場合は、GetComponent<Shadow>()で、取得しようとしたときに、Outlineコンポーネントが所得されるようです。

002

回避方法としては、GetComponents<Shadow>()で、Shadow[]を取得するか、Unityエディターで順番を入れ替えることです。(順番の入れ替えについては私は検証していませんが、おそらくできるでしょう。)

	void Start ()
	{
		textHellworld = helloworld.GetComponent<Text> ();
		textOutline = helloworld.GetComponent<Outline> ();

		// OutlineコンポーネントはShadowを継承したクラスなので、
		// GetComponent<Shadow>()をすると、Outlineを取得してしまう。
		// 以下のように配列で取得するか、
		// または、Unityエディターで順序を変える(=私は未検証)
		textShadow = helloworld.GetComponents<Shadow> () [1];

		textHellworld.color = testColor1;
	}

void Start ()

{

textHellworld = helloworld.GetComponent<Text> ();

textOutline = helloworld.GetComponent<Outline> ();

// OutlineコンポーネントはShadowを継承したクラスなので、

// GetComponent<Shadow>()をすると、Outlineを取得してしまう。

// 以下のように配列で取得するか、

// または、Unityエディターで順序を変える(=私は未検証)

textShadow = helloworld.GetComponents<Shadow> () [1];

textHellworld.color = testColor1;

}

このプロジェクトの配布

Unity5.4で作成

http://hajimete-program.com/games/SandboxChangeTextColor.zip

ドラッグアンドドロップのチュートリアル動画をやってみました。

マインクラフトやディアブロのインベントリーはアイテムをドラッグアンドドロップすることが可能です。将来インベントリー管理を作るときに役立ちそうなので以下のチュートリアルに挑戦してみました。このチュートリアルは30分の動画が3本で、多くの事を学べました。

この動画シリーズは90分ぐらいでUnityのGUIの基礎が分かるためお勧めです。このカードゲームで基礎を学べばインベントリー作れそうです。この動画をやると、UnityのGUIのイベントシステムとEvent Triggerを使わずC#スクリプトのみで実装する方法の基礎がわかります。学習できるキーワードとしては以下になります。

Graphics Raycaster
Canvas Group – blockRaycasts
Layout Element
Layout Group
Event System
IBeginDragHandler, IDragHandler, IEndDragHandler
IPointerEnterHandler, IPointerExitHandler
IDropHandler
SiblingIndex

第２回までは、基本的に言われたとおりにソースコードを打ち込んでいくだけで理解できるので問題ありませんが、第３回はカードをドラッグしたときに、その元の位置を保持する仕組みを作るため、かなり難しいです。とはいえ動くソースコードが手に入ってGUIのキーワードがたくさん分かったので、ソースコードの解析は今後の課題として、この知識をインベントリー管理に役立てたいです。

また、今回Horizontal Layout Groupを使いましたが、インベントリー管理の場合はGrid Layout Groupをうまく使う必要がありそうです。

プロジェクトの配布

http://hajimete-program.com/games/Unity Tutorial – Drag & Drop Tutorial (quill18creates) – 02.zip

Unity5のインベントリー作成チュートリアルの比較とやってはいけない動画

Youtubeで「unity inventory tutorial」と検索するとUnity5でインベントリー作成のチュートリアルが見つかります。ですが出版業界の人に編集してもらった動画ではないため、無駄に時間が長かったり、やってみない事には自分に合った動画かわかりません。いくつか動画の長さを調べたり、やってみたので感想を書きます。

やってはいけない動画

この動画に挑戦しましたがPart2で中断しました。最初は、動画一覧を見た時に、合計12個の動画で、最終更新は2015年9月、１つあたりの動画の長さも15分以内のため、自分に合ってそうなので始めてみました。

Part2で問題が出てきました。Unityは4.6からGUIシステムが新たに導入されたのですが、このチュートリアルではそのイベントシステムを使わずに、CameraをCanvas内に配置して、映し方をOrthographicにして実装していました。マインクラフトや3DゲームではPerspectiveなカメラを使うため、続きの動画はやってませんがここで中断しました。

また、当然Unity5.3では環境によってはうまく動作しないため、多くのコメントで、イベントシステムを使うべき事や、動かないという指摘がありました。よって、この動画はお勧めしません。

お勧め

インベントリー管理ではないですが、この動画シリーズは90分ぐらいでUnityのGUIの基礎が分かるためお勧めです。このカードゲームで基礎を学べばインベントリー作れそうです。この動画をやると、UnityのGUIのイベントシステムとEvent Triggerを使わずC#スクリプトのみで実装する方法の基礎がわかります。学習できるキーワードとしては以下になります。

Graphics Raycaster
Canvas Group – blockRaycasts
Layout Element
Layout Group
Event System
IBeginDragHandler, IDragHandler, IEndDragHandler
IPointerEnterHandler, IPointerExitHandler
IDropHandler

90分で現実的に学習できる時間なので、これでドラッグアンドドロップやUnity GUIの基礎を体得して、そこからキーワードなどを調べていくとインベントリーに限らずいろいろな応用ができそうです。

中途半端？

スクリーンショットがよさそうですが、動画の最後が中途半端に終わっていて、アイテム削除の方法は、最後の動画のコメントを見ろとなっています。寄付があれば動画を作ってくれるようです。

Unity 5 Tutorial: Survival Game Inventory C#(xOctoManx)

自分で実装できる人で、ワールド座標からアイテムを取得したりドロップしたい場合のテクニックを知りたい人向け。

xOctoManxのチュートリアルは、80分のチュートリアルなので実際に試してみました。このチュートリアルでは、マインクラフトのように、ワールド空間でEキーで、アイテムを取得して、インベントリーからアイテムを選択して、[Drop Button]でワールド座標にドロップすることができたので、インベントリーUIとワールド空間のやり取りが学べて良かったです。ただし、インベントリーは、アイテムの木と石を若干ハードコーディングしているので実用的ではありませんでした。インベントリーのUI上でアイテムをドラッグアンドドロップしたりする方法もないため、別途学ぶ必要があります。

このチュートリアル動画は、この動画で作ったインベントリーシステムをそのまま自分のプロジェクトに使うようなものではなく、この動画で学んだことを踏まえて自分で新たに作るためのチュートリアルでした。

長い

高度なインベントリーシステムを作る場合は参考になりそうですが、初心者向けではなさそうです。

まとめ

インベントリーを実装するためのYoutubeチュートリアルをいくつか見てみました。ひとりの作者の動画を参考するのではなく、できる範囲の動画をいくつかピックアップして、それを踏まえて独自に実装していけばよさそうです。

Unity5で、ダメージ表示とヘルスバーを作成する

前回、前々回で、Unity5で、ダメージ表示用のFloatingTextとlocalScaleを使ったライフバーを作成しました。また小さなBillboardスクリプトでカメラのほうに向くようにしました。これによりリアルタイム・ストラテジー・ゲームで使われるような表示が可能になりました。

びるぼー — ビルボードで、ダメージ表示とライフバーを表示、ピンクオブジェクトはY軸で回転してる。

テキストを表示する方法

Render Modeを「World Space」にしたUI Canvasを用意してもテキストは綺麗に表示されませんでした。どうやらCanvas Scaler (Script)を修正すればひとまず綺麗に表示できるようです。とはいえ細かく調べていないので、デバイスごとに修正する必要があるかもしれません。

ビルボードの挙動

ヘルスバー用のCanvasと、ダメージテキスト用のCanvasを２つ用意して、それぞれにBillboardスクリプトを設定したら、ダメージテキストは文字が逆さまになり反転してしまいました。何か設定がまずいのかもしれませんが、ひとまずVector3.up,Vector3.forwardなど反転して対応しました。

最適化

おそらく、Canvasを１つにしたほうがパフォーマンスが良いです。ただパラメータが多すぎるので、多くを把握するためには時間が必要です。たとえばレベルアップ用のジャンプアップテキストをさらに追加する場合は、もっと知識が付くまでは、べたですが新たにCanvasを作成して別途スクリプトを書こうと考えてます。

このプロジェクトの配布

http://hajimete-program.com/games/HealthbarUsingLocalScale_LookToCamera (xOctManx) and DamageText.zip

要望があればチュートリアルを作成しますが、ひとまずプロジェクトを配布します。

Unity5でビルボードに対応したヘルスバーを作成する

xOctManxさんのUnity5チュートリアル動画である、「Eash Health Bar C# using localScale」と「Health Bar Look To Camera C#」で、ストラテジーゲームで使われるヘルスバーを3D空間で作成することができました。ポイントとしては、２つあって、１つは、Unity5で新たに用意されたWorldScaleのCanvasを使うことです。通常のCanvasはスクリーン座標ですが、この機能で、ワールド座標でキャンバスを使えます。

また２個目の動画で作成したビルボードは凄くシンプルなスクリプトで以下のようになります。カメラの傾きの逆の傾きをVector3.back、Vector3.downで考慮することで、傾きが相殺されて、結果的にカメラに対してオブジェクトが向き合う形になります。そのためこのビルボードの仕組みは、このCanvsに特化したスクリプトでははなく、Unityのすべてのオブジェクトに対して使用できるスクリプトでした。

using UnityEngine;
using System.Collections;

public class Billbard : MonoBehaviour
{
	public Camera targetCamera;

	void Update ()
	{
		transform.LookAt (transform.position + targetCamera.transform.rotation * Vector3.back, targetCamera.transform.rotation * Vector3.down);
	}
}

using UnityEngine;

using System.Collections;

public class Billbard : MonoBehaviour

{

public Camera targetCamera;

void Update ()

{

transform.LookAt (transform.position + targetCamera.transform.rotation * Vector3.back, targetCamera.transform.rotation * Vector3.down);

}

これでヘルスバーやマジックポイント用のバーをさくせいすることができたのであとは、ダメージテキストを組み合わせることで、敵やプレイヤーの基本UIを作成できそうです。

このプロジェクトの配布

http://hajimete-program.com/games/HealthbarUsingLocalScale_LookToCamera (xOctManx).zip

Unity5でポップアップのダメージ表示を行う

Youtubeのチュートリアルを参考に3D上で、ポップアップのダメージ表示を実装してみました。これにより結月ゆかりのゲームにダメージ表示ができるようになります。あとは、視点移動したときに、ヘルスバーが表示できれば基本的な状態表示が完了します。

細かい計算を想定していたのですが、実際は、UnityEngine.UI.Textは、スクリーン座標で表示され、シーン上のオブジェクトはワールド座標で表示されるので、それをCamera.main.worldToScreenPointで正しく変換させるだけでした。

テキストが上下に移動するのは、何か特殊な処理をしているわけではなく、UnityEngine.UI.Textを通常のオブジェクトと同様にアニメーションで、座標移動させているだけです。

using UnityEngine;
using System.Collections;

public class FloatingTextController : MonoBehaviour
{
	private static FloatingText popupTextPrefab;
	private static GameObject canvas;

	public static void Initialize ()
	{
		Debug.Log ("Initialize");
		canvas = GameObject.Find ("Canvas");
		if (!popupTextPrefab) {
			popupTextPrefab = Resources.Load<FloatingText> ("Prefabs/PopupTextParent");
		}
	}

	public static void CreateFloatingText (string text, Transform textTransform)
	{
		FloatingText instance = Instantiate (popupTextPrefab) as FloatingText;
		bool worldPositionStays = false;

		// ワールド空間の position をスクリーン空間に変換。
		Vector2 screenPosition = Camera.main.WorldToScreenPoint (textTransform.position);
		//Vector2 randomPosition = new Vector2 (textTransform.position.x + Random.Range (-.1f, .1f), textTransform.position.y + Random.Range (-.1f, .1f));
		//Vector2 screenPosition = Camera.main.WorldToScreenPoint (randomPosition);

		instance.transform.SetParent (canvas.transform, worldPositionStays);
		instance.transform.position = screenPosition;
		instance.SetText (text);
	}
}

using UnityEngine;

using System.Collections;

public class FloatingTextController : MonoBehaviour

{

private static FloatingText popupTextPrefab;

private static GameObject canvas;

public static void Initialize ()

{

Debug.Log ("Initialize");

canvas = GameObject.Find ("Canvas");

if (!popupTextPrefab) {

popupTextPrefab = Resources.Load<FloatingText> ("Prefabs/PopupTextParent");

}

public static void CreateFloatingText (string text, Transform textTransform)

{

FloatingText instance = Instantiate (popupTextPrefab) as FloatingText;

bool worldPositionStays = false;

// ワールド空間の position をスクリーン空間に変換。

Vector2 screenPosition = Camera.main.WorldToScreenPoint (textTransform.position);

//Vector2 randomPosition = new Vector2 (textTransform.position.x + Random.Range (-.1f, .1f), textTransform.position.y + Random.Range (-.1f, .1f));

//Vector2 screenPosition = Camera.main.WorldToScreenPoint (randomPosition);

instance.transform.SetParent (canvas.transform, worldPositionStays);

instance.transform.position = screenPosition;

instance.SetText (text);

}

このプロジェクトの配布

http://hajimete-program.com/games/DamagePopupText.zip