Вектор vs растр в игровом арте: как выбирать

Выбор между вектором и растром - не теоретическое упражнение из учебника дизайна. Он влияет на то, как быстро UI масштабируется между размерами экранов, насколько чёткими выглядят иконки на странных DPI, насколько большой ваш билд и насколько дорог рендер сцен. Для студий, релизящих на iOS, Android, PC и консолях, решение проявляется везде: layout HUD, 2D-пайплайны персонажей, текстурная память, даже время сборок на build farm. Этот гайд объясняет ключевые различия и даёт практичные продакшен-готовые способы использовать оба без срыва расписания и бюджета производительности. Шире по теме - гайд по дизайну HUD и гайд по 3D-текстурированию.

Главные мысли

• Вектор = математика: пути, обводки, заливки. Масштабируется без потери качества, идеален под UI, иконки, лого, schematic-иллюстрации.
• Растр = пиксели: живопись, фотореализм, PBR-текстуры, VFX flipbook’и, hand-painted-фоны.
• Большинство движков не рендерят вектор в runtime. Авторим в векторе, экспортим в bitmap или SDF/MSDF-атлас.
• SDF/MSDF-атласы: crisp-края на любом размере с маленькой текстурой - идеально для иконок и шрифтов.
• Гибридные пайплайны: вектор для авторинга UI/брендинга + растр для текстур и иллюстраций.
• Размер билда: растровые текстуры доминируют. Атласы, KTX2/Basis/ASTC/BCn компрессия, MIP-цепочки.
• Шрифты: TTF/OTF (вектор) → runtime-растеризация или SDF-шрифты для crisp-текста на любом языке.

Что такое вектор и растр для игр

Векторный арт - это математика. Формы описаны как пути, обводки, заливки, градиенты и Boolean-операции. Поскольку он resolution-independent, векторная иконка масштабируется с 24-px кнопки тулбара до 4K-splash без размытия. Файл SVG или AI хранит инструкции, не пиксели; при экспорте или рендере инструкции превращаются в пиксели.

Растровый арт - пиксели с самого начала. Текстура 2048×2048 - сетка значений цвета, и масштабирование её вверх или вниз включает ресемплинг. Растр блистает в фотографических нюансах, живописных мазках и текстурной вариации - всё от hand-painted-фонов до PBR-текстурных сетов и концепт-арта персонажей. Распространённые форматы в игровых пайплайнах: PNG, TGA, PSD, EXR, DDS, KTX2, WebP.

Ключевая реальность для разработчиков игр: большинство движков не рендерят чистые векторные инструкции в runtime для сложных интерфейсов или арта. Обычно авторят векторы в дизайн-тулзах, потом экспортят в bitmap’ы, sprite-листы или signed distance field (SDF/MSDF), которые рендерятся дёшево и предсказуемо в движке. Растровый контент, наоборот, - именно то, что GPU создан жевать, с оговорками про размер, компрессию и overdraw.

Где вектор блистает в играх

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

UI и HUD

Иконки, бейджи, глифы кнопок и простые пиктограммы держат острые края на любом DPI. Авторим в векторе - гарантия консистентности кривых, углов и толщин обводок. Экспортим per-density bitmap’ы для мобайла (1×/2×/3×) или идём с MSDF/SDF-атласами, чтобы рендерить иконки на произвольных размерах, оставаясь бритвенно-острыми.

Лого и брендинг

Splash-скрины издателя, иконки приложения, ачивки и event-лого рождаются как векторы и растеризуются только когда известен точный размер. Это защищает качество краёв в storefront-ассетах, трейлерах и in-game-выводе.

Геометрические иллюстрации

Стилизованные дашборды, схематические карты и минималистичный арт сцены выигрывают от векторных primitive’ов. Векторный авторинг делает тривиальным перекрасить тему или подкрутить radius без перерисовки.

UI motion

