Почему UI Panel по разному отображается на устройстве и в Editor?

Question

[Ivan Pavlov]

Canvas настроен на определенный размер экрана 800х600 и заполняет ширину, если соотношение сторон другое. Однако, в редакторе кнопки выбора уровня отображаются так:


А на устройстве вот так:


Кнопка - обычный Panel с вложенными Panel, Text и Image. Кнопки кладутся в GridLayoutGroup, который настроен на размер ячейки 100х100 и space'ом в 6 единиц. Пробовал увеличивать размер ячейки динамически (рассчитывать кодом), в результате чего ячейки все равно были далеко друг от друга и вылезали вправо за экран. С чем может быть связано такое поведение? Как в Editor увидеть UI как на устройстве?

Comments

[Роман]

пока не будет кода, который все это рисует на ваш вопрос смогут ответить только на https://мир-гадалок.рф

[Ivan Pavlov]

Роман, в коде ничего необычного нет - инстанциация, инициализация и присвоение родителя:

void FillButtons() 
	{
		gameObject.AddComponent<DatabaseHelper>();

		DatabaseHelper database = GetComponent<DatabaseHelper>();
		int levelPackIndex = 0;
		List<DatabaseHelper.Level> levels = database.GetLevels(levelPackIndex);
		int unlockedCount = UnlockedCount(levelPackIndex, levels.Count);

		foreach (DatabaseHelper.Level level in levels)
		{
			GameObject newButton = Instantiate(button) as GameObject;
			LevelButton levelButton = newButton.GetComponent<LevelButton>();
			int levelIndex = levels.IndexOf(level);
            bool isInteractable = levelIndex < unlockedCount;

            levelButton.LevelText.text = (levelIndex + 1).ToString();
			levelButton.levelPack = levelPackIndex;
			levelButton.level = levelIndex;
			levelButton.hasBoss = level.hasBoss;
			levelButton.hasHelicopter = level.hasHelicopter;
			levelButton.GetComponent<UnityEngine.UI.Button>().interactable = isInteractable;

            if (isInteractable)
                levelButton.GetComponent<UnityEngine.UI.Button>().onClick.AddListener(soundDirector.ButtonClick);

            newButton.transform.SetParent(Spacer);
		}
        
	}

[GavriKos]

Есть подозрение, что у элементов слетел скейл. Попробуйте кнопкам сделать кодом единичный скейл.

[freeExec]

Как в Editor увидеть UI как на устройстве?

Задать в редакторе разрешение как на устройстве.

[Ivan Pavlov]

GavriKos, Да, действительно, дело было в скейле. Непонятно зачем GridLayoutGroup меняет его

Answer 1

[Андрей Боронников]

У компонента Canvas Scaler есть параметр UI Scale Mode. Поставь Reference Resolution таким же, как у тебя в редакторе по умолчанию. То есть этот компонент говорить Canvas как правильно масштабировать.