Hello guys, I would like to know if there’s a way to detect the edge of the fill amount of a sprite.
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
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.
float width = lProgress.GetComponent().rect.width;
Vector3 tempV = indicator.GetComponent().anchoredPosition;
tempV.x = -width/2;
tempV.x += width * lProgress.fillAmount;
indicator.GetComponent().anchoredPosition = tempV;
Faced this problem today. This worked out for me. Hope it helps.