Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Dismiss Notice

Stretch canvas to fit device

Discussion in '2D' started by woodsmic, Oct 2, 2018.

  1. woodsmic

    woodsmic

    Joined:
    Jan 5, 2018
    Posts:
    12
    HI,

    I have a 2d game made for android devices. I want the canvas and everything on it to stretch to fill the screen of the device it is being used on.

    I know this will distort my layout, but that is what I am after doing.

    I have played for hours and hours trying every combination of setting I can think of. I cannot achieve the effect I need. In Xcode it was very easy, just disable auto layout, and it will fill the screen stretching the content to fill, ignoring aspect ratio's etc.

    I have attached "photoshopped" screen shots of what I want to do.

    I have tried canvas scaling, camera modes, anchors, stretching and scripts that attach to the camera that claim they do what I need. Nothing works :(

    Is this possible in unity?

    Thanks, Mike.
     

    Attached Files:

    • 1.png
      1.png
      File size:
      362.9 KB
      Views:
      1,046
    • 2.png
      2.png
      File size:
      278.4 KB
      Views:
      1,056
    • 3.png
      3.png
      File size:
      284.8 KB
      Views:
      1,034
  2. PGJ

    PGJ

    Joined:
    Jan 21, 2014
    Posts:
    897
    Use a World Space Canvas and add this script:

    Code (CSharp):
    1. using System.Collections;
    2. using System.Collections.Generic;
    3. using UnityEngine;
    4. using UnityEngine.UI;
    5.  
    6. public class ScaleCanvas : MonoBehaviour
    7. {
    8.     void Start()
    9.     {
    10.         RectTransform rt = GetComponent<RectTransform>();
    11.  
    12.         Vector3 screenSize = Camera.main.ViewportToWorldPoint(Vector3.up + Vector3.right);
    13.  
    14.         screenSize *= 02;
    15.  
    16.         float sizeY = screenSize.y / rt.rect.height;
    17.         float sizeX = screenSize.x / rt.rect.width;
    18.  
    19.         rt.localScale = new Vector3(sizeX, sizeY, 1);
    20.     }
    21. }
    22.  
     
  3. Perkki

    Perkki

    Joined:
    Sep 30, 2017
    Posts:
    15
    It is possible.

    Use Screen space render mode in canvas. Create panel or empty UI gameobject. Set it's min anchor value to 0,0 and max anchor value to 1,1. Set it's position, width and height to zero. Place other UI-elements as it's children and use their min and max anchor values to place them (relatively) with their position, width and height set to zero.
     
  4. woodsmic

    woodsmic

    Joined:
    Jan 5, 2018
    Posts:
    12
    Many thanks for the reply's guys! I will have a try later today :)
     
  5. woodsmic

    woodsmic

    Joined:
    Jan 5, 2018
    Posts:
    12
    This works brilliantly, thank you so much! I owe you several pints of beer!
     
  6. Szubaka

    Szubaka

    Joined:
    Nov 12, 2015
    Posts:
    2
    just a quick heads up that you need to reposition the canvas so that it appears in your camera