- Home /
Image Radial Fill Incorrect
Hi all,
I'm trying to display a hexagonal power meter that fills radially. To do this, I have an image of a pointy top hexagon with Radial 360 fill with an origin at the bottom filling clockwise. However some of the angles of this fill are incorrect.
For example, if I want to fill up to 120 degrees from the bottom (the north west corner of the hexagon), the fill does not align with the corner. I've set the fill amount to 120 / 360 = 0.333
To show what the correct angle should be I've added a line image with its rotation set to -120 degrees. This lines up perfectly where I want the fill to line up. The line is correctly at the north west corner of the hexagon, but the fill is off.
The fill is incorrect at most angles, but it is correct at 90 degree increments (0, 90, 180, 270). It is just between those angles where the fill does not line up correctly.
I'm trying to write some code to add an offset to correctly line up the fill, but I would rather fix the root cause. Have I made an incorrect assumption? The fact that 90 degree angles work makes me think radians are involved, but I'm not sure how. Any help is much appreciated.
Thanks!
Answer by Bunny83 · Sep 11, 2021 at 10:27 PM
Well, the issue is most likely that your image is not square, so there will be all sorts of scaling issues. I just did some measurements in gimp and the visible area is about "3° larger" but only because of the aspect ratio issue. When you take the tan of 30° and multiply it by half the width of your image you get the pixel offset on your desired line. However if you "correct" the value by the aspect ratio of your image (which is 812 / 707 == 1.1485) You get exactly the area visible. So when you want to do any radial things, you should make sure your image is actually square and is not stretched nonuniformly.
Thanks for your response! I'm not sure I understand. If the image was distorted or stretched, wouldn't the line be off as well? Both the image and the line are at the same origin, with the line being angled at 120 degrees from the bottom. I would expect the line to be off if the image was distorted or stretched. Just to test, I made the image square and made sure it has a 1:1 aspect ratio and it still has the same issue. I've attached it to this comment. (To be clear, hexagon in the image is not square. It's a hexagon :P)
Well, I quickly tested your image and the issue seems to be related to the mesh generated from your transparent mesh. When you switch to full rect, the issue is gone. Also when you increase the "Extrude Edges" when using the normal mode "tight", the issue also decreases. So it seem sto be an issue with the proper UV mapping in the shader or something like that. I haven't dug any deeper.
It's really a bit strange. You may want to file a bug report in Unity. When you do, make sure you give clear instructions (setting fill amount to 0.3333333 and toggling between tight and full rect to see the difference). Maybe they can investigate.
Yep, switching the mesh type to full rect fixed the issue. Thanks for your help! I'll look into filing that bug.
Your answer
Follow this Question
Related Questions
OnPopulateMesh and fill 0 Answers
Image.fillAmount-Animation not updating? 0 Answers
How to change the end of image with type "Filled" 1 Answer
Image Fill Bug 0 Answers
image.fillamount doesnt decrease 1 Answer