imageunity-game-enginerawimage

Preserve Aspect, but with crop center


I have a GameObject with RawImage component displaying an Image using Texture.

The image is squeezed to the size of the object and changing it's original ratio.

How can I tell the image in the texture to CropCenter? (like in Android for example)

enter image description here


Solution

  • Here is how I do with landscape images :

    1. Create a parent RawImage element called "Mask" (works with UI > Image component too)
    2. Add the UI > Mask component to it
    3. Put your Smurf image (with the `RawImage component) as a child of the "Mask" object
    4. Set the values of the child'RectTransform :
      • Anchors Min = (0.5, 0),
      • Anchors Max = (0.5, 1)
      • Top = 0
      • Bottom = 0
    5. Add the Layout > Aspect Ratio Fitter to the Smurf image and set the Aspect Mode to "Height Controls Width" and the Aspect Ratio to the desired value (16/9 for example)

    Check the image : Parent called "Mask" and your smurf image called "Image"

    enter image description here

    For portrait images, the RectTransform values :

    The Aspect Mode of the child must be set to "Width Controls Heigh"