- Home /
Circular 9 slice? Draw a circle with constant thickness
Trying to do something that sounds rather simple - each unit has different attack range, I want to draw a circle around that unit, and the size of the circle depends on the range.
This is in 2D, and the problem is that if I use a sprite and stretch/skew it, the thickness of the outline changes. I'd like to do something similar to the UI 9-slice for dialogs, so that the inside can stretch/skew (in my case the inside is transparent), but the outline will keep it's thickness.
Any tricks on how to do this without creating many different sprites?
If it were a filled circle then an easy way would be to use two sprites.
For example if you want a white circle with a black outline, you'd use a black circle with a concentric but slightly smaller white circle in front of it. If you keep the difference in radii constant, then the outline width will be constant.
I haven't thought this part through, but maybe there's be a way of adapting this technique to get your transparent interior, using a mask.
Another approach would be to use vector graphics, I dare say there will be stuff in the asset store that could do it.
Its not a filled circle, just a textured outline.
I tried the asset store, finding things there is not so easy... if you have something particular in $$anonymous$$d let me know please.
Answer by DiegoSLTS · Oct 22, 2015 at 03:03 PM
I don't think something like that ("9-sliced" equivalent for circular images) exists.
One option could be to use a LineRenderer instead of a texture, with enough points to make a fake circle. If the outline is more than a constant color you can use a material with a more detailed texture.
Your answer
Follow this Question
Related Questions
Accessing RectTransform Rotation? 1 Answer
Canvas Screen Space Issue 1 Answer
2D UI in 3D space 3 Answers
UI Image source image not changing 2 Answers
Sprite import problem? 1 Answer