Unity-3d-5 Scale images for 16:9 to other resolutions

Question

So I created a snake game with a border created with 2d sprites. I have my game window set to 16:9, when in this resolution the images look fine. However, scaling to anything else begins to make the game look weird. I want the game window to be re-sizable. How can I make my sprites stretch and shrink based on the current resolution?

• I have already tried creating a sprite that is 120 in Width and 1 in Height, then using the x,y,z scales to change the scale to 16. This produced a huge sprite.
• I am experimenting with using a canvas scaler, but with no success.
• My end goal isn't to have my game fit pre-defined resolutions like 16:9, but to scale according to the current window size. So that if they make the window extremely thin, the game will only make the top and bottom borders extremely thin, while still confing the game play into the borders.

Below I post the screenshots of how my sprites are setup. And how they are placed into the hierarchy.

• Border sprite - this sprite's width is now 70 pixels, because this is how it was given to me.

• Border in hierarchy, position, scale, and rotation are defaults. Then for example the BorderTop is moved 25 on the y axis to move it to the top of the screen.

• Camera setup

Example resolutions and current output

• 16:9
• 5:4

Answer 1

Add a simple script to every border:

public class Border : MonoBehaviour {

    enum BorderTypes
    {
        bottom, top, left, right
    }

    [SerializeField] float borderOffset = 0.1f;
    [SerializeField] BorderTypes type = BorderTypes.top;

    // Use this for initialization
    void Start () {
        switch (type)
        {
            case BorderTypes.bottom:
                transform.position = Camera.main.ViewportToWorldPoint(new Vector3(0.5f, borderOffset, 10));
                break;
            case BorderTypes.top:
                transform.position = Camera.main.ViewportToWorldPoint(new Vector3(0.5f, 1 - borderOffset, 10));
                break;
            case BorderTypes.left:
                transform.position = Camera.main.ViewportToWorldPoint(new Vector3(borderOffset, 0.5f, 10));
                break;
            case BorderTypes.right:
                transform.position = Camera.main.ViewportToWorldPoint(new Vector3(1 - borderOffset, 0.5f, 10));
                break;
            default:
                break;
        }
    }
}

Answer 2

You can use a simple way:

• First, create a Canvas

• in Canvas component in Inspector, set Render Mode to Screen Space - Camera and drag your main camera to Render Camera field.

  

• Then, in Canvas Scaler component in Inspector window, set UI Scale Mode to Scale Width Screen Size and other settings like this image

  

• Now drag your game objects to Canvas.

  

Answer 3

First, you should not change your sprites. You problem is a game viewport. You simply cannot have 16:9 fixed aspect ratio on every device in "full-screen". You have 2 options here:

1. Don't care about aspect ratio and adapt your gameplay, make your canvas scalermode to "scale with screen size" and reference resolution something like 1920x1080 or 1600:900 or 800:450. Your game logic must take into account that you may have different size of screens. You can experiment in editor by switching different aspect ratios in game view.
2. Maintain 16:9 and therefore calculate for where to add "bars" (sides or top and down), when the game is initialized.