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

Question Resize Image in canvas with masking some part of the Image

Discussion in 'UGUI & TextMesh Pro' started by LoopIssuer, Mar 16, 2023.

  1. LoopIssuer

    LoopIssuer

    Joined:
    Jan 27, 2020
    Posts:
    109
    Hi
    I have Image in Canvas. When I click the button in runtime, on the right side I show another UI element (image, text, etc,). I want my Image to reposition, not squeeze, and make a place for a second UI element.
    please take a look at the screenshots:
    1. Base
    2. This is what I need
    3. Incorrect
    4. Incorrect

    Thanks in advance for your help.

    upload_2023-3-16_9-0-24.png
     
  2. Olipool

    Olipool

    Joined:
    Feb 8, 2015
    Posts:
    320
    Something to experiment with:
    1. Make a gameobject with horizontal layout group (child alignment: middle center)
    2. Add an empty gameobject as child and make the size of the rect transform half of the screen
    3. Duplicate the empty object from step 2.

    If you deactivate and activate the second child object you can see that the first one is centered on the screen or moves over so they are next to each other.
    Now put your image as a child of the empty gameobject from step 2 and the other UI element as a child of the second empty gameobject.

    Unbenannt.JPG
    Unbenannt.JPG
     
  3. LoopIssuer

    LoopIssuer

    Joined:
    Jan 27, 2020
    Posts:
    109
    Thanks, it's almost working for me.
    What to do if second empty gameobject need to be let say 1/3 of the screen, and first image (when second is not visible) need to be full size?
     
  4. LoopIssuer

    LoopIssuer

    Joined:
    Jan 27, 2020
    Posts:
    109
    And to be fully honest, this is what I really need:
    With UiElement hidden:
    upload_2023-3-18_19-33-6.png

    With UI element visible:
    upload_2023-3-18_19-35-35.png