Unity5(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

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

いつもひよこのたまごをご利用下さいましてありがとうございます!
おかげ様でチュートリアル数も10ゲーム目となりました!
チュートリアル一覧は
こちら からどうぞ!


スポンサーリンク

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については、以下エッセンスを参照して下さい〜


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);
		}
	}
//********** 終了 **********//
}

Enemy1Script.cs


public変数であるlifeScriptがあるので、InspectorビューからLifeScriptを持っているHpオブジェクトをドラッグ&ドロップしましょう〜


f:id:hiyotama:20150617180025p:plain
ドラッグ&ドロップ!


敵がユニティちゃん(UnityChanタグ付き)とぶつかった時、LifeScriptのLifeDownメソッドを呼び出しています〜
引数はAttackPointで10にしていますが、public変数にしているのでInspectorビューから自由に変更できます〜


f:id:hiyotama:20150617180340p:plain


【結果】


f:id:hiyotama:20150617180502p:plain
敵とぶつかると・・・


f:id:hiyotama:20150617180535p:plain
ライフが減る


うまくいきました〜


今回はここまでです〜

ありがとうございました〜


【Unity開発8】ユニティちゃんを表示させる【横スクロールユニティちゃん1】

【Unity開発8】ユニティちゃんを歩かせる【横スクロールユニティちゃん2】

【Unity開発8】カメラにユニティちゃんを追いかけさせる【横スクロールユニティちゃん3】

【Unity開発8】ユニティちゃんをジャンプさせる【横スクロールユニティちゃん4】

【Unity開発8】ユニティちゃんバスターで攻撃する【ユニティちゃん横スクロール5】

【Unity開発8】走っている時やジャンプ中にも弾を撃つ【横スクロールユニティちゃん6】

【Unity開発8】弾を当てて敵を倒す【横スクロールユニティちゃん7】

【Unity開発8】uGUIでライフを作り、ダメージを実装する【横スクロールユニティちゃん8】

【Unity開発8】ダメージを食らった時、一定時間無敵状態にする【横スクロールユニティちゃん9】

【Unity開発8】アイテムを取得して体力回復する【横スクロールユニティちゃん10】

【Unity開発8】敵キャラを倒した時にアイテムを落とさせる【横スクロールユニティちゃん11】

【Unity開発8】Main Cameraに映るまで敵キャラを待機させておく【横スクロールユニティちゃん12】

【Unity開発8】タイトル・ステージ紹介・ゲームオーバー・ゲームクリアー画面を作る【横スクロールユニティちゃん13】

【Unity開発8】バーチャルパッドを付けてモバイル対応する【横スクロールユニティちゃん14】