GUI/Gameobject sizing suggestion/help

So i am using the canvas scaler. it in fact appears that maybe the UI is being scaled as it should be, but because the background is NOT a UI object, it is throwing everything way off. The background is the “board” and it keeps the same size regardless. it works fine using the simulator as a google pixel 5 with 2340x1080

I wish for the board to reach the edges of the screen regardless the screen width, and for the “0”'s to be centered in the circles regardless screen width. How can i achieve this? I am here as a desperate measure because i had no luck with youtube/google/chat gpt/10+hrs reading/praying to god/attempting silly code that i knew wouldnt work to begin with.

For the background:

  • Set the rect transform of the image to stretch9594061--1359796--upload_2024-1-20_20-20-3.png
  • Set the canvas scaler to scale with screen size, match width or height at .5 (red areas are up to you) 9594061--1359799--upload_2024-1-20_20-22-35.png
  • Note: that’ll most likely mess with the aspect ratio of the image; using a “Tiled” image type will be better

For the 0’s:

  • Stretch the rect transform on all axis.
  • Either use a constant font size or put a “content size fitter” with horizontal and vertical fit set to “preferred size” 9594061--1359805--upload_2024-1-20_20-30-8.png
  • Create a parent of the 0’s. The parent should have a horizontal layout group, set its rect transform to stretch horizontally9594061--1359802--upload_2024-1-20_20-26-42.png(you could also stretch all around but it is up to you). Play around with “Child force expand” and “Control child size” options. You can play around with the padding to add spaces to the sides

PS: You’ll probably also need to pivot and position(ctrl + alt) the rect transforms when stretching
PS2: write your UI questions in the UI forums next time please
PS3: there really is a lot of examples for this, testing small things(like the centering of the 0’s) separately and combining everything helps

he said his bg isnt a ui image so he cant use rect transform

1 Like

Oh I missed that, thanks

In that case you’ll have to scale X&Y of the board according to aspect ratio. As long as the orthographic scale of the camera doesn’t change, you’ll be fine.

If possible you’ll use a 1x1 board and just scale up the X & Y directly. For example at 9:16 aspect ratio, X will be multiple of 9, Y will be a multiple of 16.
If this isn’t possible, you’ll have to take the default scale & aspect ratio into account
You could also just scale the board to be very large, that way it’ll physically fit into the camera bounds in all cases.

Important note: the gameobject will scale from its pivot point. Either set its pivot to dead center or offset the gameobject.

1 Like