Multiplayer Layout Initial Idea

Creating the initial layout for my planned multiplayer screen wasn't too difficult. I took CS:GO map selection screen and added a bit of Valorant to it with the lobby at the bottom, as well as added my own game mode properties, which also change which maps are displayed and which maps can be checked.

The problem with the way I've created this layout currently though, is that I've used a grid that resizes with the window, which then makes the map buttons resize, causing them to look like that on a 4:3 monitor, but then grow wider on a 16:9 monitor. This wouldn't be much of a problem if images weren't involved, but I'm going to have images of each map on the buttons to show a visual representation of them to the user instead of just the same, so stretching the images on 16:9, or vice versa would be quite jarring and annoying. So using a system that keeps their sizes as well as lets them be used in a scroll box with those predefined sizes is a must. A size box will allow me to do this, and so after a bit of tweaking, I came up with this:

I achieved this by using the aforementioned size box for each map button, but then using a wrap box to make the buttons move to the next line when they no longer fit on the screen. It's more or less the same as wrapping text in a text box. All this is in a scroll box, so if the maps wrap enough to three lines, then the user can scroll to reach them, ensuring a smooth and intuitive interface.

Hierarchy:

- Widget Switcher (Switches between maps for 2v2 and 5v5 modes)

- Scroll Box (to scroll when the Wrap Box exceeds three lines)

- Wrap Box (to wrap the buttons like a text box)

- Size Box (to set exact sizes for the buttons so they cannot stretch)

- Button (the actual button)

- Text (the name of the map, will also include image, etc.)