Programación de Texto de Daño en Unity

Clase 35 de 60 • Curso Avanzado de Creación de RPGs con Unity

Resumen

¿Cómo se utiliza el texto para mostrar el daño en Unity?

En el desarrollo de videojuegos en Unity, mostrar el daño infligido o recibido de manera visual puede mejorar significativamente la experiencia del jugador. Aprovechar componentes existentes para hacer esto de manera eficiente es clave. Aquí exploramos cómo un simple texto puede facilitar esta tarea reutilizando un asset en múltiples escenarios.

Para plasmar el daño en la pantalla, es esencial que el flujo de trabajo sea versátil. Así, se puede aplicar tanto para documentar puntos de vida curados, como el daño infligido al protagonista por un enemigo. Se trata de manipular el elemento de texto de manera que suba ligeramente hasta desaparecer, creando una atractiva animación.

¿Cómo configurar los elementos necesarios para mostrar el daño?

Un buen punto de inicio es el script DamageNumber, el cual debe contar con ciertas propiedades para poder ser modificado adecuadamente:

PublicFloat DamageSpeed: controla la velocidad a la que el texto se mueve verticalmente en la pantalla.
PublicFloat DamagePoints: es el número que el script debe mostrar, simbolizando el daño infligido.
Importación y acceso a componentes de texto: utiliza using UnityEngine.UI para poder acceder y manipular elementos de texto en Unity, específicamente declarando PublicText DamageText.

La metodología en los scripts permite definir y mostrar el movimiento del texto, estableciendo propiedades como la posición y su velocidad.

¿Cómo aplicar las propiedades y configurar el Prefab?

Cuando se configuran las propiedades, es necesario asignarlas adecuadamente a los objetos en el editor:

Asignar el texto al objeto Prefab y configurar la velocidad de movimiento.
Incorporar y visualizar el objeto en el editor para asegurar que los cambios se reflejen correctamente.

A través de la función Update, se obtiene el siguiente código para gestionar y actualizar la posición del texto de daño:

// Convirtiendo los puntos de da&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;ntilde;o a texto
DamageText.text = DamagePoints.ToString();

// Actualizando la posici&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;oacute;n del texto
this.transform.position = new Vector3(
    this.transform.position.x, 
    this.transform.position.y + DamageSpeed * Time.deltaTime, 
    this.transform.position.z);

Este script mantiene el texto en movimiento hacia arriba hasta que desaparece.

¿Cómo administrar la eliminación del texto de daño?

Una vez que el daño se ha mostrado visualmente, es esencial eliminar este texto para no saturar la pantalla. Para lograr esto, el script destroyAfterTime viene al rescate:

// Variable para el tiempo de destrucci&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;oacute;n
public float timeToDestroy;

// En Update, disminuimos este valor
timeToDestroy -= Time.deltaTime;

// Destruir el objeto una vez que el tiempo se agota
if (timeToDestroy &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;= 0) {
    Destroy(gameObject);
}

¿Cómo integrar el texto de daño con otros elementos del juego?

La integración del texto de daño dentro del contexto del juego involucra la instancia dinámica en el punto de impacto. Esto se realiza mediante el script del arma, weaponDamage:

// Instanciaci&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;oacute;n del objeto de da&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;ntilde;o
GameObject clon = Instantiate(damageNumber, hitPoint.transform.position, Quaternion.Euler(Vector3.zero)) as GameObject;

// Modificaci&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;oacute;n del da&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;ntilde;o mostrado
clon.GetComponent&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;DamageNumber&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;().DamagePoints = intDamage;

Esta implementación se traduce en feedback visual inmediato cada vez que el personaje inflige daño. Siguiendo este patrón, se puede también mostrar el daño recibido, y aplicar cambios de color para representar distintas acciones (por ejemplo, daño recibido en rojo).

Esta programación dinámica y visual no solo embellece la experiencia de juego, sino que también adopta prácticas de desarrollo versátiles y reutilizables que pueden ser aplicadas en diversas partes del desarrollo de videojuegos.

Yone Moreno Jiménez

student•

Muy interesante la mecánica de mostrar los puntos de daño:

Juan Sebastian Ortiz Santacoloma

student•

Se puede usar Destroy(gameobject, 1.5f) para destruir el damageNumber despues de 1.5 segundos.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class DamageNumber : MonoBehaviour
{
    public float damagePoints;
    [SerializeField] float damageSpeed;
    [SerializeField] Text damageText;

    private void Start()
    {
        Destroy(gameObject, 1.5f);
    }

    // Update is called once per frame
    void Update()
    {
        damageText.text = damagePoints.ToString();
        this.transform.position = new Vector3(this.transform.position.x, this.transform.position.y + damageSpeed * Time.deltaTime, this.transform.position.z);
    }
}

Leonel Grisaleña

student•

Tal cual, inentendible lo de crear un script para destruir un gameObject 🤔

Edson Rodríguez

student•

