Что отличает масштабирование пиксельной графики от других изображений?

13

Недавно я тренировал разработчика, который плохо знаком с созданием пиксель-арта, и понял, что есть некоторая «общепринятая мудрость» в области масштабирования пиксельной графики, которая неочевидна для новичка и может быть недостаточно документирована. Итак, вот попытка исправить это ....


  1. Я слышал, что я должен масштабировать пиксель-арт только на 200%, 300% и т. Д., А не между размерами, такими как 120%.

    • Это почему? Разве масштабирование не должно "просто работать" так, как это происходит с другими изображениями?
    • Что, если мне действительно нужно сделать моего персонажа чуть больше или меньше, чтобы получить правильный игровой процесс или внешний вид? Как я могу это исправить?
  2. Мне говорят, что «плохо» использовать пиксельные рисунки в разных масштабах в одной игре - почему?

    • Например, если я увеличил масштаб своего персонажа, чтобы каждый текст спрайта составлял 4x4 пикселя экрана, тогда как фоновый рисунок масштабировался, поэтому каждый текст спрайта составлял 6x6 пикселей экрана. Разве пиксель не является пикселем в конце дня?
ДМГригорий
источник

Ответы:

31

Масштабирование по целым числам

Масштабирование в 2x, 3x ... n x просто - каждый пиксель просто становится квадратом n x n пикселей, и внешний вид оригинального спрайта отлично сохраняется (включая все острые линии, углы и зигзаги лестницы) ,

Тем не менее, мы сталкиваемся с проблемами при масштабировании пиксельной графики на дробные величины (например, в 1,5 раза), поскольку пиксели по своей природе дискретны. Мы не можем иметь «полпикселя».

Для других видов искусства мы часто можем избежать смешения смежных исходных пикселей, где пиксель должен быть «наполовину окрашен», а при высоком разрешении артефакты обычно не заметны. Но на больших объемных изображениях это быстро разрушает четкость изображения.

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

Это имеет еще одну проблему: поскольку число пикселей после масштабирования не кратно целому числу от количества исходных пикселей, некоторые исходные пиксели будут дублироваться больше, чем другие (при увеличении) или пропускаются полностью (при уменьшении).

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

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

Пример артефактов от использования нецелого масштаба

Если нам действительно нужно, чтобы спрайт был на 150% больше (скажем, чтобы игровой процесс выглядел правильно или для поддержки альтернативных разрешений экрана ), мы можем перерисовать проблемные области, как в примере справа. Теперь это больше похоже на то, что сделал бы художник, и стилистически согласуется с другим искусством в игре. (Хотя я сам не большой пиксельный художник, так что все еще может быть лучше 😉)

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


Кроме того: дробные весы также могут возникать во время выполнения .

Представьте, что ваша игра имеет разрешение NES (256 x 240) и вы хотите отобразить ее на экране 1080p.

1080 ÷ 240 = 4,5, поэтому некоторые исходные пиксели или «тексели» в вашей сцене растягиваются до 5 пикселей экрана, а другие - только 4, создавая искажения, как мы видели выше. В движении они имеют тенденцию заставлять спрайты дрожать и отвлекаться, без видимой причины:

Пример движения гриба дробного масштаба с артефактами ряби

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

Решение состоит в том, чтобы использовать комбинацию отступов / обрезки или альтернативных наборов ресурсов, чтобы вернуться к согласованному, целому количеству соотношений пикселей экрана и текселей для каждого разрешения экрана, которое вы хотите поддерживать - см. Некоторые примеры Unity здесь . Это еще один случай, когда нет простого универсального решения, и вам придется применить некоторые суждения и мастерство, чтобы ваша игра выглядела остро.

Сохранение последовательности пикселей

Это «правило» сводится к стилистической последовательности.

Когда вы используете пиксельную графику в разных масштабах, это может выглядеть так, будто активы были объединены в разные игры, вместо этого они имеют единую эстетику.

Пример по-разному масштабирования активов в одной игре

В примере слева я собрал несколько спрайтов из Super Mario World, все в одном масштабе, и это выглядит великолепно.

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

С одной стороны, фон намного более детальный, чем передний план. Он способен представлять плавные кривые и резкие блики, что делает передний план особенно «блочным» по контрасту, вместо того, чтобы иметь последовательное ощущение пиксельной графики. А контуры крота заметно толще и более зазубренные, чем остальная часть переднего плана.

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

Но должен ли я?

Нет, не совсем. Это ваша игра, и вы можете сделать так, как хотите.

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

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

И последнее замечание: во многих играх с пиксельной графикой очень высокоточный геймплей. Подумайте о переходе между одноблочными платформами в ранних играх Mega Man. В этих ситуациях согласованная пиксельная сетка (и мозаичная сетка) может быть важным сигналом для игрока при оценке и выполнении его ходов. Внедрение нерегулярности в искусство может фактически усложнить изучение игры, что может разочаровать.

ДМГригорий
источник