Микро-анимации иконок прототипируются в векторных тулзах, потом экспортятся как sequence’ы или бейкаются в sprite-листы. Для app-style-экранов внутри игры Lottie-стиль векторного воспроизведения может быть опцией для не-realtime-тяжёлых интерфейсов, хотя большинство тайтлов всё ещё предрендерят в bitmap’ы для упрощения GPU-пайплайнов.

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

Где растр - правильный ответ

Растр несёт нюанс света и материала, который векторы фальсифицируют с трудом.

PBR-текстуры для 3D

Base Color, Normal, Roughness/Metalness, AO и detail overlay - растровые карты по дизайну. Они дают крошечные вариации, делающие кожу мягкой, хром острым, асфальт пыльным. Даже стилизованные тайтлы обычно опираются на растровые текстуры - просто со сжатыми value-диапазонами и hand-painted-cue. Глубже про PBR - в гайде по 3D-текстурированию.

Hand-painted-спрайты и фоны

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

VFX flipbook’и

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

Маркетинг-арт и storefront-скриншоты

Key art хочет фотографического контроля над светом, краями и деталью. Растр даёт пиксель-точный контроль для storefront-страниц, рекламы и PR-ассетов.

Перформанс и память: как каждый выбор влияет на релиз

Полезно мапить творческие выборы на стоимость рендера и хранения.

Векторы и runtime-стоимость

Чистый векторный рендеринг в runtime может включать тесселяцию и сложные shader-пути. Большинство игр избегают этих накладных, растеризуя векторы при экспорте и загружая как обычные текстуры. Исключение - SDF/MSDF-атласы иконок, рендерящие острые кривые очень маленькими текстурами. SDF-рендеринг использует крошечный шейдер для реконструкции края; результат - «vector-like» острота без векторной runtime-сложности.

Растры и память

Растровые текстуры доминируют размер билда и GPU-память. Несколько high-res PNG могут весить больше всех мешей уровня. Антидоты - atlasing, выбор формата (KTX2/Basis, ASTC/ETC2, BCn/DXT), MIP-карты и строгие resolution ladder’ы. Прозрачные спрайты (UI, VFX) приносят overdraw-стоимость; тяжёлые альфа-слои топят fill-rate на мобайле. Дизайн с меньшим количеством стэкнутых прозрачностей и плотными bounds защищает FPS.

Читаемость vs алиасинг

Маленькие высококонтрастные детали мерцают в движении. Векторы, экспортированные на правильные размеры или в SDF, избегают ступенек; растровый UI снэпается к пиксельной сетке на целевых масштабах. Для in-world-текстур опирайтесь на MIP-цепочки, anisotropic-фильтрацию и чуть более высокий roughness в specular-зонах для гашения муара.

Пайплайны, соединяющие лучшее из обоих

Умные команды используют вектор для авторинга и растр для runtime.

Авторим векторы, экспортим в атласы

Дизайним сеты иконок в Illustrator, Figma или Affinity Designer. Зафиксируйте толщины обводок, радиусы углов и выравнивание по сетке в векторном источнике. Экспортируйте в sprite-лист (PNG/TGA) с padding’ом, чтобы избежать MIP-bleeding. Для динамического масштабирования генерируйте SDF/MSDF-атласы для иконок и глифов.

Бейкаем векторный UI в nine-slice

Панели и chip’ы с закруглёнными углами экспортируются как nine-slice-спрайты, давая растянуть без искажения границ. Получаем компактность маленького растра и гибкость векторной раскладки.

Предрендерим векторные иллюстрации на нескольких DPI

Под нарративный арт с жёсткими краями и градиентами предрендерим на двух-трёх DPI. Движок свопает ассеты по тиру устройства - low-end-телефоны не тратят память.

Используем векторные шрифты, рендерим текст в движке

Текст - особый случай: шрифты - векторные кривые в TTF/OTF. В runtime движок растеризует глифы в атлас по запросу или использует SDF-шрифты для чистого масштабирования. Получаете crisp UI-текст на любом языке без зоопарка предрендеренных PNG-лейблов.

