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

Make Canvas content proportional to canvas

Discussion in 'UGUI & TextMesh Pro' started by ricardoaffonso, Aug 9, 2018.

  1. ricardoaffonso

    ricardoaffonso

    Joined:
    Feb 21, 2018
    Posts:
    17
    I have been searching everywhere for this on the web and can't find anything.
    I know there are a bunch of solutions to make content fit the size of container, but what I want is for everything to stay with it's same width/height and position, just get bigger and smaller depending on the canvas size.

    It's a confusing question I know, but I will try to clarify as much as I can.

    They way I have it right now, (unfortunately I can't upload any pictures) there is a canvas with panels and buttons all over it, and a list of items that gets generated in a scroll rect. If I make the canvas bigger by dragging the side, the list items get more spaced out between themselves, the menus and buttons stay anchored to whatever their anchor is.

    But the problem is, if I am playing on a tablet for example, everything looks tiny compared to the size of the canvas. I need them to stay proportional, so if the canvas get's bigger, the entirety of its contents get scaled up so that in proportion, the screen is always gonna look the same.

    Does that make sense? Let me know if I can explain this better.

    I tried to solve this through code by making the scale of the menu items always be equal to the scale of the canvas, but that does nothing, because making the canvas bigger does not change its scale, just its dimensions.
     
  2. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,096
    The problem is that UGUI works with pixel sizes for most parts (except Anchors and Pivots). You can play around with the canvas Scaler but probably it will not do the job very good (at least I never found a solution to configure it in a satisfying way).
    So, I created an asset which solves this problems: Better UI
    It will help you to make pixel sizes (e.g. the spacing in a layout group or the dimension of the elements in a grid) scale with the resolution. You can even configure how it scales (like if it scales by the difference of height, width, dpi or a mixture of them) -- but usually you want to choose height (default for most) or width.

    Maybe you can achieve your goals also with a combination of horizontal and vertical layout groups and aspect ratio fitters in each element, but this would be a very complex setup.
     
    ricardoaffonso likes this.
  3. ricardoaffonso

    ricardoaffonso

    Joined:
    Feb 21, 2018
    Posts:
    17
    That asset does look pretty great to be honest, but I don't know if I can get the company to buy it.
    Thanks for the the reply tho that is exactly what I need, but free...
     
  4. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,096
    thanks.
    I see. But I have a similar problem from the opposite point of view: The company where I am working wouldn't allow me to work on this project if it where for free. It already has least priority for the company I am working at because it doesn't make as much money as other projects... However, it is my "baby", so I always try to push it forward anyways ;)

    EDIT: if you can be patient, wait for the next sale (not sure when... maybe I can ask if we start it ourselves)... then it will be a bit cheaper at least (probably 30% cheaper).
     
  5. ricardoaffonso

    ricardoaffonso

    Joined:
    Feb 21, 2018
    Posts:
    17
    I was wrong, they approved it! Thank you for helping, I'm gonna start using it now but it looks excellent!
     
    Hosnkobf likes this.
  6. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,096
    Nice :)
    Hope it will help you out on every problem you are facing.
    If not (or if you are not sure), please let me know.

    By the way: Most people find the "snap anchors" window the most useful feature... you shouldn't miss that ;)
     
  7. ricardoaffonso

    ricardoaffonso

    Joined:
    Feb 21, 2018
    Posts:
    17
    Do you have any tutorials or support documents to guide me through some of these?
     
  8. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,096
    I only have the videos in the asset store, the example scene in the project and the documentation online.
    I also already thought about some paper for some common use cases but didn't write them yet.

    However, in most cases it is enough to right click on the title of the component which should scale stuff and select "Make Better" from the menu (e.g. for your GridLayoutGroup). It then converts the component to the one of BetterUI and should already do the job.
     
    ricardoaffonso likes this.