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!

Resolved How to reveal text using a wipe in UIToolkit?

Discussion in 'UI Toolkit' started by achimmihca, Aug 2, 2023.

  1. achimmihca

    achimmihca

    Joined:
    Feb 13, 2016
    Posts:
    266
    I have a karaoke game and would like to have a rolling color wipe for the current lyrics.



    At the moment, I create a label element for every syllable.
    This works ok, but it could be improved with a smooth wipe of colored text on pixel level instead of syllable level.

    One solution could be to use masking, but this is not yet available in UIToolkit.
    Are there other ways how this could be achieved?

    Example of the goal:



    Note that the same question has been asked and solved for UGUI, but I am looking for a UIToolkit solution.
     
    achimmihca, Aug 2, 2023
    #1

  2. achimmihca

    achimmihca

    Joined:
    Feb 13, 2016
    Posts:
    266
    > One solution could be to use masking

    Yes, UI Toolkit can already do masking via a parent element with "overflow: hidden"

    The hierarchy could be "labelContainer > labelElement", where labelContainer has "overflow: hidden".
     

    Attached Files:

    achimmihca, Aug 7, 2023
    #2

  3. oscarAbraham

    oscarAbraham

    Joined:
    Jan 7, 2013
    Posts:
    431
    You could put each row of text inside a plain Visual Element. Then you set that Visual Element's 
    overflow
    property to 
    hidden
    . Finally, you animate the Visual Element's width to reveal the text it contains.
     
    oscarAbraham, Aug 7, 2023
    #3

  4. magnetic_scho

    magnetic_scho

    Joined:
    Feb 2, 2020
    Posts:
    69
    How about having one label with the entire text and use rich text tags to set the alpha?
    Of course, you could then only fade character by character, but it would spare you the hassle of having so many labels.
     
    magnetic_scho, Aug 12, 2023
    #4
    dlorre, mikejm_ and oscarAbraham like this.

  5. mikejm_

    mikejm_

    Joined:
    Oct 9, 2021
    Posts:
    346
    Wow that's pretty creative for a letter by letter fade effect. I never thought of that. I didn't know it supported that.

    https://docs.unity.cn/Components/UIE-supported-tags.html

    I would have just suggested using a overflow hidden visual element as well as the parent with the label set to position.absolute and then adjusting the overflow hidden parent dimensions/position/translation.
     
    mikejm_, Aug 13, 2023
    #5