Synchronising Anchor onUpdates to prevent overlap or gaps

[mfennell]

I have a central UI sprite that has a transparent center set up with borders for nine slicing.
Around that I have 4 solid UI Sprites that are anchored to the UI root and to the central UI sprite to fill the screen.

What I want to do is have an animated "modal tutorial" effect where the central gap can be animated to show different areas I wish to highlight.

I have all of the UI Sprites in a UI panel, and the alpha controlled there.

The problem I have is sometimes the movements are not perfectly in sync, and sometimes I see gaps, and sometimes overlaps that are better shown in the attached image.

Is there a way I can synchronise the Anchor onUpdates not to show this?

[ArenMook]

Instead of using those 4 solid sprites, create a new custom widget type instead. In the OnFill function create 16 triangles (8 quads -- everything except the center). Doing 4 separate widgets means floating point imperfections, so pixels don't line up properly whenever the widget is scaled or anchored (if it's centered). If you aren't scaling anything, then make sure the widgets aren't using a center pivot.

[mfennell]

Hi Aren
thanks for your reply. How do I go about creating a new custom widget type?
I googled pretty extensively but found nothing to help me in the right direction.
Thanks in advance for your time and help.

[ArenMook]

Just derive from UIWidget and overwrite the OnFill function. You may also want to overwrite mainTexture and material properties. If you don't mind some extra properties that won't be used, you can also derive from UISprite. You will only need to overwrite its OnFill then.