Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

uGUI resize grid cells depending on screen resolution

Discussion in 'UGUI & TextMesh Pro' started by EvilWolf, Nov 5, 2014.

  1. EvilWolf

    EvilWolf

    Joined:
    Jan 19, 2014
    Posts:
    5
    Hey guys!

    I have a grid with a couple of cells. If I play my game on different resolutions and aspect ratios, the grid elements don't resize at all, so I get pretty weird UI. Is there any way to have a grid scale its cells automatically, for example so that they fit the parent transform?

    Thanks in advance.
     
    dappledore likes this.
  2. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    You can make everything in the canvas scale with screen resolution by adding a CanvasScaler component to the same GameObject the Canvas is on.

    If that doesn't work for you then I don't think there's a solution that doesn't require scripting. However, a script can be made fairly simply that sets the grid cell size based on the current screen width or height.
     
    algaib likes this.
  3. EvilWolf

    EvilWolf

    Joined:
    Jan 19, 2014
    Posts:
    5
    Thanks for the quick reply!

    I already use a canvas scaler on my root canvas. The grid container itself (i.e. the game object that has the GridLayoutGroup-component) scales fine, it doesn't resize its contents, however. What I'd like to achieve is that the cellsize, padding and spacing change in relation to the grid container's transform.

    I found a workaround for it, I simply set the cell size dependent on the transform's width and the amount of elements in the grid. It's not great, but does the job for now. I still think there should be an option to enable a grid and its contents to scale with the canvas.
     
  4. will_brett

    will_brett

    Joined:
    Feb 16, 2013
    Posts:
    208
    Im also having trouble with this. Surely this should be an out of the box feature?
     
  5. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    Maybe I should have clarified that the Canvas Scaler should be set to "Scale With Screen Size" in order for everything to scale with the screen resolution. When that is done, the grid cells and spacing and everything should scale with the screen size out of the box.
     
    algaib likes this.
  6. Barkers-Crest

    Barkers-Crest

    Joined:
    Jun 19, 2013
    Posts:
    159
    I was having this same problem as well when adding children to a parent GridLayoutGroup with the following code.

    Code (CSharp):
    1. var display = Instantiate(PlayerDisplayTemplate) as GameObject;
    2.  
    3. display.transform.SetParent(LobbyPlayers);
    I did in fact have a Canvas Scaler set to "Scale With Screen Size but the items added by script were not scaling properly. It turns out when using the SetParent call above the localScale for the child GameObject was getting changed from 1.0,1.0,1.0 to something else. Switching to the code below to pass false as a second parameter into SetParent fixed the issue.

    Code (CSharp):
    1. var display = Instantiate(PlayerDisplayTemplate) as GameObject;
    2.  
    3. display.transform.SetParent(LobbyPlayers, false);
     
  7. vanshika1012

    vanshika1012

    Joined:
    Sep 18, 2014
    Posts:
    48
    Any work around for this. Apart from manually setting cell size for each resolution?
     
  8. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    What do you mean? In what way does the mentioned solution of using a CanvasScaler with "Scale With Screen Size" set not address the issue?