Search Unity

  1. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Question Animating a Square Borderline

Discussion in 'UGUI & TextMesh Pro' started by FarmerInATechStack, Sep 3, 2023.

  1. FarmerInATechStack


    Dec 28, 2020
    Does anyone know if there is a "Unity solution" for animating a square borderline on a UI? How would you build one?

    I'd like to achieve a result similar to the attached image. The gif shows two borderlines, but I just want to solve for one and then I could generalize to the other. I've seen some approaches for radial fills, but I'm looking for a square loop instead. I haven't tried this and didn't see any out of the box solutions, so I'd appreciate knowing how you all might accomplish this.

    Solutions that come to mind:
    • Sprite Sheets: I could bake the animation into sprites and animate through those. This seems best, but I'm new to sprite sheet animations so I'm cautious.
    • Masking: set a mask on top of a box outline and move the mask around.
    • Trail Renderer: attach a trail renderer to an object that is moving along the path of the square.
    • Line Renderer: draw the square with a line renderer, leave an open space, and move the positions on every frame.

    Attached Files: