Графика игр: виды визуала, форматы файлов, источники ассетов и технические нюансы

Лонгрид для разработчиков, художников и контент-мейкеров

Графика игр: от концепта до финального кадра — полная картина

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

7 категорий ассетов 12 форматов файлов Готовые чек-листы

«Картинки игр» — это не одно понятие

Запрос «картинки игр» скрывает семь принципиально разных слоёв визуала. Скриншот для Steam-капсулы, спрайт-аटलс для 2D-платформера, нормальная карта для PBR-материала и концепт-арт для питча — это разные задачи, разные форматы, разные требования.

Путаница стоит дорого: художник отдаёт PNG вместо EXR для HDR-окружения,.level-дизайнер получает текстуры без mip-мапов, маркетолог скачивает 4K-рендер вместо векторного логотипа. Результат — переделки, срыв сроков, лишние гигабайты в билде.

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

Семь слоёв игрового визуала

Концепт-арт и референсы

Направление визуального стиля, силуэты, палитра, ключевые кадры. Работа на этапе пре-продакшена. Форматы: PSD, KRA, TIFF — с слоями, в высоком разрешении (4K+).

PSD/KRA TIFF 4K+

2D-спрайты и а틀асы

Персонажи, тайлы, эффекты, UI-иконки. Собираются в текстуры-аटलсы (sprite sheets) для батчинга draw-call’ов. Важны: power-of-two размеры, padding между кадрами, premultiplied alpha.

PNG WebP ASTC

3D-модели и меши

Геометрия: статические пропсы, скелетные меши, морф-таргеты. Требования: чистая топология, UV-развёртка без перекрытий, правильные нормали, LOD-группа. Форматы обмена: FBX, glTF/GLB, USD.

FBX glTF/GLB USD

PBR-текстуры и карты

Набор карт для физически корректного рендера: Albedo, Normal, Roughness, Metalness, AO, Height, Emission. Критично: линейное цветовое пространство для данных, sRGB только для альбедо, mip-мапы, сжатие BC/ ASTC.

EXR PNG 16-bit BCn/ASTC

VFX и партиклы

Текстуры для частиц (flipbook), шейдеры, трассы, декали, пост-процессы. Flipbook-а틀асы: строки = время, колонки = вариации. HDR-текстуры для аддитивных эффектов (огонь, магия).

PNG EXR Flipbook

UI/UX и иконки

Меню, HUD, инвентарь, навыки. Векторные исходники (SVG, Figma) → растрированные а틀асы под разные DPI. 9-slice scaling для панелей, SDF-шрифты, локализация под RTL/китайский.

SVG PNG @2x/@3x SDF

Промо-материалы

Капсулы Steam (460×215, 616×353), ключевые арты, скриншоты для стора, трейлеры, баннеры, соцсети. Строгие требования платформ: safe zones, отсутствие UI, цветовые профили sRGB, без альфа-канала для скриншотов.

JPG/PNG sRGB Safe zones

Пайплайн: как графика рождается и движется к движку

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

стайлгайд, технические
лимиты (трис, текс.память) Арт-директор,
продюсер 2. Продакшн Моделлинг, UV, бакинг,
текстуринг (Substance/Quixel),
риггинг, анимация 3D-художники,
тех. художники 3. Валидация Нейминг, пивот, масштаб,
UV-чеки, коллизии,
LODs, превью в движке QA, тех. художник,
лид арта 4. Импорт и настройка Import settings, сжатие,
материалы, префабы/блупринты,
адресная система, билд Тех. художник,
интегратор, CI/CD Итерации (фикс багов, оптимизация, арт-правки)

2D и 3D: разные миры, разные правила

2D-пайплайн

Источник: Рисование в Aseprite, Photoshop, Krita; вектор в Illustrator/Figma → растеризация.
Атласинг: TexturePacker, встроенные упаковщики движков. Padding 2-4 px, поворот спрайтов (allow rotation), trim transparency.
Анимация: По кадрам (frame-by-frame) или скелетная (Spine, DragonBones, Unity 2D Animation). Скелетная экономит память, но сложнее в пайплайне.
Сжатие: ASTC (мобильные), BC7 (десктоп/консоли), ETC2 (старые Android). Для UI — часто несжатый PNG или SDF.
Частые ошибки: NPOT-текстуры без mip-мапов, отсутствие padding → артефакты на границах, premultiplied alpha не там, где нужен.

