Bug 2D semi-transparent UI elements flicker to invisibility OR full opaqueness in Editor

Hi there, thanks for reading.

Issue: Semi-transparent UI elements on my 2D mobile game flicker repeatedly in the Unity Editor and in Play Mode. There is NO issue when building to Android or iOS; this ONLY happens in the Editor. It does not affect any part of the Editor or any other component in the project; it ONLY affects these semi-transparent UI elements. They are basic 1x1 sprites (Texture2D) being stretched across the screen to produce semi-transparent black backgrounds for other UI elements.

For flickering elements that are more transparent than they are opaque, they flicker by disappearing. For flickering elements that are more opaque than they are transparent, they flicker by becoming entirely opaque. It seems like the transparent backgrounds momentarily flicker by turning entirely transparent OR by becoming entirely opaque.

Video of it happening (note the top and bottom bars on first screen, parts of second screen):

I have only one camera in the entire project:


Example object that flickers:


The texture:


Any ideas?? I have played with Nvidia settings on GPU (excluding Unity Editor from gSync), tried playing with camera clipping planes, z values for the UI elements, etc. I will take any advice or ideas at all, as this makes capturing the game for promotional videos impossible with the flickering.

Thanks in advance! I'll respond to every reply.

 

Can you show the script that sets the alpha value of those elements? You must be having some script since you are fading them in and out...

Does this happen only when you move the mouse?

Can you get it into a state where the UI elements are broken for a longer period of time? If yes, I would take a RenderDoc capture or use frame analysis to find out if they are being rendered in the wrong order, to see if the correct alpha value is being passed, if the draw call is missing, if the position is wrong, if the quad is being culled for some reason (e.g. depth or stencil or scissor rect, ...). However, that only works if it's stable because otherwise it's very hard to capture the right moment.

Do you have some UI overlay tool running like MSI Afterburner?

Do you use the DX11 or DX12 renderer?

 

Hey @c0d3_m0nk3y, thanks for the reply!

There is no script to change the transparency of the affected objects. They always remain the same alpha forever. These semi-transparent black backgrounds are used to provide a good looking and static background for white text that will appear.

No, but moving elements (like sliding the background with your mouse) past the flickering semi-transparent elements does cause it to flicker more.

Sadly the flickering is extremely fast. I can get it to a state where it's constantly flickering, but the flickering itself is milliseconds each.

Just the Nvidia one. Disabled the in-game overlay and no change. I've also disabled or enabled (tried every setting) under Gsync with no change.

Since it's for mobile, we use OpenGLES3.



Do you think it may be the z value of these UI elements in relation to the camera settings? I admit I'm not much of a graphics programmer, this is all learned over the last few years.

One thing I've found is the bigger the resolution I make the game window, the more it flickers. Forcing a high res 16:9 (let's say 3840x1280 or something) flickers WAY more than just leaving it as 16:9 landscape.

Do you know if there's a trick like adding a shader to the material that may cause some performance loss but guarantee no flickering? The game is really simple and 2D so I have loads of performance to spare.

Thanks again for your reply.

 

Isn't there some fading going on at 0:07 after you selected a game mode?

Do you think you could capture it with a couple of tries? A RenderDoc capture would be very helpful.
You could try setting Application.targetFramerate to some very low number to give you a better chance of success.

But if I understood you correctly, it only happens on Windows in the editor, right? I'm guessing the Unity editor is using DX11 for the editor in that case but not sure.

It could be some z ordering issue, especially if all those UI elements use the same z value and the order becomes random. But don't know how that works exactly for UI elements from the top of my head.

 

Thanks again for your reply, @c0d3_m0nk3y

There is some fullscreen fading happening between screens, but those GameObjects are disabled entirely when the fade is complete.

I will look into RenderDoc (never tried that before).

I have uploaded a better video to YouTube showing the flicking of the GameObjects that are being used as transparent black backgrounds for white text. Notice it flickers into existence and out of existence rapidly. This happens anywhere where a semi-transparent background for text is used. Also notice something new, I can get it to stop entirely if I select the GameObject that in the Scene View and expand the meterial section. It ONLY stops flickering in the Game View when the material is expanded fully in the Editor. Bizarre!

The video:

I tried Z ordering so much and wasn't able to change it. Recently changed from Linear colour space to Gamma (for unrelated building issues) and that didn't change anything either. It did feel like it flickered less in Linear though.

This has to be a Unity bug right, given the new YouTube video? Why would expanding the details of the material (which is as basic as it gets) stop flickering in Game View? It's repeatable over and over too: unexpanding the material starts the flicker again, expanding the material stops the flicker.