"Best Practices" Question on UI Setups for Physically Different Sized Devices

[blitzer]

Hello everyone, I've got a "General Process Question" (which I don't expect a "complete answer" for) but perhaps just some guidance on my approach:

In the past, when dealing with mobile devices of different physical size (like a iPhone vs an iPad), I've made different UI setups that each had different sizes of UI elements to account for the physical size of the devices (so for example you wouldn't want a button size for an iPhone to maintain its scale on an iPad since the button would be huge since the iPad is just physically much larger).

This setup will work in the end, but when you need to make a change, you then get stuck making it over and over again for each UI setup. So I have been trying out a programmatic approach where I adjust the anchor size and widget size of the elements based on the device being used to adjust the size of each button (so when it ends up on the device, it is appropriately sized).

It also seems to work, but I'm worried about making a script / scripts that cover all my UI elements (some elements may need scaling, or not, or elements may need different scaling, etc...). So I'm wondering if anyone has either tried this type of approach before, or has something better.

Any thoughts are appreciated, thank you for reading.

[bkinsey]

I'm also wondering what a good solution is here. I just wrote my first game using Unity, and while the UI looks good on desktop monitors, on the phone it looks really small and the font is hard to read. A little odd since I set my UIRoot to use the Flexible method and not the Constrained or Constrained on Mobile options. I would think the same pixel dimensions used to draw everything would not look blurry regardless of resolution or dpi. Maybe the UI shaders somehow work really badly for windows phone, but the 3d part of the scene looks otherwise very nice.

Unless you want super large UI on your iPad (or otherwise low DPI devices) it seems like you'd need to have a low DPI UI and a high DPI UI.  My 60x60 pixel buttons are decently sized on my desktop and surface pro tablet, but on the phone its sometimes hard to press because its so small. I also think you'd want to use different fonts depending on the DPI. Wish I knew what more people were doing, I see a lot of great games on the phone with crisp UI, and mine looks tiny and slightly blurry. (Of course I have a medium size phone with a larger resolution, and I developed the game with a 480x800 resolution in mind, although on the desktop)

One thing to try is developing 1 UI for a mid resolution phone, say WXGA (1280 x 720). Then lower resolution phones would have a slightly larger UI and higher resolution phones would have a slightly smaller UI. And lower DPI desktop monitors would have a more larger UI. But only 1 UI to try and work across various DPIs and resolutions...

[ArenMook]

In Starlink I kept it simple and used Constrained on Mobiles option to keep the same size on mobile devices relative to screen size, while letting the UI get smaller on desktop devices. I had parts of the UI anchored to different parts of the screen -- top left, center, bottom left, etc. In my case I would only have "groups" rather than anchoring everything. For example a single widget (ALT SHIFT W) anchored to top left. Underneath it are children widgets, which aren't anchored -- however since the parent is anchored, they would effectively be as well.

Given that you have atlases that use power-of-two scaling, such as SD atlas with pixel size 1, HD atlas with 0.5, etc, and sprites are exactly double the dimensions, then swapping atlases won't involve changing your anchors or adjusting your UI. it will just work -- with a higher or lower density dictated by the pixel size.