Keep aspect ratio and fill screen

Unity Engine
1

I don’t know if i’m at the right place, but here’s what i’m trying to achieve :

I have an image, which is just a plain menu background. I want this image to fill the whole screen, but keep it’s aspect ratio.
I don’t mind if the image is truncated in one of the axis. that’s actually what I want it to do.

Problem is, I have no idea how to achieve this with the new UI.

Here’s my actual set-up :

  • Canvas -
    set to Screen Space - Overlay (With pixel perfect enabled)

  • Image -
    Anchors set to corners of the canvas - (0,0) and (1,1) (Or the stretch both axis preset)
    left, top, right and bottom set to 0
    Scale is 1, 1, 1.
    Image Type Simple
    Preserve Aspect is true.

when I go to a resolution that doesn’t fit my aspect ratio, The image keeps its ratio, but doesn’t cover the whole screen… Does the new UI contains something that allows this ?

2

I don’t think there is anything doing that automatically, and I’m not sure if there should be. It’s easily fixed in code though.

When the resolution changes, find the difference in width and height from the image to the screen resolution. Figure out how much you need to multiply either direction so it covers all of the screen. Pixel perfect should correct fractions, but you might want to round to whole numbers anyway.

3

I created a AssetStore extension that allows for easier aspect switching called AspectSwitcher. It provides a system for allowing you to easily specify different properties for different aspects. There are generally two method that most people use to switch aspects. One is to provide different game objects for each aspect. The other is to create custom code that modifies the properties of a single game object based on the current aspect. That generally requires a lot of custom coding. My extension attempts to alleviate a lot of that pain.

4

It’s built-in from beta 19 onwards:
http://docs.unity3d.com/460/Documentation/Manual/script-AspectRatioFitter.html

6 Likes
5

Hey,
do you know how to use AspectRatioFilter to achieve goal from original question?

6

AspectRatioFitter on a panel and your image as a child of the panel - stretched, I think.
Then set the panel’s AspectRatioFitter to fit in parent with the desired value.
Try that.

For future reference, just a simple question like that might have been better in a new thread, since this post is 2.5 years old originally :slight_smile:

1 Like