Как использовать вектор, чтобы рисовать ровные и четкие пропсы: обзор инструмента и примеры

Рассказываем, как работать с вектором, почему его лучше использовать при отрисовке пропсов и на что обращать внимание при рисовании.

Растр слева и вектор справа. Работа художницы студии <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fcanoeband.com%2F&postId=1240077" rel="nofollow noreferrer noopener" target="_blank">Canoe</a> <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.artstation.com%2Fasherauf&postId=1240077" rel="nofollow noreferrer noopener" target="_blank">Ксении Сеньковской</a>
8181

Какой-то бред написан в теоретических выкладках, как будто автор надёргал рандомных фактов из интернета для галочки. Я много работал с вектором, причём именно в плане использования готовых svg картинок в мобильных и браузерых проектах. Разберу пролёты.

Начнём с"преимуществ" вектора:

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

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

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

Мало весят. Векторные изображения легкие, поэтому они не будут утяжелять игру или долго прогружаться. Например, в игре Cooking Craze персонажи, объекты и иконки — полностью векторные.

Всё зависит от самой картинки. Если вектор сложный из множества объектов, то та же svg может весть больше чем аналогичного размера растр. Персонажи из приведённой игры очень сильно рискуют в этом плане. Плюс тот код SVG что генерируется редактором - это страх божий и об оптимизации там речи быть не может. Там просто может пустых тэгов навалить.

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

Вы может и выиграете в занимаемом ассетами месте, но точно проиграете в производительности. Именно поэтому в мобильных играх всё-таки часто используют растр, а не вектор. Ну и с вектором не все девайсы работают одинаково, что тоже накладывает ограничения.

Выглядит ровными и аккуратными. Неважно, будет ли предмет нарисован пером или с помощью фигуры — его края всегда будут ровными и четкими. Такие картинки выглядят качественными и аккуратными, а для геймдева это важно.

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

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

Вектор в качестве ассетов имеет смысл использовать только если это флэтовые иконки какие-нибудь без изысков. Всякие градиенты, фильтры и прочее в векторе могут отрендериться движком некорректно. Да и сомневаюсь я, что оптимизированный png 24*24 будет меньше, чем векторный аналог.

В статье ценна только идея наброска предварительного "каркаса" вектором, который потом будет облагорожен растровыми инструментами. А так, все нормальные художники запрашивают размер ассетов у геймдизов/юайщиков, и рисуют х4 или х8, чтобы потом при уменьшении все погрешности сгладились меж пикселей.

37

ага, главный плюс вектора в аккуратности графики, экономия времени и использование вектора внутри игры или сайта вери сомнительно, как минимум из-за того что рендерить сотни шейпов ресурсоёмко

4

Горячо благодарим за фидбек! Передали автору💞