Как сделать картинку (панель) на весь экран?

Question

[Евгений Иванов]

Есть картинка ("панель"). При активации объекта она должна растягиваться и занимать весь экран.



Код ниже устанавливает размер панели.
На разрешении 1920x1080 (вызываю в юнити метод ChangeResolution) панель растягивается на весь экран.
На разрешении 1152x864 (когда по бокам экрана черные полосы) - панель заполняет центральную часть экрана, оставляя по краям пустое пространство.

Отладка показывает, что передается верное разрешение для установки размера панели.

Как сделать картинку (панель) на весь экран?

public class DialogWindowController : MonoBehaviour
{
    private GameObject backgroundPanel;
    RectTransform backgroundPanelRectTransform;


    void OnEnable()
    {
        // Получаем ссылку на панель и устанавливаем её размер на весь экран.
        backgroundPanel = transform.Find("BackgroundPanel").gameObject;
        backgroundPanelRectTransform = GetComponent<RectTransform>();
        backgroundPanelRectTransform.sizeDelta = new Vector2(Screen.currentResolution.width, Screen.currentResolution.height);

        // Отладка. Разрешение совпадает с реальным. Всё верно.
        string str = Screen.currentResolution.width + "x" + Screen.currentResolution.height;
        Debug.Log(str);
        using (StreamWriter writer = new StreamWriter("test.txt"))
        {
            writer.WriteLine(str);
        }

Answer 1

[Мимокрокодил]

Тут есть несколько моментов.

1. Перевожу на русский, что вы пытаетесь сделать:
Взять текущее разрешение экрана (не окна Game, а именно что экрана) - что значит, что у вас в консоли должно выводиться 1920x1080 даже при 1152x864. Если вам нужен размер именно окна Game, то его размеры такие:

int screenWidth = Screen.width;
int screenHeight = Screen.height;

2. Единственный сценарий зачем это всё может быть надо что пришёл мне в голову - вы хотите заблочить клики вне диалогового окна за счёт непрозрачного для нажатий фона, но так как фон находится в префабе, вам приходится мучаться с его растяжением на весь экран.
Если я вдруг не ошибся, то есть решение проще.

Решение:

Создаёте префаб изначально растянутый на весь экран. Внутри него создаёте пустой объект, который и будете включать и выключать, опять же, растянутый на весь экран. А внутри уже нужный вам фон (тоже растянутый) и панелька с текстом и кнопками.
Таким образом вам достаточно просто включать выключать пустышку, которая будет работать и с фоном и с панелькой. Вот пример:

3. Непрошенный совет. Это касается не столько функциональности, сколько архитектуры кода. Если вы хотите качественно улучшить скрипты, попробуйте по мере возможности сразу хардкодить ссылки, тем более что это части одного объекта.

Вот пример:

Было

public class DialogWindowController : MonoBehaviour {

	private GameObject backgroundPanel;
	RectTransform backgroundPanelRectTransform;

	void OnEnable() {
		// Получаем ссылку на панель и устанавливаем её размер на весь экран.
		backgroundPanel = transform.Find("BackgroundPanel").gameObject;
		backgroundPanelRectTransform = GetComponent<RectTransform>();
		backgroundPanelRectTransform.sizeDelta = new Vector2(Screen.currentResolution.width, Screen.currentResolution.height);

		// Отладка. Разрешение совпадает с реальным. Всё верно.
		string str = Screen.currentResolution.width + "x" + Screen.currentResolution.height;
		Debug.Log(str);
		using (StreamWriter writer = new StreamWriter("test.txt")) {
			writer.WriteLine(str);
		}
	}
}

Стало:

public class DialogWindowController : MonoBehaviour {

	[SerializeField] private RectTransform _background;

	void OnEnable() {
		_background.sizeDelta = new Vector2(Screen.currentResolution.width, Screen.currentResolution.height);

		// Отладка. Разрешение совпадает с реальным. Всё верно.
		string str = Screen.currentResolution.width + "x" + Screen.currentResolution.height;
		Debug.Log(str);
		using (StreamWriter writer = new StreamWriter("test.txt")) {
			writer.WriteLine(str);
		}
	}
}

Comments

[Евгений Иванов]

Спасибо за ответ.
Вопрос, вроде простой - но всё таки решения я не нашел. Мучал чат gpt - тоже пока нет результатов (

1) К сожалению ваш код int screenWidth = Screen.width; никак не повлиял на результат. Всё так же -

На разрешении 1920x1080 (вызываю в юнити метод ChangeResolution) панель растягивается на весь экран.
На разрешении 1152x864 (когда по бокам экрана черные полосы) - панель заполняет центральную часть экрана, оставляя по краям пустое пространство.

что странно - на большем разрешении панель на весь экран - на меньшем нет.

2) Вы правы - я хочу заблокировать клики. Не понял смысл вашей идеи.
У меня есть префаб DialogYesNoWindow - "пустышка". Внутри его само окно и панель.
Включаю пустышку - появляется окно и панель.

Возможно, мне не надо программно растягивать панель. Посмотрите на картинку.

Панель BackgroundPanel растянута (Strech), но её нет на экране. Её реальный размер 0 на 0.
Это странно. У неё нет параметров Width и Height. И как её растянуть?

3) Я правильно понял, что перетаскивая в редакторе панель, вы передаете в поле [SerializeField] private RectTransform _background; ссылку на компонент типа RectTransform с данного объекта?
Разве так можно? Я думал, что в поле можно перетаскивать только объекты и получая ссылку искать на объекте компонент..

