How do you calculate a sprite's localScale to resize the sprite to a defined height?

Question

I'd like to uniformly scale a Sprite in Unity, so that its height on the screen matches the height of a button on a canvas. The scene setup looks like:

• Canvas with a CanvasScaler and a reference resolution of 800x1280 pixels.
• A button on the canvas with a height of 90 pixels.
• A sprite with a texture size of 250x250 pixels.
• The sprite's pixels per unit setting is set 100.
• An orthographic camera with a size of 5.
• The transform.scale values of all involved components are (1,1,1).

Now the question is, how do you calculate the sprite's localScale value so that it appears with the same height (90 pixels) as the button? What's the math behind it?

Answer 1

Here's a script that performs the matching, with each step of the math called out:

using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(SpriteRenderer))]
public class SpriteScaler : MonoBehaviour {

    public CanvasScaler matchCanvas;
    public float pixelHeightOnCanvas = 90f;
    SpriteRenderer _sprite;

    private void Start() {
        _sprite = GetComponent<SpriteRenderer>();
    }

    void Update () {
        // You might not need to call this every Update,
        // just when something changes size/configuration.
        UpdateScale();
    }    

    void UpdateScale() {
        // The canvas will try to scale its reference resolution
        // to match the screen's dimensions in either x or y.
        // (Assuming it's in Overlay mode or using a fullscreen camera
        // - if rendering to a smaller rect, use that pixel rect instead)
        Vector2 scaleFactorRange = new Vector2(
            Screen.width / matchCanvas.referenceResolution.x,
            Screen.height / matchCanvas.referenceResolution.y);

        // When the screen's aspect ratio isn't the same as the reference,
        // the canvas picks between two scale factors with matchWidthOrHeight
        float scaleFactor = Mathf.Lerp(
            scaleFactorRange.x,
            scaleFactorRange.y,
            matchCanvas.matchWidthOrHeight);

        // We can now compute how much it will scale our in-canvas
        // dimensions to produce on-screen pixel dimensions.
        float heightInScreenPixels = pixelHeightOnCanvas * scaleFactor;

        // For the next part, we need to know what camera we're
        // being rendered by - consider caching this if it's constant.
        Camera cam = Camera.main;

        // We'll convert the screen height into a fraction of the camera's
        // vertical span (which might be less than the screen's if rendering
        // to a smaller viewport rect).
        float heightAsViewFraction = heightInScreenPixels / cam.pixelRect.height;

        // Now we can convert that to a desired world height by multiplying
        // by the camera's vertical size - note that orthographicSize is
        // only half the height of the camera's view, hence the 2x.    
        float heightInWorldUnits = 2f * cam.orthographicSize * heightAsViewFraction;

        // Lastly, we need to know how big "this" sprite is at scale = 1.
        float nativeWorldHeight = _sprite.sprite.rect.height / _sprite.sprite.pixelsPerUnit;

        // And our scale factor is the multiplier that gets us from our
        // native world size to the desired world size.
        transform.localScale = Vector3.one * heightInWorldUnits / nativeWorldHeight;
    }
}

Because a "90px" button might actually appear smaller if its texture includes a border, in this example I dropped my pixelHeightOnCanvas value to 88.

Answer 2

I do not think you need any calculation.

Select the canvas and in the inspector you should match the pixels per unity unit.

The same in the texture inspector

2 test examples