Impossible to design full screen GUI for all aspect ratios?

So I know this topic of scaling GUI for all aspect ratios and resolutions has been beaten to death on these forums. And I have already read a ton of posts.

But this question isn’t so much about how to do the programming to set this stuff up right. I think I’ve got a fairly solid grasp on that already.

This question is about the basic design considerations one should take when setting up their GUI which is intended to look great for any aspect ratios or resolutions.

This is my first serious project and I feel like I made some serious mistakes with my Main Menu GUI design. Attaching a screenshot of how it’s supposed to look in the 16:9 aspect ratio with the standard 1280x720 resolution:

alt text

As I designed this my thought process was that everything should fit perfectly so I can just simply divide up the available screen space and I’ll be good to go.

As you can see, everything is matched up perfectly and fills the whole screen with multiple components lined up.

This is what I mean by my question is it “Impossible to design full screen GUI for all aspect ratios?”

It does seem mathematically impossible for me to convert this specific design to maintain the correct aspect ratios, things just won’t fit. I either have to choose to have the correct width, or the correct height for the GUI components. So the proportions will always be wrong, in my case vertically things get stretched out of proportion.

The problem is kinda like choosing between widescreen and full screen when you are watching a movie. You can sacrifice screen height vertically to see the full picture horizontally, or you can fill the screen vertically but you cut off the edges horizontally. I guess for movies that’s no big deal but for my game obviously I can’t just cut stuff out of the screen display.

Here is what it looks like with a 4:3 aspect ratio with resolution of 1024x768:

alt text

As you can see the square armor icons are no longer square they are some strange looking rectangle now. I do not have this problem with the rendered world this is isolated to just the GUI. I also can do any resolutions for 16:9 correctly, the problem seems to be isolated to my design with aspect ratios?

I just can’t see how it’s possible to make this work for all aspect ratios and I am considering the possibility to completely redesign all this stuff.

I wish I would have taken the time to figure out all this stuff to begin with I’ve spent so much time on this. But I’m new to programming so at the time even just getting it to look right at 16:9 seemed great, I never anticipated how bad my design would be for other aspect ratios.

So I’m just looking for advice how can you design GUI that is like “full screen” without it actually being full screen. I want to be able to maintain the correct aspect ratios and have it look good for all of them.

It seems really tricky like you need to give yourself a lot of excess or “padding” space? Kind of like empty spots between the components? So would you sorta have a container for the different sections which the aspect ratio can change but the interior parts will have enough room inside, just the amount of container space used will vary?

Another option could be to design custom GUI textures for each aspect ratio but that doesn’t seem like a good solution to me either.

I’m kinda thinking it’s a good idea just to avoid full screen stuff in general, but for phone games I don’t really see a way to maximize the experience without the full screen display style.

All my GUI displays are done within OnGUI() using a matrix. I know how to change the variables so that the aspect ratios will be correct but then the sizes change and it won’t properly fit the full screen for something like my screenshot examples.

I’m also wondering if doing the original design in 16:9 was a mistake since that ratio is 1.77 which makes it even more awkward converting to 4:3 a ratio of 1.33. Is there any common standard for what resolution or aspect ratio you should begin your GUI drafts with?

So I’m just really desperate for advice or links to any good books or websites that teach this stuff. It seems like I know how to do the programming but I am clueless about what’s the proper way to go about the design for this kind of stuff? I feel like my design is a complete failure, and I very likely will have to redo everything.

I have barely any official programming training I took like programming 101 in college but by the time I started up Unity several years later I couldn’t remember one single thing and had to start all over. So I’m just really lacking in the kind of knowledge I need to design a good GUI.

Any help, advice, or links/resources would be greatly appreciated. I really feel like I have no idea how to design a good GUI after running into this huge problem.

In my opinion, it is possible to go, for example, two ways. For the first option - on how many I understood application becomes on PC therefore it is possible to make an assumption that by aspect ratio either 4:3, or 16:9 with small possible deviations. Then it is possible to write two almost identical functions corresponding to offered aspect ratio. And depending on the current ratio of the sides of the screen to display either for 4:3, or for 16:9. The second option is more difficult. If you want to save proportions of your GUI elements on the screen - the square always remains a square. That you need to lean in case of GUI creation on the central points of your elements, and to take the sizes, for example, as minimum of two scalable sizes for your screen, proceeding from originally given display resolution. I hope it to you will help.

Not sure how much it’ll help but I’ll show you how we did the UI for our latest mobile game (for iOS, Android and WP8). We use our own sprite system.

The UI was designed so that anything important is visible on the narrow screen (9:16) e.g. iPhone 5, and the wider screens have run-off.

Notice that in-game we snap the elements to the screen edges giving the player the best possible view.

The orthographic UI camera has a fixed half height of 1024 as we do everything at iPad Retina resolution, although the final atlas texture used will be half sized on most devices.