3D-пайплайн

Источник: Blender, Maya, Max, ZBrush, Substance Painter/Designer. Обмен — FBX, glTF, USD, Alembic (кэш анимации).
UV и бакинг: Непересекающиеся UV (0-1 пространство), UDIM для героев. Бакинг: Normal, AO, Curvature, Position, ID — в EXR 16-bit/32-bit float.
LOD и импортёр: LOD0–LOD3 (редукция 50-70% полигонов на ступень), Screen Size thresholds. Настройка импортёра: Normal Map → OpenGL/DirectX, sRGB/Linear, Read/Write.
Сжатие текстур: BC1 (RGB), BC3 (RGBA), BC4/BC5 (1-2 канала: roughness, normal), BC6H/BC7 (HDR/качество). ASTC 4×4–12×12 на мобильных.
Частые ошибки: Двойные UV-шивы, ненормализованные нормали, отсутствие tangent space, не тот цветовой профиль при импорте.

Форматы файлов: что, зачем и когда

PNGLOSSLESS

Универсальный lossless с альфой. Для спрайтов, UI, концептов, промо-скринов. Не для HDR и не для финальных текстур в билде (слишком большой).

sRGB: да | Альфа: да | HDR: нет | Mipmaps: руками

WebPLOSSY/LOSSLESS

Меньше PNG на 25-35% при качестве. Поддерживает анимацию. Хорош для веб-билдов, мобильных ассетбандлов. Не все движки нативно читают без плагинов.

sRGB: да | Альфа: да | HDR: нет | Анимация: да

EXRHDR / FLOAT

Стандарт VFX и PBR-бакинга. 16-bit half / 32-bit float. Многоканальные (layers). Для Normal, Roughness, Position, HDRI окружения. В движок — после конвертации в BC6H.

sRGB: нет (linear) | Альфа: опц. | HDR: да | Лейеры: да

KTX2 / Basis UniversalGPU-READY

Контейнер для GPU-сжатых текстур (BCn, ASTC, ETC). Загружается напрямую в VRAM без декомпрессии на CPU. Supercompression (Zstd) уменьшает размер на диске. Стандарт для веба и мобильных.

sRGB/Linear: оба | Mipmaps: внутри | Сжатие: GPU-нативное

glTF / GLBSCENE

«JPEG для 3D». GLB — бинарный单一 файл со всей сценой: меши, материалы (PBR metallic-roughness), текстуры (встроены или внешние), анимации, скелеты, морфы. Нативная поддержка везде.

Меши: да | PBR: да | Анимация: да | Расширяемость: extensions

FBX / USDEXCHANGE

FBX — де-факто стандарт DCC→Engine (Unity, Unreal). USD — пиплайны крупных студий (Pixar, AAA), слои, неразрушительное редактирование, Hydra рендер-делегаты.

FBX: проприетарный | USD: открытый | Анимация: да | Материалы: базовые

Где взять ассеты: навигатор по задачам

Нужен прототип вчера

Unity Asset Store / Unreal Marketplace / itch.io / Kenney.nl / OpenGameArt. Фильтруй по лицензии (CC0, Royalty Free) и совместимости с версией движка.

Готовые префабыДемо-сценыЕсть код

Качественные PBR-материалы

AmbientCG (CC0), Poly Haven (CC0), Quixel Megascans (бесплатно для Unreal), Substance 3D Assets (подписка), Textures.com (лимиты бесплатно). Проверяй набор карт и разрешение.

Albedo+Normal+Rough4K-8KSeamless

3D-модели под конкретный стиль

Sketchfab (скачиваемые), TurboSquid / CGTrader (платные), SketchUp 3D Warehouse (архитектура), Ready Player Me (аватары), Mixamo (риггинг + анимации). Смотри топологию и UV перед покупкой.

FBX/glTFRiggedLODs?

Уникальный стиль — свой художник

ArtStation (найм), Upwork/Fiverr (бюджет), специализированные Discord/Telegram-сообщества. ТЗ: стильгайд, лимиты полигонов/текстур, нейминг, форматы поставки, этапы приёмки.

ТЗ обязательноЭтапы/маestonesIP assignment

Промо-материалы для стора

