Графический дизайн, арт игры, концепт, персонажи, текстуры, анимации, модели
GameDev.ru / Графический Дизайн / Форум / Векторный PixelArt. WTF?!?

Векторный PixelArt. WTF?!?

HipsterNeverDieПостоялецwww23 мар. 201815:07#0
Недавно старый знакомый арт-дир, мой добрый друг,задал мне нетривиальную задачку:
- Есть векторный арт, - говорит. - Нужно из него сделать pixel art. Но только векторный.
- Это нахрена? - спрашиваю.
- ХЗ. Желание заказчика.
Надо сказать, я и pixel art - это как белый медведь и пингвины. Никогда его не трогал - рисую только вектор. Но, черт побери, интересно. Знаю, что в pixel art есть свои законы, правила, и не всякий арт можно переделывать в pixel. Поговорили с другом. Оказалось они с заказчиком этот вопрос обсудили, и, если будут некоторые отступления от "канонов" - не беда. Ну, ок.
Итак, условия и задачи:
- преобразовать векторные элементы (объекты окружения, персов и пр. Фонов, кстати, не было)
- квадратики (условные пиксели) должны быть именно квадратными, т.е. с равными сторонами.
- размеры квадратиков различных элементов должны быть одинаковыми. Т.е. при одинаковых размерах "пикселей" должны быть правильные пропорции объектов друг относительно друга.
- ограничения по кол-ву цветов нет.
- Только простые контуры или шейпы, никаких блендов, энвелопов и т.д. Контуры должны быть замкнуты.

Как же все это провернуть? Вариант нарисовать/обрисовать классическим способом (в фотошопе, например), а потом трассировать, не рассматривал, т.к. во-первых pixel art рисовать не умею, а во-вторых никто не даст гарантии, что при трассировке все будет точно и гладко (скорее наоборот, все будет неточно и негладко). Первое, что приходит в голову - создать сетку нужных размеров, наложить ее на исходник и позаливать квадратики ("пиксели") ведром, т.е. вручную. Эм... тыкать в каждый квадратик, да еще тыкать пипеткой - метод, конечно хороший, точный, но нельзя ли как-нибудь по-быстрее? А вот можно. Показываю (в иллюстраторе):

1. В свойствах документа в поле units выбираем inches. Для чего? Сейчас увидите.

+ Показать

2. Настраиваем требуемый уровень "пикселизации". У меня по ТЗ: "высота самого высокого объекта - 100px." Я выставил в ряд все объекты (их автор уже скорректировал размеры друг относительно друга - хвала ему!), выделил все и увеличил их размер так, чтобы высота самого высокого объекта была 2 in. У нас в примере самое высокое - дерево, его высота 2 in (free license арт).

+ Показать

Таким образом, у меня все объекты правильно маштабированы друг с другом, каждый из них имеет свой размер в дюймах и я хочу чтоб в этих дюймах было по 50 "условных пикселей" (самый высокий 2in=100px, 1in=50px). Запомним это. Вы можете выбирать число "условных пикселей"/дюйм какое вам нравится (главное, запомните его). Например, ваш объект должен быть 88х90 px - делайте его большую сторону 1 дюйм и запомните что у вас условно 90ppi. Тут нужно понимать: неважно какой размер кустика будет в итоге, неважно какое разрешение у вашего экрана или сколько дюймов его диагональ, важно только одно - степень пикселизации, сколько пикселей будет в этом кустике.

3. Создаем "фоны" для наших объектов - прямоугольники белого цвета без обводки (можно и другого цвета, главное чтобы цвет прямоуг. не был близок к цветам объекта). Важно! Размеры сторон прямоугольников должны быть целыми в дюймах (1,2,3...), я создал три прямоугольника: 2x2in, 1x2in, 1x1in.

+ Показать

4. Растрируем. ЧТО?!? Спокойствие, только спокойствие. Ставим каждый объект на подходящий ему "фон" (чтобы объект не вылезал за границы прямоуг.), выделяем объект+"фон", идем Object>Rasterize... Выставляем в поле разрешение нужный нам ppi (в моем случае 50) и отключаем антиальясинг.

+ Показать

Именно для этого мы делали прямоуг.фоны - чтобы наши растрированные картинки были с правильными пропорциями. При растеризации размер картинки может немного уехать (причем рандомно). Подгоняем его обратно и продолжаем.
+ Показать

5. Создаем мозаику. Выделяем нужную картинку, убеждаемся , что она embedded,

+ Показать
идем object>create object mosaic...Выставляем количество тайлов (это будут наши "условные пиксели"-квадратики), учитывая размер картинки и наш ppi. Например, в моем случае картинка 2x2in=100х100, 1x2in=50х100, 1x1in=50х50.
+ Показать

Жмем Ок, ждем n-ое кол-во времени и Ву-а-ля.

6. Убираем белый (или другой) фон, убираем некоторые артефакты, если они есть. Корректируем, если что не так.

+ Показать

Все готово! Имеем векторное изображение, состоящее из квадратных контуров.
+ Показать

Такой вариант оптимален, если у вас нет ограничения по цветам. Если есть, идем немного другим путем. В пункте 2 корректируем размеры объектов из расчета 72 квадратика/дюйм (72ppi), и только 72. В пункте 3 вместо фонов-шейпов создаем артборды таких же размеров. Далее в пункте 4 растрируем через экспорт в png-8: file>export>exportforscreens...Выбираем формат экспорта png-8, не забываем в настройках формата (шестеренка) отключить антиальясинг, выключить прозрачный фон и задать ограничение по цветам. При создании мозайки учитываем разрешение 72 ppi. Вот так выглядит градиент с ограничением цветов.
+ Показать

Надеюсь кому-нибудь мой опыт будет полезен. Интересных проектов и вдохновения всем нам. МИР
P.s. Если есть у кого мысли, зачем чуваку понадобился векторный pixel art, не стесняйтесь, пишите в комментах.

KromПостоялецwww29 мар. 201817:59#1
Хороший гайд, спасибо! )
NazПостоялецwww3 апр. 201813:04#2
HipsterNeverDie
Возможно у заказчика есть "професионал" который посоветовал сделать так
Мне например заказали когда-то делать векторами уровни и персонажей , анимировать а потом сохранять кадры анимации в PNG. Причем разрешением 1920х1080 .
В итоге , размер анимаций был слишком велик как для простенькой игры и проект загнулся
HipsterNeverDieПостоялецwww3 апр. 201820:26#3
Naz
В итоге , размер анимаций был слишком велик как для простенькой игры и проект загнулся
Ну, вряд ли проект загнулся только от размера анимашек.
А вообще, мне часто заказывают именно векторные фоны (как изометрию так и 2D), и при этом почти всегда анимации персов в png.
Что до моего заказчика, то я думаю он заказывал для стоков.
MixeYaПостоялецwww3 апр. 201821:09#4
HipsterNeverDie
Не вижу в этом никакого смысла.
Пиксельарт интересен тем, что автор вручную прорисовывает каждый пиксель, от чего в разы вырастает детализация и качество изображения.
Созданные такой техникой вещи очень интересно рассматривать.

/ Форум / Графический Дизайн / Общее

2001—2018 © GameDev.ru — Разработка игр