Detect fill amount edge

Question

[Unity 5.5] Hello guys, I would like to know if there's a way to detect the edge of the fill amount of a sprite.

Example: There's an experience bar (an Image component with 'Image Type' as 'Filled') with width value set to 100 and the fillAmount is set to 0.3 (30%), and another Image called 'edgeImg'.

I would like edgeImg to always follow the edge of the experience bar's fill amount, that is, in this case, edgeImg would be at x position 30

EX: http://image.prntscr.com/image/54eb67d82a964731a4b2768a667a509e.png

Answer 1

Best Answer

Answer by KoenigX3 · Jan 06, 2017 at 03:12 PM

I have a solution, you will have to optimize it for the perfect appearance.

Create two gameobject variables called 'img', and 'edgeImg' - these will represent the experience bar and the edge. The 'edgeImg' should be a child of 'img', and the anchor preset should be at the middle center.

You only need to use the Update() method:

 void Update () 
     {
         edgeImg.GetComponent<RectTransform>().localPosition = new Vector3(img.GetComponent<Image>().fillAmount * 100 - 50, 0, 0);
     }

It is not perfect however. If the experience bar image has empty pixels at the two ends, the edge image will slide too far. If you can not modify the image itself, you can modify the code.

The X component consists of the fillAmount, and two integers: 100 and 50. 100 stands for the width of the image and 50 stands for the maximum amount of slide from the center. If the image has like 10% empty space at both ends, you should change 100 to 80, and 50 to 40. If you want to optimize this, you should change these two integers to two public variables and change them through the Inspector at runtime.

Add comment · Show 1 · Share

AndresPGC · Jan 06, 2017 at 04:31 PM 3

Share

Thanks for the reply, this worked perfectly. Here's the full code, to help others people with the same question:

     private Image _image;
     private RectTransform _edgeRect;
     private RectTransform _imgRect;
 
     //You can edit this on inspector, to set up the margin.
     public float Edge$$anonymous$$argin = 20;
 
     /// <summary>
     /// If <c>true</c> then the image edge will be hidden when the fill amount comes to 0
     /// </summary>
     public bool HideWhenNotFilled = true;
 
     void Awake()
     {
         _image = GetComponent<Image>();
         _imgRect = GetComponent<RectTransform>();
         _edgeRect = transform.GetChild(0).GetComponent<RectTransform>();
     }
 
     void Update()
     {
         if (_image.type != Image.Type.Filled) return;
 
         _edgeRect.gameObject.SetActive(!(_image.fillAmount == 0  && HideWhenNotFilled));
         _edgeRect.localPosition = new Vector2(_image.fillAmount * _imgRect.rect.width - Edge$$anonymous$$argin,
             _edgeRect.localPosition.y);
     }

Answer 2

Answer by Slashik · Mar 25 at 09:26 PM

 float width = lProgress.GetComponent<RectTransform>().rect.width;
 Vector3 tempV = indicator.GetComponent<RectTransform>().anchoredPosition;
 tempV.x = -width/2;
 tempV.x += width * lProgress.fillAmount;
 indicator.GetComponent<RectTransform>().anchoredPosition = tempV;

Faced this problem today. This worked out for me. Hope it helps.

Add comment · Share

Detect fill amount edge

2 Replies

Your answer

Follow this Question

Related Questions