No more way to toggle text visibility with bevy main

[BorisBoutillier]

Bevy version

Current git main with the new renderer

Operating system & version

All Oses

What you did

In bevy 0.5 I was using the Visible component in a TextBundle to play with visibility of text in the UI of my Kataster game. ( typically to have some text ’blinking’)

What you expected to happen

While Visible has been updated to Visibility and is available for sprites, the Visibility component is not available for TextBundle ( even if added manually with a ComputedVisibility it does not work).
display attribute on Style impacts the layout so is not the solution here.

So as far as I have seen there no simple way to toggle visibility of a Text in the UI.

[alice-i-cecile]

Yep: setting the display field of the Style component to Display::None will cause the text to not be rendered, but will affect layout in undesirable ways.

As will setting the text to an empty string.

Setting the color of the text to be fully transparent might work, but that's a bit of a hack.

[mockersf]

It seems the recommended way to do it in html is by changing the opacity, which is in the color in Bevy
https://html-online.com/articles/blinking-text-css-animation/
https://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css-3

As Bevy UI is following flex box conventions, it would be the right way to do it

[alice-i-cecile]

As Bevy UI is following flex box conventions, it would be the right way to do it

I don't particularly like this answer, but under the current paradigm you're completely correct. I'll close this out then, and we can discuss "should we be following the flex box convention" elsewhere.

[Davier]

It seems the recommended way to do it in html is by changing the opacity, which is in the color in Bevy https://html-online.com/articles/blinking-text-css-animation/ https://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css-3

As Bevy UI is following flex box conventions, it would be the right way to do it

I think these examples use the transparency in order to get a fade-in fade-out animation. There is a visibility property in CSS which definition is: "The visibility CSS property shows or hides an element without changing the layout of a document."

Also, if we choose transparency as the recommended solution, we should optimize it by skipping rendering in that case.

[mockersf]

I think these examples use the transparency in order to get a fade-in fade-out animation

Ha you're right, the first few results of googling "how to do blinking text in html" seems to do it with an animation

[alice-i-cecile]

Reopening due to the mentioned 'visibility' property.

[cart]

Yeah I think it makes sense to re-add Visibility