Fix: Removed pop-up issues during loading screen in Boss Room [MTT-3787] [MTT-5711]

[Elfi0Kuhndorf]

Description

I adjusted the sort order of different UI elements in order to display the RNSM window as well as the PopupPanel displaying connection attempts after a disconnect in front of the loading screen.

To verify the changes are correct:

1. Open Boss Room in the editor
2. Create a clone via parrel sync and open clone
3. Go into play mode in both editors, open RNSM window via pressing S
4. Create game session as host via direct IP in one editor and join the game with the other one
5. Reach post game (e.g. via pressing cheat option)
6. Watch that pop-ups appear in correct order during loading screens

Issue Number(s)

MTT-3787
MTT-5711

Contribution checklist

• Tests have been added for boss room and/or utilities pack
• Release notes have been added to the project changelog file and/or package changelog file
• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• JIRA ticket ID is in the PR title or at least one commit message
• Include the ticket ID number within the body message of the PR to create a hyperlink
• An Index entry has been added in readme.md if applicable

[fernando-cortez]

Like your other PRs, I'll mark this one as On Hold until this PR goes through.

[unity-cla-assistant]

All committers have signed the CLA.

[jilfranco-unity]

Hey Elfi! I'm wondering if we can adjust the sort order of the canvases again--I'm seeing that the loading screen now draws behind the In Game UI when it probably should be blocking all of it except for RNSM and the disconnection pop-ups (especially when when switching from the Char Select screen to in game 👀)

If it's helpful, I think the order we should shoot for is:

-TOP-
RNSM
Disconnection Popups
-Loading Screen-
Quit and Settings Menus & their ✖ and ⚙ buttons
In Game Debug Popups (such as the network simulator and in game cheats)
In Game How to Play Popup
In Game UI (player frames and action buttons in the Bossroom scene, the charter selection UI in char select)
In Game Environment (the raycasts that aren't blocked by UI and get through to the in game world)
-BOTTOM-

My thinking is that this way, RNSM and one's potentially disconnected status are still visible at all times, while the loading screen blocks all other UI (which looks quite a bit cleaner/less cluttered, and could eliminate the possibility of some weird edge case that could crop up from being able to quit the game in the middle of loading it, or something similar, as a bonus ✨)

[Elfi0Kuhndorf]

@jilfranco-unity Thank you for your feedback! I changed the sort order of the UI items accordingly, the new sorting order is the following:
RNSM (did not change sort order, cannot be changed I think?)
PopUpPanel (DisconnectionPopUp) = 1
Loading Screen = 0
SettingsPanel Canvas (Quit and settings plus buttons) = -1
Boss Room HUD (How to play popup and in game UI)= -2
Main Menu UI Canvas = -3
UI Root (PostGame UI Canvas) = -3

Please check if it now works as expected. :)

[jilfranco-unity]

Definitely looking much cleaner now! :) Last thing I've seen is that sometimes the menu buttons are drawn behind this panel in the character select scene, as seen here:

They look fine sometimes, so my guess is that they're both set to same the sort order value and will randomly on top of the other at runtime?

But yeah once that's fixed, I think we're good to go! 👍

[jilfranco-unity]

Awesome, looks good! :)

[fernando-cortez]

Opened up this PR real quick and found a few small oddities.

In-game messages drawing behind NetworkSimulator UI.

Edit: if you open up the gear, or hit X at this point, the popup for either of those options draws behind NetworkSimulator UI. Settings should probably go in front of all UI other elements, right?

Inside Main Menu, the debug text drawing behind a canvas element:

[Elfi0Kuhndorf]

In-game messages drawing behind NetworkSimulator UI.

so one of the original bug tickets is that the RNSM window was drawing behind the loading screen. If I put the sort order of the other UI elements in front of the RNSM then they will also draw in front of the loading screen or if the other way around the RNSM window will draw behind the loading screen again

Edit: if you open up the gear, or hit X at this point, the popup for either of those options draws behind NetworkSimulator UI. >Settings should probably go in front of all UI other elements, right?

EDIT: I personally feel like it is small issue and that both having them in front or behind the network simulator works. I could adjust this one so that the settings are in front of it, but then I need to readjust the rest again to make it work...

Inside Main Menu, the debug text drawing behind a canvas element:

I was evaluating that with Jil yesterday. If it draws in front of the popup it blocks the player from using the button for "join game", we could change the font size a bit more or the layout. But then it might be a bit small or have a weird layout.

[fernando-cortez]

In-game messages drawing behind NetworkSimulator UI.

This one seems to be an issue still though. Popup messages should draw on top of NetworkSimulator UI (not to be conflated with RNSM).

so one of the original bug tickets is that the RNSM window was drawing behind the loading screen. If I put the sort order of the other UI elements in front of the RNSM then they will also draw in front of the loading screen or if the other way around the RNSM window will draw behind the loading screen again

Right. Actually, what you have here is correct:

RNSM (did not change sort order, cannot be changed I think?)
PopUpPanel (DisconnectionPopUp) = 1
Loading Screen = 0
SettingsPanel Canvas (Quit and settings plus buttons) = -1
Boss Room HUD (How to play popup and in game UI)= -2
Main Menu UI Canvas = -3
UI Root (PostGame UI Canvas) = -3

But, I think we may just need to sort out the NetworkSimulator UI (may need to be done per scene) so that it draws behind the SettingsPanel Canvas. Would that do it?

As for the text element, perhaps we can send it to the front but just disable it from blocking input -- so disabling the Raycast Target toggle on the text element, under Extra Settings?

[Elfi0Kuhndorf]

@fernando-cortez I addressed your feedback and adjusted the order again :

PopUpPanel (DisconnectionPopUp) = 1
Loading Screen = 0
RNSM instructions = -1
SettingsPanel Canvas (Quit and settings plus buttons) = -1
NetworkSimulator Canvas = -2
CharacterSelectCanvas = -3
Boss Room HUD (How to play popup and in game UI)= -3
UI Root (PostGame UI Canvas) = -3
Main Menu UI Canvas = -4

I also changed the RNSM window size (as it was very small) through creating a Panel settings override for it and made a Prefab out of the UIRoot in the postgame scene to make it more coherent (as all other canvases are a prefab)

[fernando-cortez]

Oh sorry with my last comment I was referring to the in-game message feed. The ones inside CharSelect, BossRoom, and PostGame scenes that say "X player has joined/left the game!"

That should probably draw on top of NetworkSimulator window too, no? They're temporary messages anyways. Since they're canvases that are a part of each scene's main canvas, we can just override their sorting order.

[fernando-cortez]

Looks good to me now!
Thanks for cleaning up the PostGame scene along the way.

I'll let @jilfranco-unity take a look and give final approval.

[jilfranco-unity]

Oh nice! The changes look good to me yeah! 🚀

[Elfi0Kuhndorf]

Awesome thank you both! I will merge it now, (feels surreal right now haha was quite the journey xD)