Is there a way to detect where the edge is of a sprite being horizontally/vertically filled? I have a circular health bar that gets depleted by vertically filling the sprite, but I would like to add “icon” on the top of the bar that follow the edge. Is this possible?
this should be easy to calculate. put your “icon” inside you image which is depleted.
in code set the anchorMin and anchorMax Y values to the amount of fill (a value between 0 and 1) and the anchoredPosition to zero.
you can adjust the actual offset by changing the pivot of your “icon”.
5 Likes
hi @Hosnkobf , thanks for the tip, but Im having trouble in the code .I used to follow your instruction so my code ended up below.
void Awake()
{
icon = GetComponent<Image> (); // the parent image or the circular health bar
imgRect = GetComponent<RectTransform> ();
edgeRect = transform.GetChild (0).GetComponent<RectTransform> (); // the icon to display at the edge of filled image
}
float fillAmount = icon.fillAmount;
edgeRect.anchorMin.x = fillAmount;
edgeRect.anchorMin.y = fillAmount;
edgeRect.anchoredPosition.x = 0;
edgeRect.anchoredPosition.y = 0;
This got me an error
Cannot modify a value type return value of `UnityEngine.RectTransform.anchorMin’. Consider storing the value in a temporary variable
Please see attach image for reference. Thank you
anchor min / max and position are of type Vector2. Vector2 is a struct - this means it is passed by value (copy). The variables can only accessed per getter / setter. if you get the variable to set the x or y value you get a copy, so you do not change the actual value. that is why the compiler says no.
You also have a bug in your code. you need to set the anchor min AND max in only one direction.
this should work:
edgeRect.anchorMin = new Vector2(edgeRect.anchorMin.x, fillAmount);
edgeRect.anchorMax = new Vector2(edgeRect.anchorMax.x, fillAmount)
edgeRect.anchoredPosition = Vector2.zero;
5 Likes
Hi sir I tried your code but the icon is not moving circular, instead it moves horizontal, from up to down
Hi @Zonlib , I will try your solution. I’ll update you asap.Thank you so much
Hi @Zonlib , the icon is moving vertical, from up to down 
I want it like this sir.
Here you are
public Image _bar;//Bar
public RectTransform _button;//Button-Container
void HealthChange(float amount){
float buttonAngle = amount * 360;
_button.eulerAngles = new Vector3(0, 0, -buttonAngle);
}
Call function:
HealthChange(_bar.fillAmount);
Demo:
3 Likes
Hi sir thanks for your reply. I will now try it :). Thank you so much
Hello sir @Zonlib and sir @lancekidd . How about moving the icon in 190 degrees in a arc image?I found this thread very useful and I reuse your code. I changed float buttonAngle = amount * 360; to
float buttonAngle = amount * 190; but the icon is not rotating. How can I solve this sir? thanks. I want to achieve something like in the image below.
You just clamp fillAmount value of image
_bar.fillAmount = Mathf.Clamp(_fillAmountValue, 0, 190.0f/360);
Is this the correct code sir?
public Image _bar;//Bar
public RectTransform _button;//Button-Container
void HealthChange(float amount){
float amount = _bar.fillAmount = Mathf.Clamp(_fillAmountValue, 0, 190.0f/360);
float buttonAngle = amount * 360;
_button.eulerAngles = new Vector3(0, 0, -buttonAngle);
}
I mean you just control the value pass on fillAmount from 0 to 190/360.
For example if you want to make a health bar the value varies from 0 to 100
You will write code like this:
public Image _bar;//Bar
public RectTransform _button;//Button-Container
void HealthChange(float healthValue){//health:0->100
float amount = (healthValue/100.0f) * 190.0f/360;
_bar.fillAmount = amount;
float buttonAngle = amount * 360;
_button.eulerAngles = new Vector3(0, 0, -buttonAngle);
}
Hi sir I tried your code but still the icon not following the edge of filled image
I just want to achieve this sir
I think you will hardly visualize the words so I created a short tutorial video for you:
8 Likes
Hi,
How can we make this horizontally.