Stretch a canvas from the bottom of the screen to a boundary defined by a GameObject?

Unity Answers is having trouble parsing the images for upload, please see here:
https://drive.google.com/drive/folders/1F3RGFK-PRJapoQyc8d94Xr74qQjYWWax?usp=sharing

I have a 9X12 grid object which fills the top of the screen. I achieve this not by scaling or moving the grid, but dynamically adjusting the camera’s orthographic height and position:

// 9x12 should fit comfortably on 9:16 screens
// width including borders
float screenRatio = Screen.width / (float)Screen.height;
// 9 1-unit tiles + borders
float H = 9.5f / (screenRatio);
_camera.orthographicSize = H/2f;

// center + half unit
Vector3 centerCell = grid.CellToWorld(new Vector3Int(4, 6, 0)); 
// shift camera down so grid is at top and empty space is at bottom
Vector3 cameraPos = new Vector3(
    centerCell.x + 0.5f,
    centerCell.y - (H - 12f) / 2f + 0.2f, // offset a little for the border
    _camera.transform.position.z
);

_camera.transform.position = cameraPos;

Below this I have a canvas (the white image in the pictures). I would like the canvas to scale vertically to occupy the portion of the screen not occupied by the grid. As you can see in the picture I currently have it stretching across the bottom with a fixed height, but I can’t figure out how to stretch it to the grid boundary. Any suggestions on how to achieve this, ideally without scripting? Thank you!

Hi! You can do this with vertical layout groups:

Assuming you want an image above and below, you can simply create a gameobject in your canvas that is the same size as your canvas, give it the VerticalLayoutGroup component, and if you give this gameobject 2 children with image components - one for the top and one for the bottom - they will always be evenly spaced.

To complete the illusion, you’ll need to change some values on the layout group, namely changing the child alignment to middle center, ticking the ‘control child size’ height checkbox and increasing the spacing variable until the desired result is achieved (number should reflect the size of your grid).

This method will work with all screen sizes/aspect ratios, assuming your goal is to have this 9x12 grid look undistorted and take up the same space (and assuming your canvas scales with screen size)

If you want more info about how to use layout groups and other canvas scaling related things, check out this video: Canvas Scaling in Unity - YouTube

It is also worth considering putting your grid into the canvas. If the UI scale mode on your canvas is scale with screen size (which it probably should be), you can just put it into the canvas, and it should do what you were trying to do with your script but with significantly less work. (assuming of course that your game would work in a canvas)

Hope this helps :smiley: