How to allow a 2D game to work with all screen resolutions without only using Unity's Canvas Scaler

Question

I know there's plenty of questions out there already, however it seems as though there's always an update or change to either the Unity platform, the phone screen sizes, etc.

I'm struggling with trying to get my game to look the same on an iPhone 7+, iPhone 8 (normal) and iPhone X. I set the canvas to scale with screen size and resolution to 1920 x 1080, match width or height, and ref pixels to 100 as many other posts have recommended. However the stretching and pulling really makes the game look horrible.

It is a landscape only card game with a few buttons and up to 4 players whose avatars are represented on each corner if all are playing. So I need the background to stretch but I would prefer the card of the avatars to be almost their exact size in terms of ratios as if they were customized for the device. Think of Hearthstone just with 4 players in each corner.

I know games such as Blizzard's Hearthstone has a huge dev team and they're probably developing different views for each resolution, but there has to be a better or more updated solution for small indy teams like mine.

Is there something we need to do with anchors or our canvases to make all of this look better on all popular phone resolutions? Any help greatly appreciated.

Answer 1

I order to make a game work in different screen sizes here are some tips:

• Unity has variables Screen.width and Screen.height to get the game's final size. Use this to position objects (2D or UI) on the screen. You want a Sprite to be displayed on the top right corner? Then it has x = Screen.width -my_sprite.width and y = 0.

• When placing UI elements using Unity's Inspector, this becomes easier as you can configure the AnchorMin and AnchorMax variables, which go from 0 to 1, 0 being the left/top side and 1 being the right/bottom side.

• If you want an image to have a size influenced by the screen size (for example its height being half the size of the screen) then mark it as such. Such an image can have y = 0 and height = Screen.height/2. A UI element can have anchorMin.y = 0 and anchorMax.y = 1 instead. Keep in mind UI Sprites have a "Keep aspect ratio" tick box, in case you don't want to distort it.

• When it comes to 3D scene, things are kinda simpler, although it is possible to calculate where a camera can be placed so that the left edge and the right edge of a scene are visible (for example) most games just add a zoom-in zoom-out button, so that players can accommodate the game to their taste.