Форматы файлов, реально доезжающие до релиза

Соблазнительно выбрать дефолт арт-тулзы, но дисциплина формата окупается.

Для векторов в авторинге

Используйте AI, SVG или FIG для исходников. Держите формы редактируемыми, избегайте ненужных растровых эффектов, храните brand-палитры и сетки. При коллаборации между тулзами SVG - lingua franca, но учтите, что сложные blend’ы и фильтры могут не пройти идеально.

Для runtime UI и спрайтов

Экспортируйте в PNG для lossless-краёв и прозрачного фона. Где возможно, сжимайте в platform-friendly-форматы при импорте (KTX2/Basis для мобайла, BCn/DXT для PC/console). Если приняли SDF-иконки или шрифты, атлас всё равно растровый файл, но драматически меньше multi-DPI-сетов.

Для текстур

Engine-native-контейнеры: DDS/BCn для PC/console, KTX2/ASTC/ETC2 для мобайла. Normal-карты остаются в форматах, сохраняющих знаковую деталь; избегайте lossy RGB-компрессии для фото. Если стримите open-world, держите текстуры тайлящимися и агрессивно бюджетируйте резидентность.

Для маркетинга

Поддерживайте слоёные PSD или AFDesign как мастера. Экспортируйте WebP или JPG для веба, PNG для магазинов, требующих lossless, и обеспечьте консистентные color-профили с пайплайном - брендовые цвета не должны сдвигаться.

Арт-направление мапит вектор или растр

Стиль ведёт медиум.

Flat UI с смелым языком форм

Vector-origin-арт делает тривиальным держать консистентные толщины и закруглённые углы. HUD остаётся читаемым на сжатых телефонах - края чистые, контраст настроен.

Painterly или тактильные интерфейсы

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

Иллюстрированные миры и персонажи

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

Гибридная стилизация

Многие мобильные тайтлы соединяют vector-tight UI с богато текстурированными окружениями. Этот контраст помогает глазу отделить информацию от атмосферы и даёт контроль над hotspot’ами перформанса. Шире про стилизацию - в гайде по стилизованному арту для мобайла.

Соображения по анимации

Движение продаёт взаимодействие и эмоцию, но пайплайн различается по медиуму.

Vector-style motion

Микро-интеракции UI - морфящие иконки, тогглы, спиннеры загрузки - авторятся как векторы и экспортятся как sprite-sequence’ы. Для app-like-экранов Lottie или похожие vector runtime’ы работают, но игры обычно предпочитают предрендеренные bitmap’ы - чтобы избежать runtime-тесселяции и интегрироваться с существующим batching.

Raster-driven 2D-риги

Spine, DragonBones и 2D-rigging Unity анимируют растровые части - руки, головы, аксессуары - без перерисовки. Получаете выразительное движение и маленькие текстурные листы, особенно в паре с 9-slice и тайлящимися элементами.

VFX и партиклы

Даже когда VFX-концепт скетчуется как вектор, обычно становится растровым flipbook’ом и mesh-partкл - для контроля overdraw и timing точно.

Масштабирование между платформами и DPI

Релиз на всём - от маленьких телефонов до 4K-телевизоров - приглашает emergency «почему моя иконка мягкая?». Запекайте масштаб в пайплайн.

Density-bucket’ы для мобайла

Давайте 1×/2×/3× экспорты для UI-спрайтов, когда не используете SDF. Снэпайте иконки к базовой сетке - пиксельные края ложатся чисто. Тестируйте на реальных устройствах с расстояния вытянутой руки; симуляторы лгут.

Signed distance field для иконографики

SDF/MSDF-атласы позволяют масштабировать иконки и глифы на множество размеров одной маленькой текстурой и лёгким шейдером. Они блистают на монохромных формах и тонких обводках; сложные фотостайл-иконки всё равно нуждаются в bitmap’ах.

