Bring Your Game to Life: Implementing Floating Combat Text in Unity

It’s time to ditch the static health bars and embrace dynamic feedback! Communicating damage dealt in your game is crucial for player satisfaction and understanding the cause-and-effect of their actions. But a simple number popping up isn’t enough; we need impact! This is how we bring those damage numbers to life with a simple, effective floating combat text system in Unity.

The Core: Instantiating the Damage Number Prefab

First, you’ll need a prefab. This is the visual representation of your damage number – typically a TextMeshProUGUI object. Ensure this object has a Canvas Renderer and a Rect Transform component. I recommend a simple white text with a slight outline for maximum readability against various backgrounds. Don’t forget to set the pivot to the center.

public GameObject damageNumberPrefab; // Drag your prefab here in the Inspector

public void ShowDamage(float damage, Vector3 position) {
    GameObject damageNumber = Instantiate(damageNumberPrefab, position, Quaternion.identity);
    //Set the text component here
    damageNumber.GetComponent<TextMeshProUGUI>().text = damage.ToString();
}

The ShowDamage function is where the magic begins. The code instantiates the damageNumberPrefab at the specified position. This position should be near where the damage was inflicted on the enemy.

Adding a Touch of Chaos: Random Offset

Spawning all damage numbers in the exact same spot leads to visual clutter. Introduce a small, random offset to the instantiation position.

public float spawnRadius = 0.5f;

public void ShowDamage(float damage, Vector3 position) {
    Vector3 randomOffset = Random.insideUnitSphere * spawnRadius;
    randomOffset.z = 0; // Keep it in 2D
    GameObject damageNumber = Instantiate(damageNumberPrefab, position + randomOffset, Quaternion.identity);
    damageNumber.GetComponent<TextMeshProUGUI>().text = damage.ToString();
}

Random.insideUnitSphere generates a random point within a sphere of radius 1. Multiplying it by spawnRadius scales the offset. I’ve clamped the Z to zero to keep it within the 2D game’s plane.

Pitfall: Using too large a spawnRadius will make the numbers appear disjointed from the enemy. Experiment to find a sweet spot.

Animation: The Float and Fade

Now for the visual flair! Two primary options exist: Unity’s Animation system or a simple script.

Option 1: Animation System (Animator)

This is my preferred method. Create an animation for your damage number prefab that moves it upwards and fades it out.

1. Create an Animator Controller: Create a new Animator Controller asset.
2. Add Animation: Add a new animation to your prefab.
3. Animate the Text: Animate the Y position of the RectTransform to move the text upward, and animate the Color alpha of the TextMeshProUGUI to fade it out.
4. Set Animation Length: Set the animation length to something short, like 0.5 seconds to 1 second.

Challenge: Animation Events can trigger destruction. Implement this functionality to ensure the destruction after animation completes, improving garbage collection.

public void ShowDamage(float damage, Vector3 position) {
    Vector3 randomOffset = Random.insideUnitSphere * spawnRadius;
    randomOffset.z = 0; // Keep it in 2D
    GameObject damageNumber = Instantiate(damageNumberPrefab, position + randomOffset, Quaternion.identity);
    damageNumber.GetComponent<TextMeshProUGUI>().text = damage.ToString();

    //The prefab has an animator attached to it.
    Destroy(damageNumber, 1f); //Destroy after the animation is complete.
}

Option 2: Scripted Animation (Simple Movement)

This is simpler but less visually appealing.

using UnityEngine;
using TMPro;

public class FloatingDamage : MonoBehaviour
{
    public float moveSpeed = 1.0f;
    public float fadeSpeed = 1.0f;
    private TextMeshProUGUI textMesh;
    private Color textColor;

    void Start()
    {
        textMesh = GetComponent<TextMeshProUGUI>();
        textColor = textMesh.color;
        Destroy(gameObject, 1f); //Destroy the number after 1 second.
    }

    void Update()
    {
        transform.position += Vector3.up * moveSpeed * Time.deltaTime;
        textColor.a -= fadeSpeed * Time.deltaTime;
        textMesh.color = textColor;
    }
}

Attach this script to your damage number prefab. Adjust moveSpeed and fadeSpeed to your liking.

Common Mistake: Forgetting to include Time.deltaTime will cause the movement and fade to be framerate-dependent.

Making it Useful: Integrating with Combat

Now, trigger the ShowDamage function whenever an enemy takes damage.

public class Enemy : MonoBehaviour
{
    public float health = 100;
    public DamageNumberManager damageNumberManager; //Drag in inspector.

    public void TakeDamage(float damage)
    {
        health -= damage;
        damageNumberManager.ShowDamage(damage, transform.position);
        if (health <= 0)
        {
            Die();
        }
    }
}

Drag the game object containing the DamageNumberManager into the inspector on the enemy.

Real-World Scenario: In a top-down shooter, you might call ShowDamage when a bullet collides with an enemy. In an RPG, it might be triggered by a successful attack.

Damage Number Manager

Because you’ll be using this system everywhere, you’ll want to set up a manager to hold the prefab and to keep your other code clean.

using UnityEngine;

public class DamageNumberManager : MonoBehaviour
{
    public GameObject damageNumberPrefab; // Drag your prefab here in the Inspector
    public float spawnRadius = 0.5f;

    public void ShowDamage(float damage, Vector3 position) {
        Vector3 randomOffset = Random.insideUnitSphere * spawnRadius;
        randomOffset.z = 0; // Keep it in 2D
        GameObject damageNumber = Instantiate(damageNumberPrefab, position + randomOffset, Quaternion.identity);
        damageNumber.GetComponent<TextMeshProUGUI>().text = damage.ToString();

    }
}

Optimization: Object Pooling (Optional)

For games with frequent damage events, instantiation can become a performance bottleneck. Object pooling can significantly improve performance. This is outside of the scope of a beginner tutorial but keep it in mind as your game grows!

Creating floating combat text is a subtle yet powerful way to improve player feedback. Experiment with different animations, colors, and sizes to find what works best for your game’s aesthetic. Don’t be afraid to break the mold and create something truly unique. The player experience will thank you!