Fading Splatter

Rather than enabling/disabling the canvas I tried to have the splatter effect show when the player was damaged and then gradually fade from the screen. For this I serialized the Image component from the damage canvas in the DisplayDamage.cs script. Then I made a private method that would change the alpha (or opacity) of that image. In the coroutine I updated the alpha at the end of every frame and used the impactTime field to dictate how long it would take in seconds for the image to become completely transparent. Code below.

public class DisplayDamage : MonoBehaviour
{
    [SerializeField] float impactTime = 0.5f;
    [SerializeField] UnityEngine.UI.Image splatterImage;

    void Start()
    {
        SetOpacity(0);
    }

    // 0 -> Fully Transparent; 1 -> Fully Opaque
    private void SetOpacity(float opacity)
    {
        Color colour = splatterImage.color; // store the image's colour component in a variable
        colour.a = opacity; // set alpha component
        splatterImage.color = colour; // assign the new colour back to the image
    }

    public void ShowDamageImpact()
    {
        StartCoroutine(ShowImpact());
    }

    IEnumerator ShowImpact()
    {
        float opacity = 1f;
        float percentDone = 0;

        SetOpacity(opacity);
        while (opacity > 0)
        { 
            yield return new WaitForEndOfFrame();

            opacity = Mathf.Lerp(1, 0, percentDone); 
            percentDone += Time.deltaTime / impactTime; // percentDone will equal 1 after "impactTime" seconds 
            SetOpacity(opacity);
        }

        SetOpacity(0);
    }
}
6 Likes

Very good job. Thank you for sharing this

Privacy & Terms