【Unity8】uGUI(Image)でHP作成！SpriteのBorder, RectTransformのsizeDelta【横スクロールユニティちゃん8】

Unity5.1.0f3 Personal(2015年6月)

f:id:hiyotama:20150618122504p:plain

このコンテンツは、『ユニティちゃんライセンス』で提供されています

前回の続きです〜

今回はuGUIでライフを作り、敵に当たった時にHPを減らすという処理を実装していきます〜

【目標】敵からのダメージを受けるようにする

①uGUIのImageでライフを表示する
uGUIを利用して、ライフを画面に表示しましょう〜まずは下の画像をImportして下さい〜

f:id:hiyotama:20150617135754p:plain
ライフ用のSprite画像

左側の画像を後ろに表示して、右側の画像がライフの目盛りになります〜
Sprite画像のInspector設定は以下の通りです〜

f:id:hiyotama:20150617140029p:plain

続いてSprite Editorの設定です〜今回はImage TypeをTiledにして、画像を引き伸ばした時に四隅は引き伸ばされないようにしますので、いつもと少し設定が違います〜

まずは左側の背景画像から見ていきます〜

Positionは普通に画像を囲うように設定すればいいのですが、今回はBorderの設定も行います〜

f:id:hiyotama:20150617140731p:plain

L(Left)を4、T(Top)を5、R(Right)を4、B(Bottom)を5に設定すると、上の画像のように緑の線が引かれます〜こうすることによって、ImageのWidthとHeightを引き伸ばした時に四隅は固定したままにできます〜

右側の目盛り画像は普通に囲うだけで大丈夫です〜

f:id:hiyotama:20150617141205p:plain

続いてuGUIのImageを作成していきます〜HierarchyビューからCreate>UI>Imageを選択し作成して下さい〜
今回は背景画像と目盛りを使うので、もう一度Imageを作成して、片方は「HpBack」、もう片方は「Hp」という名前にします〜

f:id:hiyotama:20150617141534p:plain

f:id:hiyotama:20150617141613p:plain
UIのImageを2つ作成

並び順が下にある程前面に表示されるので、HpBackを上、Hpを下に配置して下さい〜

続いてCanvasの設定をしていきます〜CanvasのInspectorビューにあるCanvas Scalerにて、UI Scale ModeをScale With Screen Size、Reference ResolutionをX: 1280、Y:720、Screen Match ModeをExpandにして下さい〜

この設定にすることで、デバイスによって画面サイズが変わったとしても、ある程度ズレに対応することができます〜

f:id:hiyotama:20150617141907p:plain

続いてHpBackの設定をしていきます〜

InspectorビューのImageコンポーネントのSource Imageに、先ほど作成したlife_0画像を指定します〜

f:id:hiyotama:20150617142407p:plain
ドラッグ＆ドロップ！

続いてImage TypeをTiledに変更します〜先ほど言った通りTiledにすると、四隅を固定したまま画像を引き伸ばすことができます〜

f:id:hiyotama:20150617142526p:plain

続いてRect Transformを設定して、UIの位置や大きさを変えていきます〜
Rect Transformについては、以下エッセンスを参照して下さい〜

<a href="http://hiyotama.hatenablog.com/entry/2015/05/05/143525">【Unity開発】uGUIのRectTransformの使い方【ひよこエッセンス】 - Unity5(C#)初心者・入門者向けチュートリアルひよこのたまご</a>hiyotama.hatenablog.com

まずはAnchor Presetを変更し、Anchorを右上に設定します〜

f:id:hiyotama:20150617142814p:plain
altを押しながら赤枠をクリックして右上をAnchorに

位置と大きさは以下のように設定します〜

f:id:hiyotama:20150617143132p:plain

f:id:hiyotama:20150617171617p:plain
こんな感じ

続いてHpの設定をしていきます〜先ほどと同じようにカットしたlife_1画像をImageコンポーネントのSource Imageにドラッグ＆ドロップし、Image TypeをTiledに変更します〜

f:id:hiyotama:20150617171853p:plain
ドラッグ＆ドロップ！

Anchor Presetsを右上にします〜

f:id:hiyotama:20150617171959p:plain
altを押しながら赤枠をクリック

Rect Transformは以下のように設定します〜

f:id:hiyotama:20150617172235p:plain

PivotはをX:0, Y:0に変更するのを忘れないで下さい〜なぜかというと、例えば目盛りのHeightを240から140に減らした時、

f:id:hiyotama:20150617172405p:plain

このように画像の下側が基点(Achor)となるため、画像の上部から短くなってくれるためです〜

②ライフを減らす
つまり、ライフの目盛り画像のWidthを減らしていけば、ダメージを表現できるわけです！

それではLifeScriptを作り、Hpオブジェクトに取り付けましょう〜以下ソースです〜

using UnityEngine;
using System.Collections;

public class LifeScript : MonoBehaviour {
	
	RectTransform rt;
	
	void Start ()
	{
		rt = GetComponent<RectTransform>();
	}
	
	public void LifeDown (int ap){
		//RectTransformのサイズを取得し、マイナスする
		rt.sizeDelta -= new Vector2 (0,ap);
	}
}

LifeScript.cs

HpオブジェクトのRect TransformコンポーネントのWidthとHeightはsizeDeltaで取得できるので、Heightから引数のap(AttackPointの略)分だけマイナスしています〜

あとは敵とぶつかった時に、このLifeDownメソッドを呼び出してあげればいいだけです〜

ということで、Enemy1Scriptに加筆していきます〜

using UnityEngine;
using System.Collections;

public class Enemy1Script : MonoBehaviour {
	
	Rigidbody2D rigidbody2D;
	public int speed = -3;
	public GameObject explosion;
//********** 開始 **********//
	public int attackPoint = 10;
	public LifeScript lifeScript;
//********** 終了 **********//

	void Start () {
		rigidbody2D = GetComponent<Rigidbody2D>();
	}
	
	void Update () {
		rigidbody2D.velocity = new Vector2 (speed, rigidbody2D.velocity.y);
	}
	
	void OnTriggerEnter2D (Collider2D col)
	{
		if (col.tag == "Bullet") {
			Destroy (gameObject);
			Instantiate (explosion, transform.position, transform.rotation);
		}
	}
//********** 開始 **********//
	void OnCollisionEnter2D (Collision2D col)
	{
		//UnityChanとぶつかった時
		if (col.gameObject.tag == "UnityChan") {
			//LifeScriptのLifeDownメソッドを実行
			lifeScript.LifeDown(attackPoint);
		}
	}
//********** 終了 **********//
}