Advice With Unity UI - Trying to get a panel to scale with the screen size

Hello, I was hoping somebody maybe be able to shed some light. I’m following a tutorial on adding a UI overlay.

A PNG will appear in the middle of the screen when active. This is solely so the player can look at the graphic and then dismiss it.

I have managed to get the image to align horizontally and vertically in the middle. However, I was wondering if there was a simple method for making that same image constrain to the screen size?

Do I need an additional package to achieve this?

I have come across the name of " UI Tool Kit " in another thread. Is this required to do what I wish to do visually?

Screenshot 2024-06-14 at 12.52.30

That depends if you want that PNG to keep it’s proprotions or not. If not you can just place anchors into the corners of the canvas and UI will try to keep that Image at the same “relative to proporitons” position distorting it. If not you can use that Canvas Scaler with anchors in canvas center (or even try out Aspect Ratio Fitter component). I personally dislike canvas scaler since it’s changing the scale (wow unexpected) but not the dimensions, so I made a silly small script which do the same job but chaning the actual dimentions (height, width) of the Image on screen so I can avoid some weird issues, like here> Rect Transform, adjusting size via width/height, or scale?. Tho for most basic cases Canvas Scaler is good enough.

Update: well, I realized that “If not you can just place anchors into the corners of the canvas and UI will try to keep that Image at the same “relative to proporitons” position distorting it” piece won’t work. To achive that result you want to put ahncors into the corners of the image, which is, for some reason, can’t be done preciesly or automatically at default Unity. The easiest way to do it probably would be to download that small script I personally use

And put it into the Editor folder into your project folder. It should make this window appear.
image

UI Tool Kit is probably a great toolkit but for doing that little job would be an overkill.

Answering to a comment “Does your script in essence extend the functionality of editing the GUI in the Unity Editor?”
Yes, essentially it’s just adding a shortcut for moving corners of the UI object to it’s anchors, and the other way around (which is pretty much impossible to do precisely in stock Unity)
I have just copypasted that piece from GitHub

using UnityEditor;
using UnityEngine;

public class uGUITools: MonoBehaviour {
  [MenuItem("uGUI/Anchors to Corners %Q")]
  static void AnchorsToCorners() {
    RectTransform t = Selection.activeTransform as RectTransform;
    RectTransform pt = Selection.activeTransform.parent as RectTransform;

    if (t == null || pt == null) return;

    Vector2 newAnchorsMin = new Vector2(t.anchorMin.x + t.offsetMin.x / pt.rect.width,
      t.anchorMin.y + t.offsetMin.y / pt.rect.height);
    Vector2 newAnchorsMax = new Vector2(t.anchorMax.x + t.offsetMax.x / pt.rect.width,
      t.anchorMax.y + t.offsetMax.y / pt.rect.height);

    t.anchorMin = newAnchorsMin;
    t.anchorMax = newAnchorsMax;
    t.offsetMin = t.offsetMax = new Vector2(0, 0);
  }

  [MenuItem("uGUI/Corners to Anchors %]")]
  static void CornersToAnchors() {
    RectTransform t = Selection.activeTransform as RectTransform;

    if (t == null) return;

    t.offsetMin = t.offsetMax = new Vector2(0, 0);
  }
}

and placed it into the “Editor” named folder into my project files

I would just insert a pics how the second one works (you should use it if you don’t want to keep ratios of the image but want to keep it occupying somewhat the same space on all resolutions)

Using Ctrl+Q at editor
image
Squishing scene view (works aswell while playing the scene/build)
image
image

If ratios of the resoultions are the same, like 1080 4k and 8k having same ratio of 16:9, that image would also be looking the same on all resolutions (occupying the same relative space I mean, might get more detailed with bigger resolution).

Hello, after some digging and re-reading:

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/script-CanvasScaler.html

After trial and error I have managed to get the image to scale correctly by using the following:

At least, it appears to react how I would expect when played play tested in the Unity Editor.On the Canvas Scaler component, for any readers out there:

Canvas Scaler
UI Scale Mode Scale With Screen
Reference Resolution 600 x 400
Screen Match Mode Expand

Screenshot 2024-06-22 at 12.49.37

I hope this helps others in similar situations.