MIP и анизотропия для in-world-текстур

Включайте MIP; настройте bias, чтобы дальние детали не мерцали. Anisotropic-фильтрация окупается на наклонных поверхностях - полы и дорожные текстуры.

TV/desktop HUD-масштабирование

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

Размер билда, стриминг и атласы

Львиная доля билда часто приходит от арт-ассетов. Балансируйте ясность и footprint.

Sprite-атласы

Пакуйте UI-спрайты и сеты иконок в атласы - снижаем draw calls. Добавляйте padding, чтобы избежать bleeding в MIP-уровнях. Группируйте по использованию: hot-пути предзагружаются, cold стримятся.

Текстурная компрессия

Выбирайте правильный codec по платформе. KTX2/Basis даёт гибкую транскодирование под многие GPU - полезно в мульти-платформенном мобильном пайплайне. Превьюйте артефакты компрессии на UI-краях и подкручивайте пороги где нужно.

Гранулярность для апдейтов

Разделяйте косметические паки и сезонный арт в контент-бандлы. Меньшие DLC-куски сокращают размер патча и позволяют A/B-тестировать темы без раздувания core APK или app-bundle.

Этикет коллаборации, экономящий недели

Векторные и растровые команды часто сидят рядом. Немного структуры предотвращает переделки.

Style-bible с токенами

Документируйте толщины обводок, радиусы углов, brand-палитры и spacing-правила для UI. Определите value-диапазоны текстур и roughness-полосы для PBR - растровые художники приземлятся в одну физическую зону. Относитесь к этому как к токенам, которые можно референсить из кода и шейдеров.

File hygiene

Векторы: именуйте слои, экспандьте скудно, избегайте вложенных clipping-масок, экспортирующихся непредсказуемо. Растры: держите non-destructive-слои, именуйте группы и чистите скрытый мусор до hand-off.

Экспорт-пресеты

Лочьте конвенции имён, плотности, color-профили, компрессию и padding. Автоматизируйте экспорты, где возможно, - реслайс не становится ручной error-prone-задачей.

Movement превью

Всегда превьюйте в движке под реальным светом, tone mapping и пост. Многие «выглядело нормально в редакторе» сюрпризы приходят от mismatch gamma, color-профилей или неверных import-настроек.

QA-чек-листы под vector-origin и растровые ассеты

QA арта - больше, чем «нормально для меня».

Vector-origin-ассеты

Сверьте пиксельное выравнивание на целевых размерах. Проверьте униформность обводок между иконками. Тестируйте SDF-иконки на экстремальных размерах на edge-артефакты. Подтвердите, что nine-slice-спрайты не искажают углы. Аудитьте консистентность цвета между темами.

Растровые ассеты

Сканируйте на mip-bleeding, alpha fringe, banding компрессии и пере-острые детали, мерцающие в движении. Прогоняйте UI на низком DPI и высоком DPI; убедитесь, что шрифты не обрезаются на длинных языках. В 3D следите за инверсиями normal-карт и pop’ом specular на смене LOD.

Реальные сценарии и как мы решаем

Мобильная RPG с богатым HUD и инвентарём

Векторы ведут иконографику и оформление рамок, экспортятся в атласы и SDF; растры закрывают арт предметов, портреты и текстуры сцен. Результат - острый, читаемый интерфейс, масштабирующийся, с painterly-деталью там, где важно.

Casual 2D-puzzler

Графические формы и яркие cue выигрывают от векторного авторинга, но релизим как bitmap’ы под перформанс и контроль анимации. Любые текстурные фоны - растровые иллюстрации, настроенные под маленькие экраны. Глубже - в гайде по разработке puzzle-игры.

Стилизованный 3D-racer

UI и вывески идут с vector-мастеров для ясности на скорости. Машины, трассы и декали используют растровые PBR-текстуры. VFX flipbook’и продают занос, дым и искры, оставаясь под бюджетом fill-rate мобайла.

