Wacky, Zany, and Kooky Technique for Handling UI Scaling


A lingering issue on the project for weeks now has been UI that is not  setup to scale properly with resolutions outside of 16x9. The most notorious issue we have had as a team is figuring out how to handle the bestiary scaling. The bestiary was setup in 16x9 to move an exact distance when travelling between different pages. Each page would fill the entire screen during this process. With other resolutions, the bestiary showed too much information and moved too little of a distance. Our first attempt at scaling the bestiary resulted in visuals that scaled, but page flip distances that varied and broke the mechanic.

As I was finishing up some of the other simpler UI areas that required scaling, I had an idea. If, for example, each bestiary page needed to move 1,000 units at 5,000 u/s at x1 transform scale for 16x9 then I figured I could use these numbers to figure out an equation to keep all these variables constant with the resolution of the user. If a user had a 16x9 resolution monitor, then we know 1,000 units * x = monitor resolution width (2,000 for example). With this information we can abstract that x = 2. This x now becomes the modifier for the movement distance for all widths. The resolution width simply needs to be divided by 2 to determine what the movement distance required is when enabling the bestiary. This math applies to the two other areas mentioned (movement speed and transform scale). Using all these combined, the user can switch between resolutions while everything looks to be the same size, move the same distance, and move at the same speed.