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

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.

• Would you accept a solution that has black space either horizontally or vertically to keep the same aspect ratio? – TomTsagk Sep 28 '18 at 11:53
• @TomTsagk - If I really can't find another solution I definitely would at least know how to do that as an option perhaps when we're still developing an app for a client and send to them to test on their phones/devices. – Indy-Jones Sep 28 '18 at 20:56
• Thank you Indy-Jones, this latest update is a big improvement. The wireframe examples you showed are a great starting point to a solution. If these wireframes are in 16:9, try making new versions in the iPhone X's 812:375 aspect ratio. As you do, pay attention to how you move various elements - do you try to keep a fixed-size border from the edge of the screen, or spread them out proportionally? Do you keep their sizes the same fraction of the screen's height, or of its width? This will let you identify the particular scaling rules you need to implement in your runtime UI. – DMGregory Oct 1 '18 at 14:21

• 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.