Search Unity

Fix Buttons to Background Image

Discussion in 'UGUI & TextMesh Pro' started by UlfvonEschlauer, Mar 25, 2020.

  1. UlfvonEschlauer

    UlfvonEschlauer

    Joined:
    Dec 3, 2014
    Posts:
    127
    Hello!
    I have the following problem to solve.
    I have a UI. The UI consists of a Canvas, a Panel, a backdrop image and a few buttons.
    I want the backdrop image to scale nicely with the screen resolution while maintaining it's aspect ratio. It is OK, if there is some empty space to the left, to the right and to the top and bottom, depending on the screen resolution/aspect ratio.I will fill that in with another background image later.
    Now, I was reading up on this and I was able to make my background image scale nicely by applying an Aspect Ratio Fitter to it. So that works nicely. Now the problem is my buttons.
    Imagine the background image representing a map and the buttons representing locations on the map. Of course I want to ensure that my location- buttons "stick" to the part of the background image (the map), no matter how the map is getting scaled by the Aspect Ratio Fitter.
    This is where my problem comes in: Between Rect Transforms, Aspect Ratio Fitters and whatnot, I can for the life of me not figure out how to make the buttons "stick" to the background image map. They get scaled nicely with the canvas, but that makes them move all across the map, when the screen aspect ratio changes.
    Hope the explanation of the problem somehow makes sense.
    Thanks in advance for the help!
     
  2. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,096
    You need to move the anchors to the location you want them to have (relative position in relation to the parent. In this case the backdrop should be the parent). Make sure that the pixel positions are zero then.

    See my video about anchors for better understanding:
     
    UlfvonEschlauer likes this.
  3. UlfvonEschlauer

    UlfvonEschlauer

    Joined:
    Dec 3, 2014
    Posts:
    127
    Thanks! I will try that!

    Edit:
    Worked like a charm! Thanks so much for the help! I never knew about the anchor point thing!
     
    Last edited: Mar 26, 2020
  4. LeahHodges

    LeahHodges

    Joined:
    Dec 16, 2020
    Posts:
    2
    Thanks, it helped me too
     
  5. AnneColeman

    AnneColeman

    Joined:
    Jun 15, 2021
    Posts:
    1
    Could you please send a screenshot of your background? I think it might make the job easier. I usually handled it differently. I had a problem with scaling the header for my site. I did this. At first, I had to use the background remover to cut out part of the image. Then, I was able to fit the image into a block that would expand or shrink as the site zoomed in. When working with a cut-out image, it is much easier to do this because it is possible to completely preserve the image and not stretch it horizontally or vertically. All that changes is the size of the block in accordance with the scale.
     
    Last edited: Jun 22, 2021