Кросс-платформенная маркетинговая кампания

Лого и типографика остаются векторными до финального экспорта; социальные баннеры и storefront-ассеты рендерятся как растры в нескольких aspect ratio. Сохраняем точность brand-цвета через консистентные профили и контролируемые LUT.

Простая матрица решения

Спросите пару простых вопросов - и выбор очевиден.

• Должен ли элемент масштабироваться на много размеров с острыми краями? Авторим в векторе, экспортим в SDF или multi-DPI bitmap.
• Опирается ли элемент на текстурный нюанс или живописные мазки? Растр - правильный медиум.
• Появится ли ассет в мире с перспективой и светом? Растровые текстуры, возможно с декалями или vector-origin-вывесками, забейканными в растр.
• Нужны микро-анимации UI? Авторим в векторе для консистентности, потом экспортим sprite-sequence’ы или timeline, чисто интегрирующиеся.
• Размер билда под давлением? Предпочитайте векторный авторинг с SDF для иконок и агрессивно сжимайте растровые текстуры platform-appropriate-codec’ами.

Тулинг, играющий вместе

Выбирайте тулы, которые команда может делить без трения.

• Векторный авторинг: Illustrator, Affinity Designer, Figma, Inkscape.
• Растровая живопись: Photoshop, Krita, Clip Studio Paint, Procreate.
• Текстурный авторинг: Substance 3D Painter/Designer или ArmorPaint для PBR-пайплайнов.
• Spine/DragonBones для 2D-ригов, engine-native UI-builder для layout, shader-граф для SDF-рендеринга иконок.
• Экспорт-автоматизация скриптами и плагинами - насаждаем именование, плотность, padding и компрессию.

Эти воркфлоу интегрируются в пайплайны Unity и Unreal, исходный арт трекается в version control, экспорт-пресеты коммитятся в репозиторий, CI валидирует import-настройки - каждый ассет приходит engine-ready.

Как SunStrike Studios помогает релизить арт, который выглядит остро и работает быстро

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

Vector-driven UI и брендинг

Дизайним системы иконок, HUD и event-лого как векторы с grid-дисциплиной, потом экспортим в атласы и SDF под движок. Nine-slice-спрайты, theme-токены и auto-layout-гайд держат интерфейс консистентным с первого дня.

Растровая иллюстрация и текстурные пайплайны

Художники создают hand-painted 2D-ассеты и продакшен PBR-текстуры под стилизованные и реалистичные тайтлы. Сдаём организованные PSD, trim sheet’ы, декали и platform-specific сжатые текстуры - билды остаются lean.

Tech art и интеграция

Wire’аем master-материалы, SDF-шейдеры для иконок и шрифтов и import-профили, валидирующие форматы, размеры, padding и компрессию в CI. Ассеты приходят engine-ready, без last-minute-угадайки.

QA, покрывающий визуал и перформанс

Тестируем читаемость UI на маленьких экранах, ловим алиасинг, флагуем mip-bleeding и overdraw, верифицируем консистентность между тирами устройств. Перформанс-проходы защищают FPS и бюджеты памяти до soft-launch.

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

Итог

Вектор vs растр - не соперничество, а коллаборация. Векторы дают ясность, консистентность и масштабируемые интерфейсы. Растры дают текстуру, настроение и тактильную grit, продающую миры. Большинство успешных игровых пайплайнов используют векторы для авторинга и растры для релиза, с SDF-техниками, мостящими разрыв для иконок и шрифтов. Если якорите решения к читаемости, перформансу и размеру билда - и лочите экспорт-правила рано - потратите меньше времени на тушение пожаров и больше на полиш.

Если планируете проект или хотите аудит текущего пайплайна - SunStrike Studios поможет. Замапим использование вектора и растра под ваш стиль и платформы, построим экспорт-автоматизацию и сдадим арт, который остр, производителен и узнаваемо ваш - нужно ли 3D-арт-производство или стилизованные фоны.