koobas.hobune.stream
Circular Progress Bar/Meter - how to generate smooth alpha channel for cutout?
Hey all;
So at this point I've seen the thread by Eric (awesome, thanks Eric) regarding how to put together a circular meter, and I understand what and how this is working in Unity.
However, every attempt that I've tried to re-create the alpha channel for my own asset always results in the asset "filling" oddly - as I adjust the cutout value for the asset in Unity, it does fill in following the arc of the circle, but it also fills from the inside of the arc outward; the best way to describe it is like ink bleeding into a napkin. So I also saw this post - where it appeared the compression settings within Unity could've been causing this as well.
So I've been monkeying around with that setting as well, but I can't get the asset to fill as smoothly as Eric's original from his demonstration.
So my question is probably less about Unity, and more about techniques on how to use either Photoshop or Illustrator to create a smooth angle gradient that follows a curve, but is the same white/black balance from the inside of the arc to the outside of it. Or, if Eric would be so kind as to just post how he made that gradient for the alpha channel in his example, that would be excellent.
Any help is greatly appreciated! And if there's anything I should be including attached to this question, please let me know!
-Agent654
Here is an alternate circular progress bar that works by rotating textures:
http://answers.unity3d.com/questions/394850/make-a-circular-progress-bar-that-changes-state-up.html
I just selected the gradient angular mode in my old Photoshop CS2:
...then dragged a line from the center of the image to the top...
NOTE: As @Agent654 said, this actually has the same "ink-blot" appearance - smells like a Photoshop gradient characteristic, not an Unity problem.
In order to solve this, I created a simple program in Delphi (oh God, Pascal sucks...) and generated a 16 bit RAW file, then saved it via Photoshop in the PNG format. The result can be seen (and downloaded) below, and worked as expected: the border appears jagged as it should be in a cutout shader, and definitely doesn't look like a Rorschach test as before.
aldonaletto - Thanks for the suggestion, but that's exactly what I did within photoshop and I'm still getting the same "ink-blot" appearance within Unity as the color fills.
Any other techniques to make the gradient more even?!
Aldonaletto - thanks again for posting, after going back and double-checking the assets from Eric's example in-game, his alpha cutout suffers from the exact same problem.
Could it possibly be an issue regarding your import settings on the texture?
@alucardj: I did some testing, and concluded that the problem is the Photoshop gradient, not Unity. I generated a RAW mask with a small program, imported it to Photoshop and saved in PNG format, and it worked fine.
Will turning off anti-aliasing help removing the ink-blot effect?
Here's what I got:
With AA
Without AA
The original image is a gradient circle I rendered in Blender. I then ran a quick test with them. If I turn off the anti-aliasing when I render/export it, the ink-blot effect is gone.
