Search Unity

  1. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice
  2. Ever participated in one our Game Jams? Want pointers on your project? Our Evangelists will be available on Friday to give feedback. Come share your games with us!
    Dismiss Notice

Help Wanted Styles are mangled when hiding and showing

Discussion in 'UI Toolkit' started by zenith_77, Jul 1, 2020 at 10:43 AM.

  1. zenith_77

    zenith_77

    Joined:
    Sep 8, 2017
    Posts:
    4
    I've been having huge issues with UI Toolkit.

    What I'm trying to achieve is very simple; have a 'menu button'/cog, when pressed, pulls up a menu in the center of the screen, and hiding that button at the same time. When you press 'resume' the menu disappears and the cog reappears. Simple, eh?

    For a bit of history; I originally tried this with two separate Panel Renderers, scripts and styles - one for the cog, one for the menu, and hid and showed them using the SetScreenEnableState() method in the Unity examples. This didn't work in the end as it caused a slew of errors within the internals of event system, throwing Null Pointers.

    So I amalgamated the two Panel Reneders, scripts and style into one, and changed the visibility of the styles via setting style.display to either DisplayStyle.None or DisplayStyle.Flex.

    Before I got to this I managed to get an absolute ton of;

    WebGL - GL INVALID OPERATION: Insufficient buffer size

    when 'Build and Run' -ing. The code would work perfectly in the editor but crash as soon as I moved the mouse over any element in the UI.

    I stripped all of the failing UI elements out into a 'cut down' version of the project in order to bug fix the issue.

    For some reason this seemed to clear up when I removed the text="RESUME" from the Button element and moved it into a <ui:Label text="RESUME" /> and removed any individual styles on the Button itself.

    I have no idea why this happens. It still happens in the main version of the project, but now not in the stripped-down version. So this is still an issue for me going forward. Any help or advice on that would be gratefully received.

    I still have another issue. Now I've gotten the project to not crash in a massive heap, I still have issues with hiding and showing elements where the entire screen gets mangled.



    Upon hiding and showing turns into;



    (Note: I have both cog and menu showing at the start for ease).

    I've tried hiding using DisplayStyle.None / DisplayStyle.Flex and Visibility.Hidden / Visibility.Visible - and both! And always I get this issue.

    Can any-one tell me what I'm doing wrong here? There has got to be something fundamental for the system to be causing 'WebGL - GL INVALID OPERATION: Insufficient buffer size' issues with only five or so elements on screen. There has got to be something fundamentally wrong with the styles being mangled so badly.

    All these errors occur after 'Build and Run' and never in the editor itself.

    I've reported the issue to Unity and filed a bug report, but having heard nothing from them for a week so I thought I'd turn to you guys for help.

    Happy to provide any information you might require.

    Project files are here; https://cols-general-stuff.s3.eu-west-2.amazonaws.com/WBTCutDown.rar (331 KB)
     
  2. danm36

    danm36

    Joined:
    May 18, 2016
    Posts:
    6
    I notice that the project you supplied is using Unity 2019.4. I believe the runtime UI system is only designed to properly work in 2020.1 and later unfortunately due to some behind the scenes stuff in that version, unless those changes get backported into the 2019 LTS. Your second image also looks like the generated mesh behind the scenes is being corrupted, which I suspect might be due to you also doing a WebGL build? I updated your supplied sample to 2020.1.0b13 using the UIElements runtime 0.0.4-preview package and it seems to work fine in Editor, although I don't have the WebGL build pipeline set up myself to test it in a browser.

    Perhaps you could try installing the 2020.1 beta, create a copy of your project and upgrading the copy to that. If it works there, then it's a Unity version issue and you'll just have to work from 2020 when it releases or wait for the 2020 LTS. If it still doesn't work and corrupts, then it's a WebGL issue with the UIElements runtime package. In that case, I think it might be a while before you get a fix, as I feel that the Unity team are mainly focussing on PC and mobile usage at the moment, although I'd love to be proven wrong.
     
  3. zenith_77

    zenith_77

    Joined:
    Sep 8, 2017
    Posts:
    4
    Thanks for your advice.

    I'm such an idiot - I upgraded to the beta and then the alpha when that didn't work, when trying to solve the 'WebGL - GL INVALID OPERATION'. When I'd sorted that I reverted to the 2019 build when cutting down the project as my original project was in 2019. I've just taken your advice and the 2020 beta build doesn't suffer from the Mesh corruption issue...!

    While I'm annoyed at my own stupidity, I really do appreciate you chipping in with your help! Thanks :)
     
  4. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    474
    This is a known issue with WebGL builds, we're looking into it.
     
    zenith_77 likes this.
  5. zenith_77

    zenith_77

    Joined:
    Sep 8, 2017
    Posts:
    4
    Are you looking into the mangled styles or the 'GL_INVALID_OPERATION: Insufficient buffer size.' issue, or both? (The error message has changed from 'WebGL - GL INVALID OPERATION: Insufficient buffer size' in 2020.1)

    Having got the style mangled issue solved by upgrading to latest 2020.1.beta as soon as I change anything the 'GL_INVALID_OPERATION: Insufficient buffer size.' returns.
     
  6. zenith_77

    zenith_77

    Joined:
    Sep 8, 2017
    Posts:
    4
  7. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    474
    I was referring the the WebGL buffer issue that causes visual artifacts. There are some particular limitations on WebGL that causes these issues.
     
unityunity