Scaling background with perfect ratio ?

Questions & Answers
1

Hey everyone ! I’m trying to reproduce a game UI but I’m stuck with a little problem actually.

The original game UI has a sprite image of 1366x768, the center is 1024x768 and the sides are 171x768. If the resolution is equals or under 1024x768, only the center is visible (stretched if the resolution is lower), and if the resolution is over 1024x768, the sides are visible as well, and both the 3 images are resized in a perfect ratio so it doesn’t look deformed at all.

Example under resolution 1920x1080, center: 1436x1080 sides: 242x1080.

However when i try to do it with Unity I can’t do it like the game, I tried a lot of possibilities, layouts and so on, but it will always result in something that won’t work on a resolution.

My canvas settings are “Screen Space - Camera”, with Canvas Scaler on “Scale with Screen Size”, reference resolution is 1024x768 and the Match is 1

Has anyone an answer to the problem ? Thanks.

2

I don’t think you can do this with layouts only. You have to tweak with the layout from code.

    private int screenX;
    private int screenY;

    void Awake()
    {
        TweakLayout();
    }

    void Update()
    {
        if (screenX != Screen.width || screenY != Screen.height)
        {
            screenX = Screen.width;
            screenY = Screen.height;

            TweakLayout();
        }
    }

    void TweakLayout()
    {
        float currentRatio = (float)screenX / screenY;
        if (currentRatio <= 1.555f)
        {
            // tweak UI
        }
        else
        {
            // tweak UI
        }
    }