uGUIでゲージを作った話

この記事は CyberAgent エンジニア Advent Calendar 2014 13日目の投稿です。

私が今携わっているプロジェクトでは、まだベータだったころのUnity4.6(uGUI)ベースで
開発がスタートしました。

色んな...色んなことがありましたが、今回はゲージを作った話をしたいと思います。

さて、ゲージを作るにあたって、デザイナーさんから頂いたデザインはこんなかんじでした。

こちらをuGUIでどのように実装したかというお話です。

fillSpriteでつくる

uGUIにはNGUI同様fillSprite機能があります。

上図のようにSpriteのImageTypeをFilledにするれば後はFillAmountを調整するだけで簡単にゲージが作れます。ただ...

Fill MethodをHorizontalにすると90度でぶった切られてしまうのでこのようなゲージには使いづらいところです。

Maskで作る

uGUIでは下図のようにMaskコンポーネントをアタッチしたImageの子にImageを置くことで
Maskをかけることが出来ます。

あとはMaskされたImageを左右にずらすことでゲージを表現することが出来ます。

ただ、このMaskを使うことでDrawCallが3消費されてしまうこと、
Androidの一部端末でMaskが効かないものがあるので、あまり多様はしたくありません。
(↑Maskの件はUnity4.6p1で対応されたそうです！)

ポリゴン的に作る

uGUIのGraphicコンポーネントは、OutlineやShadowコンポーネントをアタッチすることで
それぞれ枠や影をつけることが出来ます。

これを見てみると、どうやらVertexをいじることで図形を描画出来るような雰囲気があります。
↓ShadowのSuperクラスであるVertexModifiersのソース
https://bitbucket.org/Unity-Technologies/ui/src/b914129e0b5bc9e9eb20af391ba99f659ec85a47/UnityEngine.UI/UI/Core/VertexModifiers/Shadow.cs?at=4.6

ということでいじってみたのがこちら
OpenGLの教科書でよく見る奴が出来ました。

ソースはこちら

VBOImage.cs

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

public class VBOImage : Image {

	protected override void OnFillVBO (List<UIVertex> vbo)
	{
		GenerateSprite (vbo, preserveAspect);
	}

	protected void GenerateSprite (List<UIVertex> vbo, bool unusedPreserveAspect)
	{
		UIVertex vert = UIVertex.simpleVert;
		vert.color = color;
		
		Vector4 dimension = new Vector4(0,0,100f,100f);
		float width = Mathf.Abs (dimension.x - dimension.z);
		float height = Mathf.Abs (dimension.y - dimension.w);

		var uv = Vector4.zero;
		
		// left bottom
		vert.position = new Vector3 (dimension.x, dimension.y);
		vert.uv0 = new Vector2 (uv.x, uv.y);
		vert.color = Color.red;
		vbo.Add (vert);
		
		// left top
		vert.position = new Vector3 (dimension.x + 100, dimension.w);
		vert.uv0 = new Vector2 (uv.x, uv.w);
		vert.color = Color.blue;
		vbo.Add (vert);
		
		// right top
		vert.position = new Vector3 (dimension.z - 0, dimension.w);
		vert.uv0 = new Vector2 (uv.z, uv.w);
		vert.color = Color.green;
		vbo.Add (vert);
		
		// right bottom
		vert.position = new Vector3 (dimension.z - 0, dimension.y);
		vert.uv0 = new Vector2 (uv.z, uv.y);
		vert.color = Color.white;
		vbo.Add (vert);
	}
}

これを応用して、
・4点を指定して平行四辺形を描画
・パーセンテージに合わせて頂点座標を変えることで長さを変更する
上記の2点を実装すればゲージの完成です。

(↑はスーパー新卒のW先生がささっと実装してくれました！)

##まとめ

以上、uGUIでゲージを作った話でした。
Unityも4.6正式版がリリースされ、いよいよ実用段階になってきました。
今までNGUIを使っていた人も、Unity初めて！というひともこの年末年始に
触ってみてはいかがでしょうか？

では！