The components of this dialogue box all move when the game is built but looks fine in play mode. I’m not sure what can cause this kind of thing. Everything moves central. “Stern Woman”, “press f to continue…”, and her portrait have all moved inwards, as well as the text taking up a different amount of space (which will be a problem when the text takes up almost the whole box). I have screenshots of the main canvas component, its child the CharacterDialoguebox, and its various children, including the character’s name and the character’s portrait. I thought since I put the canvas scaler to Scale With Screen Size, this wouldn’t be a problem. It works in Unity, both in minimized and maximized Game windows.
For Unity UGUI, here are the official docs on how to make your UI handle various resolutions and aspect ratios cleanly:
Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:
Usually you need to choose a suitable ScaleMode and MatchMode in the Canvas Scaler and stick with it 100%. Generally if you change those settings you will often need to redo your UI entirely.
Here’s some more fit-inside-UI-content notes:
I also use this CanvasScalerOrientationDriver utility to make sharing UI for Landscape / Portrait easier. Read what it does carefully.
For the in-scene 2D or 3D portions:
Generally cameras are tied height-wise to the .orthographicSize, or the .fieldOfView
You can test directly in the UnityEditor Game window by choosing custom aspect ratios and pixel ratios (look for a dropdown near the top left of the Game window), and you should do this for all anticipated major screen geometries, then test and fix your program until it works the way you want.
To tie it to the width, use ratios with the Screen.width and Screen.height, or alternately whatever pixel viewport you are rendering to. Remember those are integers so dividing them properly requires casting at least one of them to a float
It scales perfectly with screen size provided that the screen’s aspect ratio remains the same. You set 768/512 which means a 3:2 aspect (=1.5). The 16:9 aspect = 1.77777 and 4:3 = 1.33333.
So whenever the aspect ratio deviates from 3:2 is when you’ll get displacement, which will be the norm since 3:2 is rather uncommon I’d say. Change the Screen Match Mode to MatchWidthOrHeight and then - very importantly - make it rely on either width OR height, not both. That’s how you get the “easy way out”.
But this only works if it’s considered in the UI design. Meaning you could have a top and bottom UI that stays fixed on the top/bottom edges - top and bottom UI just move closer or further apart when the aspect changes.
It’s best you test this right in the game view: modify the game view’s aspect ratio or resolution (create your own if you have to) and then toggle through the various resolutions to see how your UI behaves. It’s best to have one (custom if necessary) resolution for each of the most “extreme” aspects. Ie if you want to support desktop be sure to verify against 32:9 and if you suspect very old computer users (or tablets) then also verify against 4:3 or 5:4.
If aspects vary too much, you may have to design two different platform or aspect dependent UIs.
Thanks for the help! I got it by changing it from stretching along the bottom to being center, and then tweaking a few things. I’ve been playing around in different aspect ratios now. Thanks for the help!
