Search Unity

Discussion GUI/Gameobject sizing suggestion/help

Discussion in 'UGUI & TextMesh Pro' started by AcidRain2012, Jan 20, 2024.

  1. AcidRain2012

    AcidRain2012

    Joined:
    Nov 21, 2015
    Posts:
    2
    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.
     

    Attached Files:

  2. venediklee

    venediklee

    Joined:
    Jul 24, 2017
    Posts:
    221
    For the background:
    • Set the rect transform of the image to stretch 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) 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" 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 horizontally 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
     
  3. sildeflask

    sildeflask

    Joined:
    Aug 16, 2023
    Posts:
    329
    he said his bg isnt a ui image so he cant use rect transform
     
    venediklee likes this.
  4. venediklee

    venediklee

    Joined:
    Jul 24, 2017
    Posts:
    221
    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.
     
    sildeflask likes this.