Detect fill amount edge
[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 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.
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 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.
Your answer
Follow this Question
Related Questions
Managing multiple images fillamount by one function? 1 Answer
How to get the width of filled image ? 0 Answers
How do I find the edge inside a two color image? 0 Answers
Health Bar Not Working 1 Answer
Selecting an Image Partially 0 Answers