Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Unite 2023 Registrations are now LIVE! We are thrilled to announce that Unite 2023 Registration is now live and open for all!
    Dismiss Notice
New Forum User Notice Unite 2023 Registrations are now LIVE!

Question Smaller than pixel length?

Discussion in 'UI Toolkit' started by CookieStealer2, Nov 2, 2022.

  1. CookieStealer2

    CookieStealer2

    Joined:
    Jun 25, 2018
    Posts:
    119
    It seems like nothing can be smaller than a pixel. This makes it hard to create smooth progress bars. Look at the following zoomed in view of the default progress bar. It looks like it is stuttering because of this.

    Is there a way to bypass this limit somehow?
    What I would expect is: as progress travels over a pixel, its alpha gradually increases.
     
    CookieStealer2, Nov 2, 2022
    #1

  2. SimonDufour

    SimonDufour

    Unity Technologies

    Joined:
    Jun 30, 2020
    Posts:
    515
    Yes, any layout is rounded to the real pixel grid to get crisp border. There are multiples solutions to achieve what you want:

    1. Use the translate property and set something that is not pixel aligned. You can do a parent with overflow:hidden, in it a child that has the same size as the parent, and then translate it to the left by 100% with the style.translate. The property is applied post layout and has no alignment consideration

    2. You could do the same with the scale (and get away from the overflow:hidden on the parent) if you set the transform origin to the left of the child.

    3. You can use a custom component that create the geometry with the UITK vector API. The api wiil generate an anti-aliassed result even when rendered on a non-AA texture.
     
    SimonDufour, Nov 2, 2022
    #2

  3. CookieStealer2

    CookieStealer2

    Joined:
    Jun 25, 2018
    Posts:
    119
    Thanks for listing the options. I will keep this in mind.

    Unfortunately, for my use case I would like my progress bar to be a static texture that is not moved or scaled, just masked by the parent with overflow hidden to reveal more and more of it.

    I attempted to achieve this by translating the parent to the left while translating the child to the right. Sadly though, the tricks you describe in option 1 and 2 do not seem to apply in this case. It seems the translate property is only applied post layout for non-overflow hidden elements or something. (Maybe this is a bug, or oversight?) Option 1 sure works, but that means my texture appears to slide in from the left, which is not what I want.

    I guess my only option is 3 then, although this seems like a less flexible approach since I wouldn't be able to add child elements to the bar element.

    Also, translating elements from C# freezes UI builder for me sometimes. I can't zoom in and out with scroll wheel, or click on elements in the viewport.
     
    Last edited: Nov 3, 2022
    CookieStealer2, Nov 2, 2022
    #3