#1. Unity секреты: закруглённые нечёткие углы кнопок на основе спрайтов типа Sliced

Маленькие 3D подсказки, Уроки по Unity (C#) Добавить комментарий

сглаженные края кнопки в unity до и после

Если вы использовали спрайты с Image Type Sliced:

Image type Sliced в Unity

То, скорее всего, сталкивались с проблемой пикселизированных (нечётких или размытых) закруглённых углов, как на заглавном скриншоте из моего iOS приложения Pocket Money for Kids: Learn Math & Earn.

Sliced (порезанный) спрайт - это изображение, которое поделено на девять прямоугольных/квадратных областей (как в игре крестики-нолики): четыре угла, четыре стороны (между углами) и центральный прямоугольник. Затем Unity использует это деление на области, чтобы правильно растягивать такой спрайт. Если такой спрайт нужно растянуть, то четыре угла останутся нетронутыми - не деформированными и не растянутыми. А тянуться будут только четыре области между углами и центральная часть. Таким образом можно нарисовать красивую кнопку с завитушками по углах, которые не будут искажаться, если попытаться из квадратной кнопки сделать длиннющую кнопку. Кстати, если снять галочку Fill Center, то центральная часть не будет заполнена, а останется пустой - дыркой.

Решить эту проблему нельзя просто увеличив размер спрайта в пикселях или увеличив радиус закругления углов на спрайте:

если увеличит размер спрайта или радиус углов, то изменится и кнопка

Ведь тогда и сама кнопка будет иметь больший радиус закругления углов. А если кнопка при этом ещё и низкая, но длинная, то вы вообще получите эллипс на выходе.

Решение.

Здесь поможет поле Pixels Per Unit (плотность пикселей) в настройках спрайта:

плотност пикселей для спрайтов в unity

По умолчанию там стоит такое же значение, как в поле Reference Pixels Per Unit в компоненте Canvas Scaler:

базовое значение плотности пикселей в unity

И это значит, что одному пикселю на спрайте соответствует одна единица пользовательского интерфейса. Поэтому, чтобы исправить наши размытые скруглённые края, нужно в настройках спрайта увеличить значение поля Pixels Per Unit.

В моём случае я увеличил размер спрайта с 32 пикселей до 64 (в два раза) и во столько же раз увеличил плотность пикселей - с 100 до 200.

Всё, нечёткие закруглённые края пропали.

Читайте также другие хитрости и секреты из рубрики Маленькие 3D подсказки.

P.S. 3D - это настолько обширная область, что здесь вам пригодится весь ваш опыт, даже если вы когда-то проходили курсы веб дизайна, то и это пойдёт в прок.