How can I make that the ui elements in the main menu will fit every selected resolution?

Question

The main menu is built with one main Canvas and a GameObject that I show over the Canvas and have a Camera. The GameObject also have his own Canvas for a text.

The default resolution is 1920x1080 so I set it manual the ui elements to fit this resolution.

This screenshot is of the first Canvas settings and the Main Menu hierarchy build :

The reason that I needed another Canvas and the Camera is that this is the only way I could display the GameObject(NAVI) over the first Canvas with the GameObject animations and the text ui.

Both Canvas settings are the same.

Now I changed in the editor before even running the game to another resolution 1024x768. And now all the ui are messed. It happens the same when running the game through a built exe file on full or windowed screen :

And I have many resolutions each one with some different frame rates so it will be a bit hard and will take time to set each resolution by manual like I did for the default 1920x1080.

This is the script I'm using for changing the resolutions from a dropdown. The script is attached to the first main Canvas under the Main Menu :

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Audio;
using UnityEngine.UI;

public class SettingsMenu : MonoBehaviour
{
    public AudioMixer audioMixer;
    public Text volumeInPercentages;
    public Dropdown resolutionDropDown;

    [SerializeField]
    private Slider _volumeSlider;
    [SerializeField]
    private Dropdown _dropDownQuality;

    private Resolution[] resolutions;

    private void Start()
    {
        resolutions = Screen.resolutions;
        resolutionDropDown.ClearOptions();

        List<string> options = new List<string>();

        int currentResolutionIndex = 0;
        for (int i = 0; i < resolutions.Length; i++)
        {
            string option = resolutions[i].width + " x " + resolutions[i].height
                 + " " + resolutions[i].refreshRate.ToString() + " Hz";
            options.Add(option);

            if (resolutions[i].width == Screen.currentResolution.width &&
                resolutions[i].height == Screen.currentResolution.height)
            {
                currentResolutionIndex = i;
            }
        }

        resolutionDropDown.AddOptions(options);
        resolutionDropDown.value = currentResolutionIndex;
        resolutionDropDown.RefreshShownValue();
    }

    public void SetVolume()
    {
        float volume = _volumeSlider.value;
        Debug.Log("Volume " + volume);
        audioMixer.SetFloat("MusicVol", Mathf.Log10(volume) * 20);
        volumeInPercentages.text = Mathf.Round(volume * 100).ToString() + " %";
    }

    public void SetQuality()
    {
        int qualityIndex = _dropDownQuality.value;
        QualitySettings.SetQualityLevel(qualityIndex);
    }

    public void SetFullScreen()
    {
        Screen.fullScreen = !Screen.fullScreen;
    }

    public void SetResolution()
    {
        Resolution resolution = resolutions[resolutionDropDown.value];
        Screen.SetResolution(resolution.width, resolution.height, Screen.fullScreen);
    }
}

Answer 1

In your case, you're setting the Canvas Scaler to scale with screen size by matching the height, so they'll always fit in the vertical axis. That's an important point.

Take a look in the Rect Transforms of your elements and anchor them in the correct point of the screen.

Probably all your elements are anchored in the center of the screen, causing them to go out of the game scene.

Here are some more detailed information about RectTransforms, Pivot, Anchors...