0
\$\begingroup\$

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.

Layout of Battle Screens

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.

\$\endgroup\$
  • \$\begingroup\$ Would you accept a solution that has black space either horizontally or vertically to keep the same aspect ratio? \$\endgroup\$ – TomTsagk Sep 28 '18 at 11:53
  • \$\begingroup\$ @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. \$\endgroup\$ – Indy-Jones Sep 28 '18 at 20:56
  • \$\begingroup\$ 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. \$\endgroup\$ – DMGregory Oct 1 '18 at 14:21
1
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ These are some amazing tips. I'm going to read through them more carefully today and apply some of them to the project. I'll circle back around once I've tried them out. \$\endgroup\$ – Indy-Jones Oct 1 '18 at 13:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.