게임 개발 일지 #7 - 데미지 표시

대미지 표시

플레이어 또는 몬스터가 공격 받았을 때 대미지 표시를 해주는 기능을 추가했다. Text는 Text Mesh Pro(TMP)를 사용했고 텍스트 애니메이션은 DOTween을 이용해 구현했다. 

 

Scene에 Text Mesh Pro를 생성해주고 위치와 크기를 조절해주었고 FloatingText라는 클래스를 만들어 붙여주었다.

Scene에 TextMeshPro 생성

 

텍스트가 위로 튀어 오르는 모습을 구현하고 싶어서 DOTween의 DOJump를 이용했다. 거기에 DOShakeScale을 붙여 텍스트가 튀어오르면서 출렁거리는 듯한 느낌을 주었다. 이 두가지의 Tween들을 합쳐서 보여지게 하기 위해 Sequence를 이용했다.

public class FloatingText : MonoBehaviour {
    private readonly Vector3 TEXT_JUMP_END_VALUE = Vector3.up * 0.25f;

    [SerializeField] private float duration = 3f;
    private TextMeshPro floatingText;
    private Sequence sequence;

    private void Awake() {
        floatingText = GetComponent<TextMeshPro>();
        sequence = DOTween.Sequence();
    }
    
    public void ShowText(string text, Vector3 direction) {
        floatingText.text = text;
        transform.forward = direction;

        sequence.Append(transform.DOShakeScale(duration, 1, 3))
            .Join(transform.DOJump(transform.position + TEXT_JUMP_END_VALUE, 0.5f, 1, duration))
            .OnUpdate(() => transform.forward = direction)
            .OnComplete(() => Destroy(gameObject))
            .OnStart(() => gameObject.SetActive(true));
    }
}

 

 

Append는 Tween을 추가하고 Join은 앞의 Tween과 동시에 실행한다. 두 함수를 통해 두가지 Tween을 한번에 실행 시키도록 구현했고 OnUpdate를 통해 애니메이션이 실행되는 중에 direction 방향으로 텍스트가 보여지도록 했다. (카메라가 바라보는 방향으로 텍스트를 보여주기 위해) 그리고 OnStart를 이용하여 애니메이션 시작시 게임 오브젝트를 보여주고 OnComplete를 이용하여 애니메이션이 끝나면 Destroy를 실행하도록 했다.

 

Health 클래스에서 데미지를 계산하는 함수 중 해당 대미지를 표시해 주도록 했다. ShowText의 direction으로는 GameManager에 캐싱해둔 메인 Camera의 Transform.forward를 넣어주었다.

 

public void TakeDamage(float damage, float knockback = 0f) {
    healthPoint -= damage;

    if (healthBar != null) {
        healthBar.CurrentHealth = healthPoint;
    }

    ShowFloatingText(damage);

    if (healthPoint <= 0) {
        SetCharacterDead();
        return;
    }

    OnTakeDamage?.Invoke(damage, knockback);
}

private void ShowFloatingText(float damage) {
    var textObject = Instantiate(floatingText, transform);
    textObject.ShowText(damage.ToString(), GameManager.Instance.CameraTransform.forward);
}

 

결과

완셩된 대미지 표시 기능

 

사용 에셋

Character

POLYGON Modular Fantasy Hero Characters (Synty Studios)

POLYGON Fantasy Rivals (Synty Studios)

 

Animation

Oriental Sword AnimSet (wemakethegame)

DOTween (Demigiant)

 

VFX

Magic Arsenal (Magic Arsenal)

 

UI

GUI PRO Kit - Fantasy RPG (Layer Lab)