How to add a reload indicator with radial filling to the fire button in the game interface?

Question

Unity

Good afternoon, here is my button adjusted for mobile systems. How to add an indicator to it? And since all the logic in the Player means that the lines need to be added here.


Here is the screen controller and firing logic:

public void InitUIController(UICharacterController uiController)
   {
    controller=uiController;
    controller.Fire.onClick.AddListener(CheckShoot);
   }

private void CheckShoot()
    {
        if (!canShoot)
        {
            animator.SetTrigger("StartShoot");
        }
    }

  public void InitArrow()
    {
        currentarrow = GetArrowFromPool();
        currentarrow.SetImpulse(Vector2.right, 0, 0, this);
    }
private void Shoot()
    {
        currentarrow.SetImpulse
                (Vector2.right, spriteRenderer.flipX ?
                -force * shootForce : force * shootForce, (int)extraDamage, this);

        StartCoroutine(Reload());
    }  

  private IEnumerator Reload()
{
  canShoot = true;
  yield return new WaitForSeconds(cooldown);
  canShoot = false;
}

I think you don’t need to touch the firing logic, but you need to write the button logic. Please help.

Answer 1

Good afternoon, dear, I did the task through Fill Amount:

public class FireCooldown : MonoBehaviour 
{
 public Image FireImage;
 public float cooldown= 1;
 bool isCooldown =false;
 public KeyCode Shoot;
  
  void Start () 
  {
    FireImage.fillAmount=0;
  }

  
  
  void Update () 
  {
    Shoot1();
  }
  void Shoot1()
  {
    if(Input.GetKey(Shoot)&& isCooldown == false)
        {
      isCooldown =true;
      FireImage.fillAmount=1;
    }
    if (isCooldown)
    {
          FireImage.fillAmount -=1 / cooldown * Time.deltaTime;
      if(FireImage.fillAmount <= 0)
      {
        FireImage.fillAmount = 0;
        isCooldown =false;
      }
    }

  }
}

We use the usual libraries such as:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
We put this script on the canvas, add the fire button and voila, it works.

Answer 2

I Imagehave a mode filledwith radial filling.