Получение эффекта "giggly" при медленном перемещении спрайта

Ответ 1

Я приготовил быструю анимацию, чтобы продемонстрировать, что происходит здесь:

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

Точки в центре каждой ячейки сетки представляют собой их точку выборки. Поскольку мы используем фильтрацию Nearest-Nieghbour/Point, это единственный момент в текстуре, на который они обращают внимание. Когда край нового цвета пересекает эту точку выборки, весь пиксель сразу меняет цвет.

Проблема возникает, когда сетка texel источника не соответствует нашим выходным пикселям. В приведенном выше примере спрайт составляет 16x16 текселей, но я увеличил его до 17x17 пикселей на дисплее. Это означает, что где-то в каждом кадре некоторые тексели должны повторяться. Там, где это происходит, изменяется, когда мы перемещаем спрайт вокруг.

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

В этом случае, поскольку существует только 1/16-я разность шкалы, каждый тексель находится только в этой странной ситуации для кадра или двух, затем он переходит к соседнему, создавая рябь удвоенных пикселей, которая, по-видимому, скользит по изображение.

(Можно рассматривать это как тип муарового рисунка, возникающего в результате взаимодействия сетки текселя и сетки выборки, когда они разнородны )

Исправление составляет , чтобы вы масштабировали ваше пиксельное искусство, чтобы каждый тексель отображался с размером целого числа пикселей.

Либо 1:1

Или 2: 1, 3: 1...

Использование более высокого кратного позволяет спрайту двигаться с шагом короче, чем его собственный размер текселя, без локализованного растяжения, который влияет на предполагаемый внешний вид искусства.

Итак: обратите пристальное внимание на разрешение вашего вывода и масштабирование, применяемое к вашим активам, чтобы обеспечить сохранение целочисленного отношения между ними. Сообщение в блоге, что ссылки CAD97 имеют практические шаги, которые вы можете предпринять для достижения этого.

Изменить: Чтобы продемонстрировать это в проекте Unity, который вы загрузили, я изменил настройки камеры, чтобы они соответствовали вашим пикселам, и установил следующий тест. Марио сверху имеет слегка нецелое соотношение тексела к пикселю (1.01:1), а Марио внизу - 1:1. Вы можете видеть, что только верхние экспонаты Mario различают артефакты:

Ответ 2

Возможно, вас заинтересует этот пост в блоге о создании "идеальных 2D-игр" в единстве.

Некоторые соответствующие выдержки:

Если вы запустите игру с пикселями со всеми настройками по умолчанию в Unity, это будет выглядеть ужасно!

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

Эти другие настройки необходимы, чтобы сделать все как можно более четким.

В спрайте:

• Убедитесь, что ваши спрайты используют сжатие без потерь, например. Истинный цвет
• Отключить mipmapping
• Выбор точки использования

В настройках качества рендеринга:

• Отключение анизотропной фильтрации
• Отключить сглаживание

Включите привязку пикселов в шейдере спрайтов, создав пользовательский материал, который использует шейдер Sprite/Default и прикрепляет его к SpriteRenderer.

Также я хотел бы указать, что Если вы не применяете физику, Никогда не использовать FixedUpdate. Кроме того, если ваш спрайт имеет коллайдер и движется, он должен подключить Kinematic RigidBody, даже если вы никогда не будете использовать физику, чтобы сообщить движку, что Коллайдер будет двигаться.