Сделай сам: встроенные инструменты движка (HighResScreenshot, Movie Render Queue), фото-режим в игре. Шаблоны: Steamworks docs, App Store Connect guidelines, Google Play Console. Safe zones — закон.

460×215 / 616×353sRGB JPG/PNGNo UI

Иконки и UI-киты

Game-icons.net (CC BY), Kenney UI packs, Streamline (платные, огромные наборы), Figma Community. Вектор → свой растрированный атлас под DPI проекта. SDF для текста.

SVG исходникиСогласованный стиль9-slice ready

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

1Текстурная память: считаем правильно

VRAM ≠ размер файла на диске. GPU хранит распакованные mip-цепочки в блок-сжатии (BC/ASTC). Формула оценки: Width × Height × 4 байта × 1.33 (mip chain) / Compression Ratio. BC7 = 8 bpp → коэф. 4×. ASTC 4×4 = 8 bpp, 8×8 = 2 bpp.

Пример: 2048² Albedo (BC7) ≈ 2048×2048×8/8 × 1.33 ≈ 5.6 MB VRAM
Normal (BC5) ≈ 5.6 MB
Roughness+Metal (BC5) ≈ 5.6 MB
Итого на материал: ~17 MB VRAM

2sRGB vs Linear — тихая ошибка

Albedo/Color/Emissive — в sRGB (гамма 2.2). Normal/Roughness/Metalness/AO/Height/Position — в Linear. Движок делает sample в линейном пространстве. Если Normal заимпорчен как sRGB — освещение ломается незаметно для глаза, но физически неверно.

sRGB (гамма)
Albedo, Emissive, UI, Skybox

Linear (данные)
Normal, Rough, Metal, AO, Height, Curvature, Position, ID

3Атласы и draw calls: баланс

Один большой атлас (4096/8192) — меньше draw calls, но больше VRAM, медленнее стриминг, проблемы с мip-мапами на краях тайлов. Несколько атласов по логическим группам (персонажи, окружение, UI, VFX) — гибче. Unity Sprite Atlas / Unreal Texture Array / Atlas Texture.

Правило большого пальца: батчь то, что рисуется вместе и часто. UI — отдельный атлас. Персонажи — по атласу на фракцию/уровень. VFX — flipbook-атласы отдельно. Проверяй через Frame Debugger / RenderDoc.

4Нейминг и версии: спасение от хаоса

Единая конвенция спасает недели поиска. Пример: env_rock_large_01_albedo_2k_v003.exr. Части: категория_объект_вариация_типкарты_разрешение_версия. Без пробелов, только lowercase, разделитель underscore. Версия — три цифры.

env_ prop_ chr_ vfx_ ui_

Пять ошибок, которые превращают графику в головную боль

Игнорирование mip-мапов на UI и 2D-спрайтах. Без них движок сэмплит полноразмерную текстуру на малых расстояниях — шиммер, моаре, лишняя нагрузка на текстуринг. Включай генерацию в импортёре или готовь заранее.
Передача финальных ассетов в исходных форматах (PSD, KRA, .blend, .spp). Движок их не съест. Экспорт только в рантайм-форматы. Исходники — в Perforce/Plastic/Git LFS с понятной структурой папок.
Покупка/скачивание ассетов без проверки топологии, UV и набора карт. «Looks good в превью» ≠ «работает в игре». Открывай в Blender/Substance: проверяй трис, UV-островки, отсутствие нулевых площадей, имена материалов.
Смешивание цветовых пространств в одном материале. Albedo в sRGB, Normal заимпорчен как sRGB, Roughness как Linear — результат непредсказуем. Настрой импортёр один раз, зафиксируй в документации пайплайна.
Отсутствие бюджета текстурной памяти на проект. «Загрузим, посмотрим» — путь к OOM на мобильных и консолях. Заведи таблицу: категория → кол-во → разрешение → формат сжатия → расчёт VRAM. Согласуй с тех. художником до продакшена.

«Картинки игр» — это инженерная дисциплина, замаскированная под искусство.

Каждый пиксель на экране прошёл путь: концепт → техническое задание → производство → валидация → импорт → сжатие → стриминг → сэмплинг шейдером → финальный цвет. Понимание этого пути отличает хаос от управляемого процесса.

Знай свои форматы Документируй пайплайн Бюджетируй VRAM Проверяй перед коммитом