Alguien puede ayudarme? Estaba practicando y de repente el sprite de mi personaje se duplicó en la pantalla. Lo raro es q no se lo puede manipular de ninguna forma, no se puede clickear, ni borrar, y no parece estar vinculado con ningún código... Alguien sabe cómo resolver esto?

Harold Jara

student•

Hice el mismo procedimiento para el daño hacia el jugador y no aparece, la funcionalidad del canvas es correcta pero no la esta instanciando en el juego :( que puedo revisar:

Código DamageWeapon private void OnTriggerEnter2D(Collider2D collision2D) { //Si coliciona con el Jugador o con el Enemigo if(collision2D.gameObject.tag.Equals("Enemy") || collision2D.gameObject.tag.Equals("Player")){

        Debug.Log("Colisiono enemigo o player");
        collision2D.gameObject.GetComponent<HealthManager>().DamageCharacter(damage);
        //Instanciar el prefab Blood en el punto del HitPoint del player
        Instantiate(hurtAnimation,hitPoint.transform.position, hitPoint.transform.rotation);

        Debug.Log("Obtiene la instancia cloneDamageNamber");
        //Obtener la instancia del impacto, la función  Quaternion.Euler para que no se rote el texto
        var cloneDamageNamber =  (GameObject) Instantiate(damageNumber, hitPoint.transform.position,
                    Quaternion.Euler(Vector3.zero));
        Debug.Log("Asigna damagePoints del script DamageNumber");
        //Carga la información en el script de DamageNumber en el damagePoints
        cloneDamageNamber.GetComponent<DamageNumber>().damagePoints = damage;
    }
}

Leonel Grisaleña

student•

Dejo como otro aporte, cambie la creación del texto a la clase HealthManager para que se instancie ni bien se recibe daño. La misma cambia de color según quien se ve afectado

public class HealthManager : MonoBehaviour
{
    [Header("Configuration")]
    public int maxHealth;
    public int currentHealth;
    public GameObject damageTextNumber;

    SpriteRenderer _renderer;

    private void Awake()
    {
        _renderer = GetComponent<SpriteRenderer>();
    }

    // Start is called before the first frame update
    void Start()
    {
        currentHealth = maxHealth;    
    }

    // Update is called once per frame
    void Update()
    {
        if(currentHealth <= 0)
        {
            gameObject.SetActive(false);
        }
    }

    public void DamageCharacter(int damage)
    {
        currentHealth -= damage;
        StartCoroutine(HitEffect(_renderer));
        ShowDamageNumber(damage);
    }

    public void UpdateMaxHealth(int newMaxHealth)
    {
        maxHealth = newMaxHealth;
        currentHealth = maxHealth;
    }

    public IEnumerator HitEffect(SpriteRenderer _renderer)
    {
        if (_renderer != null)
        {
            _renderer.color = Color.red;

            yield return new WaitForSeconds(0.2f);

            _renderer.color = Color.white;
        }
        else
            Debug.LogError("Hay un null en el HitEffect");
    }

    public void ShowDamageNumber(int damage)
    {
        GameObject damageText = Instantiate(damageTextNumber, this.transform.position, Quaternion.Euler(Vector3.zero)) as GameObject; //I don't want text to get rotated. That why I used Euler
        damageText.GetComponent<DamageNumber>().damagePoints = damage;

        //Change Text Color depends if is a Player or an Enemy
        if (this.gameObject.CompareTag("Player"))
        {
            damageText.GetComponentInChildren<Text>().color = Color.red;
        }
        else if (this.gameObject.CompareTag("Enemy"))
        {
            damageText.GetComponentInChildren<Text>().color = Color.yellow;
        }

        Destroy(damageText, 5f);
    }
}

Leonel Grisaleña

student•

Dejo el código por si alguien quiere hacer que el texto haga un desvanecimiento en vez de desaparecer de una.

public class DamageNumber : MonoBehaviour
{
    [Header("Configuration")]
    public float damageSpeed;
    public float damagePoints;
    public float fadeOutSpeed;

    public Text damageText;
    private CanvasGroup _canvasGroup;


    private void Awake()
    {
        _canvasGroup = GetComponent<CanvasGroup>();
       
    }

    private void Start()
    {
        StartCoroutine(FadeOut());
    }


    // Update is called once per frame
    void Update()
    {
        damageText.text = damagePoints.ToString();
        this.transform.position = new Vector2(this.transform.position.x, this.transform.position.y + damageSpeed * Time.deltaTime);
    }

    public IEnumerator FadeOut()
    {
        yield return new WaitForSeconds(0.4f);

        if (_canvasGroup != null && fadeOutSpeed != 0)
        {
            while (_canvasGroup.alpha > 0)
            {
                _canvasGroup.alpha = Mathf.Lerp(_canvasGroup.alpha, 0, Time.deltaTime * fadeOutSpeed);
                yield return new WaitForSeconds(0.01f);
            }
        }
    }
    
}

Leonardo Gutierrez

student•

Genial

Wandy Rafael Santana Evangelista

student•

Me encanto.!!!