6
\$\begingroup\$

Now I know that no matter what the screen size is the camera will keep its height, so no worries about that. My question is, is there a way to manipulate the camera, either its orthographic size, or its viewport rect width, height, x or y so that the camera will fit perfectly on different screen resolutions. I know this a perfect solution for supporting different screens problem but how do other games do that? I mean I took some games from google play like bunny skater, or stick hero, those games look the same on Huawei P6 which has 1280x720 resoltuion, on Prestigio Multipad 4 which has 1024x768 and on HP Slate 7 which has 1024 x 600 resultion, now my question is how do they do that? I think the closest solution to this is to manipulate viewport rect of the camera, I'm saying this because I found a script that does so but it leaves black bars on top and bottom, the game looks the same on every device though but as I said it leaves black bars on top and bottom, so is there a solution on how to do this?

\$\endgroup\$
1
\$\begingroup\$

When making games, I typically support resolutions between 5:4 to 16:9. The best way I found to ensure maximum object coverage on the screen is to optimize for 3:2 and then adjust the camera's view along the axis that minimizes the amount of extra space. So if the game is in landscape mode and is being played on a 5:4 device, the width would remain static and the height would adjust, if it's being played on a 16:9 device, then the height would remain static and the width would adjust.

Here's a picture display of how it works in practice.

Overlap between resolution extremes with difference minimization

A 3:2 display will have the best experience, a device which is taller than 3:2 (going towards 5:4) will have some extra view at the top or bottom, a device which is wider than 3:2 (going towards 16:9) will have some extra view at the left and right edges.

The content of this view will however only contain an extra bit of background, it should not contain anything important or interesting.

Overlap between resolution extremes with static height - landscape

The issue with relying on Unity's "constant height" default behaviour is that the amount of overlap between the two extremes of common resolutions: 5:4 and 16:9 is huge. Meaning you can't position anything in the yellow area of the image above or the purple area of the image below, because it will simply not be shown on devices with the other (in images smaller) resolution. This also messes up things like the rule of thirds and makes scene composition essentially impossible.

Overlap between resolution extremes with static height - portrait

\$\endgroup\$
  • \$\begingroup\$ I am quite new to game design, but I like to just enforce 16:9. for example define the game at 480x280 resolution and just scale it to whatever screen its on and pillarbox any extra space. \$\endgroup\$ – lozzajp Sep 26 '16 at 9:34
  • \$\begingroup\$ Considering how little screen space a phone has to begin with, enforcing certain resolutions will waste a lot of space (see last image in answer above: the purple area will be wasted on a 5:4 device). It's essentially always worth doing adjustments for various screen resolutions on a released game. For prototypes and personal projects, simplifying this is fine, but if you plan on releasing your game, it's a good idea to spend the time and do this right. \$\endgroup\$ – Liam Lime Sep 27 '16 at 17:16
0
\$\begingroup\$

Usually for portrait games you need to set camera as fixed height , that is how it already works in Unity. And for landscape games like side scrollers you need to use fixed width. You need to write some additional code to achieve this functionality.

You can find the explanation in the following tutorial at 37 mins

Unite 2014 - 2D Best Practices In Unity

\$\endgroup\$
0
\$\begingroup\$

What you are asking, in the Web Design world is known as "responsive design". essentially the game positions elements relatively, instead of absolutely.

This means the positions are "skewed" with the viewport size. A good example of this might be to say:

column1_x = (Screen.width / 4) * 1;
column2_x = (Screen.width / 4) * 2;
column3_x = (Screen.width / 4) * 3;
column4_x = (Screen.width / 4) * 4;

This would give you screen column coordinates to work with. (HTML5 Web pages utilize typically a 12 column layout, but that is a bit excessive for a game)

the next question you have about manipulation of the camera, comes from unity's scripting API. You can find a range of functions and properties for the camera at: http://docs.unity3d.com/ScriptReference/Camera.html

\$\endgroup\$
  • 1
    \$\begingroup\$ The reason Bootstrap uses a 12 column layout isn't because any webpage is expected to ever actually have 12 columns, it's simply because of its divisibility - it's easily divisible by 1, 2, 3, 4, 6 and 12 meaning you can have any combination of columns of these widths which adds up to 12. An even better number would be 60 columns, which is also easily divisible by 5 and 10 (used in minutes and seconds for this reason). So dividing a mobile display into 12 or 60 'columns' makes sense - it just doesn't make sense to use a width of 1 of these columns for your UI elements. \$\endgroup\$ – Liam Lime May 4 '16 at 4:49

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.