Scale driven by RectTransform

Unity Engine
1

744×1226 29.2 KB

So I have this game board filled with buttons and they’re essentially all at arbitrary positions (well they’re in a hex grid but I don’t want anything based on this fact). What I want to do is make them all the children of a parent RectTransform or “panel”. This panel needs to automatically resize to best fit into its parent, maintaining its aspect ratio. But most importantly it needs to scale all of its children together. Almost as though all the children of the panel made up a single image attached to the panel gameobject.

TL;DR I want the scaling of a regular old Transform but I want it driven by the size of a RectTransform.

Make sense?

Any ideas?

Thanks guys!

2

Simple math…

using UnityEngine;
using System.Collections;

public class SimpleScaleToFit : MonoBehaviour {
 
    public enum FitMode
    {
        Smallest,
        Largest
    }
 
    [SerializeField] private FitMode m_FitMode = FitMode.Smallest;
 
    [ContextMenu("Apply Scaling")]
    public void CalculateAndApplyScaling()
    {
        RectTransform parentRect = (this.transform.parent as RectTransform);
        RectTransform childRect = (this.transform as RectTransform);
     
        float XScalingFactor = parentRect.rect.width / childRect.rect.width;
        float YScalingFactor = parentRect.rect.height / childRect.rect.height;
        float scale = 1f;
     
        switch (this.m_FitMode)
        {
            case FitMode.Smallest:
                scale = (XScalingFactor > YScalingFactor) ? YScalingFactor : XScalingFactor;
                break;
            case FitMode.Largest:
                scale = (XScalingFactor < YScalingFactor) ? YScalingFactor : XScalingFactor;
                break;
        }
     
        childRect.localScale = new Vector3(scale, scale, 1f);
    }
}
3

Wow this looks amazing!! I can’t thank you enough! Can’t wait to play with this. I knew what I was trying to accomplish was some pretty basic math but which basic math to use and how to apply it was eluding me. THANK YOU!!!

Oh btw did you make a youtube video? Doesn’t seem to load. Maybe it’s processing.

EDIT: Oh nevermind there it goes. AWESOME WOW MAN THANK YOOOUUUUU

4

Hah ye, no problem.

5

Oh btw I tacked this on to the bottom to get it to change during runtime if like, someone changes the windows size or rotates their device and stuff:

void OnRectTransformDimensionsChange()
{
    CalculateAndApplyScaling();
}
6

Have you looked at the ReferenceResolution component? What you want to do shouldn’t require any custom scripting…

7

What does that have to do with anything ?

8

I’m trying right now to figure this out myself. ReferenceResolution was of course the very first thing I tried but it always creates extra margin around the board or allows it to go off the screen if I change the screen aspect ratio. I can’t find any way to rig it so it doesn’t. Here’s a video showing what I mean.

https://www.youtube.com/watch?v=Ze6vCYjxs4I

runevision: If there’s some light you can shed on ReferenceResolution it would be very much appreciated.

What do the new Expand and Shrink Canvas Scale Modes do, for instance? I tried them both but still couldn’t get the board to always fit.

9

Okay I think I have finally found how ReferenceResolution can be used to do what I wanted. The trick seemed to be to break the board out onto its own canvas with a ReferenceResolution that matches the size of the whole board when it’s the largest size it could be on my ReferenceResolution. In this case that happened to be 2048x2120. Then I set the Canvas Scale Mode to Expand and bingo, the behavior I wanted the whole time.

Still pretty mystified though. Probably need a copy of the source code to all these new UI components so I can actually see what the hell they’re doing lol.