[Мимокрокодил]

Евгений Иванов,
Первое объясняется просто - дело не в конкретных размерах, а в соотношении экрана. У вас изначально стоит 1920:1080, что есть соотношение 16:9, а новое 1152:864 это соотношение 4:3 (ну или 12:9), поэтому у вас либо ширина либо высота в итоге не совпала бы в любом случае.

Второе, распишу по шагам, чтобы вам было удобнее.

1. Создайте объект-пустышку внутри канваса. На него киньте ваш скрипт. Теперь для вызова обращайтесь не к gameObject.SetActive(), а к скрипту.


2. Вот так примерно должен будет выглядеть скрипт. В данном примере это окно выхода

using UnityEngine;

public class YesNoDialog : MonoBehaviour {

	[SerializeField] private GameObject _panel;

	public void SetShown(bool isShown) {
		_panel.SetActive(isShown);
	}

	public void OnExit() {
		Application.Quit();
	}
}

Вызов будет выглядеть следующим образом:

public class ExampleScript : MonoBehaviour {

	[SerializeField] private YesNoDialog _yesNoDialog; // ссылка на окно

	private void SomeFunc1() {
		// много чего разного и в процессе нужно показать окно
		_yesNoDialog.SetShown(true);
	}
}

На кнопку назад и закрыть можно привязать в Button.OnClick событие YesNoDialog/SetShown/false.

3. Помещаем объект пустышку в дочерние, тоже растягиваем. Растяжение нужно чтобы размер экрана никак не влиял на геометрию видимой панельки.


4. Перетащите панель, чтобы потом скрипт мог с ней взаимодействовать.


5. Добавьте растянутый дочерний к панели объект с прозрачным Image. Именно он блокирует фоновые клики. Вы кстати на него можете повесить невидимую кнопку закрытия окна.


6. И добавляете саму панель с кнопками. Вот её растягивать уже не нужно.


Привязываете к кнопкам опять же не панель, а рут объект, на котором висит ваш скрипт. Когда вы освоитесь получше, вы сможете эту концепцию расширить, сделав так, что эта панель будет обслуживать все возможные события, когда нужно выбрать да/нет, путём подмены текста и событий при нажатии.

Третье, да. Скажу вам более, вы можете так передать заранее ссылки на что угодно в рамках контекста.

[Евгений Иванов]

2 У меня уже реализована подобная система. Практически как у вас.
Есть объект префаб - менеджер окон, с [SerializeField], в которые я помещаю префабы-окна.
Далее я обращаюсь к скрипту менеджера окон и вызываю окна, скрываю окна, переключаю окна и т.д.
Плавное появление завязано на DOTWEEN.

public class GameWindowsControllerScript : MonoBehaviour
{

    [SerializeField] public GameObject[] gameWindows; // Массив окон.

    private GameObject gameWindow;

    public void OpenGameWindow(GameObject gameWindow, float animationDuration = 0.3f, System.Action callback = null)
    {
        // Активируем объект.
        gameWindow.SetActive(true);

        // Устанавливаем начальное значение прозрачности объекта в 0.
        gameWindow.GetComponent<CanvasGroup>().alpha = 0;

        // Плавно показываем объект с использованием DOTween.
        gameWindow.GetComponent<CanvasGroup>().DOFade(1, animationDuration)

        .OnComplete(() => { callback?.Invoke(); }); // По окончанию вызываем колбек.
    }
}

// и т.д.

Кстати, кнопки на окнах тоже пришлось сделать "с нуля" с помощью DOTWEEN т.к. у стандартных кнопок нет плавного переключения нескольких картинок (либо резко переключаем картинки, либо плавно цвет, есть и анимация но не уверен, что там можно делать всё, что можно с дотвин).

В общем спасибо - разобрался. Настроил пустышку - растянул и настроил панель. Заработало как надо.