Четкие спрайты в пиксель арте для Unity 2018

Вы делаете игру в Unity, но ваши спрайты в пиксель арте выглядят размытыми и искаженными? Не переживайте, следуйте этому маленькому тьюториалу, и ваши пиксели станут ПРЕКРАСНЫ!

Отключите сглаживание

После создания проекта в 2D, перейдите в Edit -> Project Settings -> Quality и затем Edit -> Project Settings -> Quality (Если у вас есть более одного уровня качества (Низкий, Высокий, Ультра…), проверьте что вы отключили сглаживание на каждом из них).

отключение Anti Aliasing для пиксельных спрайтов

Настройки импорта спрайта

Перейдите к каждому из спрайтов и измените следующие настройки:

Filter Mode -> Point (фильтр отсутствует)

Compression -> None

спрайты в пиксель арте

Пиксели на точку (PPU)

Вы можете использовать любое PPU, но для игр с пиксельным артом часто советуют, чтобы размер тайла был выражен в пикселях (с точки зрения дизайна). В этои примере мы будем использовать PPU 16. Поэтому для настроек каждого спрайта: PPU -> 16

настройки спрайта в unity 2018

Размер ортографической камеры

Один пиксель в спрайте должен быть равен одному пикселю на экране. Чтобы добиться этого, измените Ортографический размер вашей камеры: Орто размер = Вертикальное разрешение экрана / PPU / 2. В данном примере наше разрешение 480×270 и наше PPU 16: 270 / 16 / 2 = 8.4375

размер ортографической камеры

Привязка к пиксельной сетке

Теперь ваша игра красиво смотрится в базовом разрешении. Но если ее открыть в увеличенном разрешении, появятся суб-пиксели! Чтобы этого избежать, вам всего-то нужно привязать индивидуальные спрайты к сетке пикселей.

пиксель арт для unity 2018

Для этого используется дочерний объект, который содержит средство отображения спрайтов, и прикрепляя скрипт, который округляет положение спрайта в LateUpdate():

***

Некоторые из вас, ребята, утверждают, что решение Snapping Script подходит для начинающих, но если вы работаете над большим проектом, лучше использовать более продвинутое. И я думаю, что вы правы! Позвольте мне поделиться с вами несколькими методами, которые я нашел в интернете:

Вы можете использовать шейдер, чтобы привязать пиксели к сетке. Здесь у вас есть очень хороший пример о том, как это сделать @talecrafter. Не забудьте посмотреть его работу.

***

Вот отличное решение как для привязки ваших пикселей, так и для поддержки различных разрешений экрана. @Spennerino проделал удивительную работу по ее реализации и рассказал о результатах, посмотрите по ссылкам в нике.

Ребята! Пожалуйста, если Вам понравилась статья — пошарьте её в соц. сетях, особенно ценны Facebook и Google+
Это очень поможет нашему блогу, огромное спасибо!