101 Гайд по работе с пиксель-артом для разработчика

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

Но прежде, определимся, какой вообще есть арт?

1. Классический (строгий) пиксель-арт — состоит из строгой сетки 1:1. В основном это ретро-игры, которые физически не выходили между пикселей, но и сейчас выходят игры с таким стилем за счёт правильных пост-обработок.

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

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

Разнопиксельность — это явление несоблюдения единого размера пикселей на сцене.

Это может произойти по вине двух людей:

1. Художник, который игнорирует единство размеров, например, рисует персонажа детализированным (128х128), а землю нет (16х16), но оба должны занимать *один игровой квадрат*.

2. Программист, который внутри движка деформирует спрайты как ему хочется, забивая про общую картину.

Поэтому, главный вопрос, который нужно решить ДО разработки:

Тут уже решайте сами. Можете хоть 8х8, хоть 16х16, хоть 128х128. Это зависит в первую очередь от навыков художника (и не обязательно, чтобы все объекты ложились внутри одной клетки!)

А программисту нужно помнить — изменять размеры объектов со спрайтами осторожно.

Если какой-то объект хочется растянуть, потому что *удобнее большого слизня сделать из обычного, изменив scale*, лучше попросить художника перерисовать.
А краткосрочные эффекты, например при ударе объект сжимается, выглядят хорошо!

Итак, вы загрузили арт в движок (далее я буду использовать Unity), и скорее всего сразу же превратилось в мыло:

Для этого настроим 3 пункта:

1. Filter Mode -> Point, убирает сглаживание у спрайта.

2. Compression -> None, убирает сжатие, которое может генерировать артефакты (искажение цвета).

3. Pixel Per Unit -> значение, о котором договорились заранее.

Нужно ли хранить спрайты в особом разрешении? (например в квадрате со стороной степени двойки). Я считаю, что не обязательно. Может движку и удобнее работать и сжимать такие спрайты, но когда средний размер исчисляется в килобайтах...

Итак, вы создали пол, а затем хотите разместить шкаф.

И тут возникает главная проблема: а как это сделать правильно? Ведь стрелочки перемещают по 0.01, и нужно приближать/подгонять значения, чтобы пиксели попадали друг в друга. А это между прочим очень времязатратно!

На помощь приходит привязка по сетке!

Это инструмент, который позволяет внутри редактора размещать объекты по сетке, и имеет две главные настройки:

1. Grid Size — размер сетки. Её нужно выставлять размером по-формуле:

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

2. Snap to Grid — включить. То есть объект перемещается строго по узлам сетки. Например если сетка 1х1х1, и изначально объект имел позицию в (0.5, 0.5, 0.5), то при перемещении он сразу изменится на целые числа.

И это очень удобно, потому что PPU не всегда кратен 10. Например, длина одного пикселя в юнитах при PPU = 16 будет равен... 0.0625!

А вы бы стали подгонять координаты вручную, чтобы достичь кратности этого числа? Я так не думаю.

Также хочу предостеречь, что движение по сетке может ломаться,

если родитель объекта имеет размер, отличный от 1!

Я не буду вдаваться сильно в подробности. Поскольку считаю, что эта тема для отдельного руководства, как и сам не сильно разбираюсь.

Pixel-perfect камера — это эффект пост-обработки, при котором изображение с камеры сжимается до определённой сетки (например 320x180), а после растягивает результат на весь экран.

1. Классический пиксель-арт!

2. Все объекты встают в пиксельную сетку! Хоть растягивай, хоть поворачивай — все чётенько!

Сложности (минусы):

1. Перемещение и изменение размера камеры может привести к тряске картинки.

2. Скорее всего, камера начнёт пикселизировать и весь UI, что не всегда выглядит хорошо. Нужно уметь рендерить разные слои по разному.

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

4. А в вашей игре достаточно объектов и эффектов, чтобы через пост-обработку заиграли новыми красками? Может, ваша игра не будет вообще отличаться?

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

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

Для его решения нужно посмотреть на 3 вещи:

1. Размер камеры. Иногда можно подогнать так, чтобы полосок не было видно (но в половине случаев это не поможет).

2. Размеры сетки. Может вы сделали его слишком широким.

3. А если другое не помогло... можно схитрить, и чуть изменить Pixel Per Unit в меньшую сторону (было 10, стало 9.99). Тогда эти промежутки исчезнут, так как спрайты увеличились на очень небольшое число.

1. Перед началом обсудите, какого размера будут спрайты в вашей игре, например 16х16 или 32х32 или любой другой. Так выберите для себя подходящий Pixel Per Unit.

2. При импорте спрайтов выставите:
- Filter Mode -> Point,
- Compression -> None,
- Pixel Per Unit -> ваше число.

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

4. Используйте привязку объектов по сетке, которая находится в верхней панели в редакторе. Выставите размер сетки числом, равным:
Grid Size = (1 / Pixel per Unit) / 2
А также включите Snap to Grid
Тем самым объекты размещаются строго по сетке, равной пол пикселю, что экономит время.

5. Pixel Perfect Camera - хороший старт для создании эффекта классического стиля пиксель-арта, но имеет подводные камни. Поэтому изучайте, когда будете уверены в своих силах.

В качестве примеров я использовал свой проект, разработанный в рамках Геймджема за 3 дня. Ознакомиться с ним можно здесь:

Вперёд делать игры!