前回は、獲得したダイヤをカウントし、右上に獲得数を表示する機能を実装します。
![](https://katonobo.com/wp-content/uploads/本書で学べること-19-160x90.png)
個人ゲーム開発日報|ダイヤの獲得を表示
今回は、獲得したダイヤをカウントし、右上に獲得数を表示する機能を実装します。
今回は、敵のライフバー(HPバー)を実装します。
ライフバーの実装の要点
ライフバーとは、HPゲージのことです。ダメージを受けるとそのバーが減ります。
ポイントは3つです。
- ダメージゲージを作成 –
Canvas
の子オブジェクトとしてImage
オブジェクトを2つ作成します。1つはバックグラウンド、もう1つは実際のゲージとして機能します。Image
オブジェクトの名前をそれぞれDamageGaugeBackground
とDamageGaugeFill
に変更します。 DamageGaugeFill
にイメージをつける(例えば赤)。DamageGaugeFill
のImage Type
がFilled
に設定する。Fill Method
がHorizontal
に設定する。- 敵オブジェクトのインスペクターに
DamageGaugeBackground
とDamageGaugeFill
をアタッチする。
注意がいるのは、DamageGaugeFill
のImage Type
がFilled
に設定する。Fill Method
がHorizontal
に設定する。の箇所です。忘れるとダメージのアニメーションが出ません。
実装コード
前回のコードを変更します。
using UnityEngine;
using DG.Tweening;
using TMPro;
using System.Collections;
using UnityEngine.UI; // UIを使用するために追加
public class ClickDamageHandler : MonoBehaviour
{
public GameObject coinPrefab; // コインのプレハブ
public GameObject diamondPrefab; // ダイヤのプレハブ
public Transform coinSpawnPoint; // コインが飛び出す位置
public TMP_Text coinCountText; // コイン獲得数を表示するTextMeshProUGUI
public TMP_Text diamondCountText; // ダイヤ獲得数を表示するTextMeshProUGUI
public Image damageGaugeBackground; // ダメージゲージの背景
public Image damageGaugeFill; // ダメージゲージのフィル
private int coinCount = 0; // 獲得したコインの数
private int diamondCount = 0; // 獲得したダイヤの数
private int damageCount = 0; // ダメージ数のカウント
private int enemyLife = 10; // 敵のライフ
private int maxEnemyLife = 10; // 敵の最大ライフ
private Vector3 originalPosition; // オブジェクトの元の位置
private bool isAnimating = false; // アニメーション中かどうかを示すフラグ
private SpriteRenderer spriteRenderer; // スプライトレンダラー
void Start()
{
// オブジェクトの元の位置を保存
originalPosition = transform.localPosition;
spriteRenderer = GetComponent<SpriteRenderer>(); // スプライトレンダラーを取得
UpdateCoinCountText(); // 初期表示の更新
UpdateDiamondCountText(); // 初期表示の更新
UpdateDamageGauge(); // 初期表示の更新
}
void OnMouseDown()
{
if (!isAnimating)
{
damageCount++; // ダメージ数を増加
LogDamage(); // ダメージ数をコンソールに表示
ShakeObject(); // オブジェクトを揺らす
SpawnCoin(); // コインを生成して飛ばす
enemyLife--; // 敵のライフを減少
UpdateDamageGauge(); // ダメージゲージを更新
if (enemyLife <= 0)
{
DropDiamondAndRespawnEnemy(); // ダイヤを生成し、敵をリスポーン
}
}
}
void LogDamage()
{
Debug.Log("Damage: " + damageCount); // コンソールにダメージ数を表示
}
void ShakeObject()
{
// アニメーション中フラグを設定
isAnimating = true;
// 左にもっと動かしてから元の位置に戻す
transform.DOLocalMoveX(originalPosition.x - 0.2f, 0.05f) // 移動の幅を0.2fに設定
.SetLoops(2, LoopType.Yoyo)
.OnComplete(() => isAnimating = false); // アニメーションが終了したらフラグをリセット
}
void SpawnCoin()
{
// コインを生成
GameObject coin = Instantiate(coinPrefab, coinSpawnPoint.position, Quaternion.identity);
// コインを敵キャラクターより上に表示
coin.GetComponent<SpriteRenderer>().sortingOrder = 10;
// コインに飛び出すアニメーションを適用
float dropHeight = Random.Range(-2.0f, -4.0f); // 落下先を2倍に伸ばす
Vector3 peakPosition = new Vector3(
coinSpawnPoint.position.x,
coinSpawnPoint.position.y + 1.0f, // 一度上に上がる
coinSpawnPoint.position.z
);
Vector3 targetPosition = new Vector3(
coinSpawnPoint.position.x + Random.Range(-1.0f, 1.0f), // 横の範囲を広げる
coinSpawnPoint.position.y + dropHeight,
coinSpawnPoint.position.z
);
Sequence coinSequence = DOTween.Sequence();
coinSequence.Append(coin.transform.DOMove(peakPosition, 0.15f).SetEase(Ease.OutQuad)) // 上に上がる動きを2倍速に
.Append(coin.transform.DOMove(targetPosition, 0.25f).SetEase(Ease.InQuad)) // 下に落ちる動きを2倍速に
.OnComplete(() => StartCoroutine(CoinLifetime(coin))); // アニメーション完了時にコインのライフタイムを開始
}
IEnumerator CoinLifetime(GameObject coin)
{
float lifetime = 4.0f; // コインが消えるまでの時間
float timer = 0.0f;
while (timer < lifetime)
{
timer += Time.deltaTime;
yield return null;
if (coin == null)
yield break; // コインが既に消えている場合はコルーチンを終了
}
if (coin != null)
{
Destroy(coin);
AddCoin(); // コインを獲得
}
}
public void AddCoin()
{
coinCount++; // 獲得したコイン数を増加
UpdateCoinCountText(); // UIを更新
}
public void AddDiamond()
{
diamondCount++; // 獲得したダイヤ数を増加
UpdateDiamondCountText(); // UIを更新
}
void UpdateCoinCountText()
{
coinCountText.text = "Coins: " + coinCount.ToString(); // コイン数を表示
}
void UpdateDiamondCountText()
{
diamondCountText.text = "Diamonds: " + diamondCount.ToString(); // ダイヤ数を表示
}
void UpdateDamageGauge()
{
float fillAmount = (float)enemyLife / maxEnemyLife;
damageGaugeFill.fillAmount = fillAmount; // ダメージゲージを更新
}
void DropDiamondAndRespawnEnemy()
{
// ダイヤを生成
GameObject diamond = Instantiate(diamondPrefab, coinSpawnPoint.position, Quaternion.identity);
// ダイヤに飛び出すアニメーションを適用
float dropHeight = Random.Range(-2.0f, -4.0f); // 落下先を2倍に伸ばす
Vector3 peakPosition = new Vector3(
coinSpawnPoint.position.x,
coinSpawnPoint.position.y + 1.0f, // 一度上に上がる
coinSpawnPoint.position.z
);
Vector3 targetPosition = new Vector3(
coinSpawnPoint.position.x + Random.Range(-1.0f, 1.0f), // 横の範囲を広げる
coinSpawnPoint.position.y + dropHeight,
coinSpawnPoint.position.z
);
Sequence diamondSequence = DOTween.Sequence();
diamondSequence.Append(diamond.transform.DOMove(peakPosition, 0.15f).SetEase(Ease.OutQuad)) // 上に上がる動きを2倍速に
.Append(diamond.transform.DOMove(targetPosition, 0.25f).SetEase(Ease.InQuad)) // 下に落ちる動きを2倍速に
.OnComplete(() => StartCoroutine(DiamondLifetime(diamond))); // アニメーション完了時にダイヤのライフタイムを開始
// 敵を一瞬消して再び現れる演出を追加
StartCoroutine(RespawnEnemy());
}
IEnumerator DiamondLifetime(GameObject diamond)
{
float lifetime = 4.0f; // ダイヤが消えるまでの時間
float timer = 0.0f;
while (timer < lifetime)
{
timer += Time.deltaTime;
yield return null;
if (diamond == null)
yield break; // ダイヤが既に消えている場合はコルーチンを終了
}
if (diamond != null)
{
Destroy(diamond);
AddDiamond(); // ダイヤを獲得
}
}
IEnumerator RespawnEnemy()
{
// 敵を一瞬消す
spriteRenderer.DOFade(0, 0.5f);
yield return new WaitForSeconds(0.5f);
// 敵を再び現す
spriteRenderer.DOFade(1, 0.5f);
enemyLife = maxEnemyLife; // ライフをリセット
UpdateDamageGauge(); // ダメージゲージをリセット
}
}
これでライフバーが実装できました。
![](https://katonobo.com/wp-content/uploads/スクリーンショット-2024-06-22-10.03.33.png)
今回はここまで。
<過去の記事>
![](https://katonobo.com/wp-content/uploads/本書で学べること-15-160x90.png)
個人ゲーム開発日報|コインの出現とアニメーション
今回は、敵キャラクターをタップしたらコインが飛び出るアニメーションを実装します。
![](https://katonobo.com/wp-content/uploads/本書で学べること-16-160x90.png)
個人ゲーム開発日報|コインの加算の実装
今回は、敵が落としたコインを右上の数字に加算する処理を実装したいと思います。
![](https://katonobo.com/wp-content/uploads/本書で学べること-17-160x90.png)
個人ゲーム開発日報|敵を倒してダイヤをゲット
敵のライフを設定し、ダメージがライフを超えたら敵が消えてダイヤモンドを落とす処理を実装します。
![](https://katonobo.com/wp-content/uploads/本書で学べること-19-160x90.png)
個人ゲーム開発日報|ダイヤの獲得を表示
今回は、獲得したダイヤをカウントし、右上に獲得数を表示する機能を実装します。