Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Question Label with gradient mask

Discussion in 'UI Toolkit' started by b4gn0, Sep 1, 2020.

  1. b4gn0

    b4gn0

    Joined:
    Jul 26, 2019
    Posts:
    119
    Hello,

    We are using a VectorImage as background to mask one of our label and get a text effect where each letters appear after another.

    It works nice if the image has 0% opacity, the letters come out one after another.
    However we would like the coming-in letters to have some kind of faded color.

    Is it possible to do that with a VectorImage mask?

    Using opacity different from 0% paints itself as background:
    upload_2020-9-1_10-21-34.png
     
  2. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    If I understand this correctly, you would like the mask to mask but also act as an "opacity multiplier" over what's underneat it?

    I don't think using a VectorImage as mask would work to do that, as masks in UI Toolkit will completely discard what's outside the mask.

    If you can provide more details about your UI Toolkit hierarchy and setup maybe we can help.
     
  3. b4gn0

    b4gn0

    Joined:
    Jul 26, 2019
    Posts:
    119
    We are trying to emulate the Zelda Breath of the Wild dialogue text (example:
    )

    We excluded from the start the use of a changing "Text" (adding one letter each X frames) because wrapping would occur on partial words.

    Our current implementation:
    upload_2020-9-2_14-56-10.png

    upload_2020-9-2_14-56-24.png upload_2020-9-2_14-56-38.png

    We have a coroutine that updates the dialogue-mask background image by placing a narrower one each X frames.
    This gives the feel of an "appearing" text, and is close enough to the Zelda one.

    However with our solutions letter just "appear", they don't fade in.
    As per OP, we tried using a background vector image with opacity but that just gets added to the current background.

    Is there any way to achieve that result using the current UI Toolkit's features?

    Thanks
     
  4. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    This effect seems possible with TextMesh Pro, see the following thread:
    http://digitalnativestudios.com/forum/index.php?topic=1182.msg8986#msg8986

    UI Toolkit doesn't have TMP support at this time, but we are working to integrate some effects in the future. This will include alpha/color tags: http://digitalnativestudios.com/textmeshpro/docs/rich-text/#color
    However, the alpha tag won't really allow you to dynamically animate per-character opacities.

    Per-character opacity changes as described in the above thread requires a loop through the text vertices to change the opacity, this isn't really a TMP feature as we would also have to give access to the generated meshes. We'll see if we can provide that kind of feature in the future.