Привет. Мы добавляли различные UI объекты, указывали различные размеры, но если вы пробовали запустить своё творчество на ПК и на телефоне с весомой разницей в расширениях, то могли ужаснуться. Масштабируемость там и рядом не лежала.
Например:
![](https://geekstand.top/wp-content/uploads/2021/06/1-6.png)
Но при этом:
![](https://geekstand.top/wp-content/uploads/2021/06/2-6.png)
Что же делать для того, чтобы ваш интерфейс смотрелся нормально на разных экранах?
В канвасе есть компонент Canvas Scaler, он и отвечает за масштабируемость UI:
![](https://geekstand.top/wp-content/uploads/2021/06/3-6.png)
И, скорее всего, у вас он тоже в режиме Constant Pixel Size. Это значит, что отрисовка будет происходить чётко по константам в пикселях, которые указаны. Откровенно, не лучший вариант и нам он не подходит. Что нормально на маленьком экране – будет очень маленьким на большом, а обратное можно увидеть выше.
Решение есть и оно достаточно простое:
![](https://geekstand.top/wp-content/uploads/2021/06/4-5.png)
Меняем UI Scale Mode на Scale With Screen Size. Как исходное разрешение указываем 1920×1080, которое будет оптимальным для разработки на ПК (да и на телефоне отобразилось всё прилично). А ещё параметр Match смещаем в сторону Height (Высота) для ландшафтных, и Width для портретных интерфейсов.
Теперь смотрим предыдущие примеры:
![](https://geekstand.top/wp-content/uploads/2021/06/5-5.png)
![](https://geekstand.top/wp-content/uploads/2021/06/6-4.png)
Простое решение серьезной проблемы с масштабом! Видео для наглядности можно увидеть тут (английский). На этом всё, спасибо за внимание!
Пингбэк: Уроки по Unity – GeekStand