Створення стилізованих (Hand-painted) текстур для графіки ігор

Hand-painted текстури ламають динамічне освітлення, якщо не врахувати намальовані тіні. Коли ви запікаєте світло в albedo, будь-який рушійний Directional Light з іншого кута дає подвійне засвічення: одна сторона — намальований хайлайт плюс реальне світло, інша — подвійне затемнення. Це стандартний біль студій, які переходять з PBR на стилізовану графіку. Рішення — minimal lighting (ambient-only) або відключення динамічних тіней на hand-painted ассетах. За 10 років ми зробили понад 50 проєктів для мобільних, PC та консолей: World of Warcraft, Hearthstone, Wildstar — всі використовують hand-painted не як спрощення, а як художню мову.

Як hand-painted текстури впливають на динамічне освітлення?

У PBR-пайплайні albedo не містить освітлення — рушій розраховує його в рантаймі. У hand-painted текстурі освітлення є частиною самої текстури: highlights намальовані в потрібних місцях, тіні — запічені в albedo, обідок light rim — доданий вручну. Якщо поставити hand-painted ассет під динамічний Directional Light з протилежного напрямку від намальованого освітлення, результат буде дивним. Тому в стилізованих іграх використовують minimal lighting (ambient-only з дуже слабким Directional) або відключають dynamic shadow casting на ассетах з hand-painted текстурами. На мобільних платформах це дає приріст продуктивності до 30% за рахунок відсутності розрахунку тіней.

Чому hand-painted текстури потребують особливого підходу до mip-mapping?

Hand-painted текстури містять намальовані тонкі лінії — contour lines, edge highlights, thin shadows. При генерації mip-map рівнів ці лінії розмиваються. На mip level 3–4 контур завтовшки 2px стає брудним сірим плямою. Рішення — або малювати товще (мінімум 4–6px для контурів на 1K текстурі), або використовувати Anisotropic Filtering x16 + менший mip bias, або зберігати контури в окремому texture layer з незалежними налаштуваннями фільтрації. Ця проблема не зустрічається в PBR, де normal-карта несе дрібні деталі, а в hand-painted запічено все. Економія часу при правильному налаштуванні mip-map — до 2 днів на одного персонажа.

Texel density та його значення для hand-painted

Для hand-painted texel density важливіший, ніж для PBR: деталі намальовані вручну і мають конкретний очікуваний масштаб на екрані. Якщо texel density не збігається з розрахунковим — намальовані деталі або занадто великі (видно кожен мазок), або втрачаються (розмита пляма замість деталей). Стандарт: 512 px/m для hero-ассетів, 256 px/m для background. Hand-painted текстури в середньому в 2–3 рази легші за вагою, ніж повноцінний PBR-сет, що дає виграш у продуктивності до 30% на мобільних платформах. При замовленні пакету з 10 текстур ви економите до 40% бюджету за рахунок об'єднання UV і повторного використання палітри.

Інструменти та техніка роботи

Hand-painted текстури малюються або повністю в 2D, або в 3D-просторі безпосередньо на меші.

• 3D painting через Substance Painter — зручний тим, що дозволяє малювати прямо на меші з урахуванням UV-розгортки, не думаючи про шви. Режим Paint з вимкненим PBR preview і ручним керуванням Diffuse — робочий спосіб для hand-painted workflow. Шари використовуються так само, як у Photoshop: базовий колір → тіні → хайлайти → додаткові деталі → фінальний AO.
• Photoshop з UV-mesh overlay — класичний підхід. UV-розгортка експортується як PNG і накладається як направляюча. Художник малює по ній, бачачи, де знаходяться шви. Вимагає досвіду: потрібно візуалізувати в голові, як 2D-пікселі будуть виглядати на 3D-поверхні.
• 3D Coat — спеціалізований інструмент для texture painting з хорошою підтримкою stencil-кистей і шарів.

Одна з ключових технік у hand-painted стилі — cell shading через контурні лінії в текстурі. Це не контурний шейдер у рушії — це намальовані лінії прямо в albedo по ребрах форми. Перевага: працює без спеціального шейдера, добре читається навіть при поганому освітленні, не залежить від силуету (контур видно і на внутрішніх ребрах). Недолік: при зміні геометрії контури потрібно перемальовувати вручну.

Що входить у створення hand-painted текстур

Аналіз референсів та арт-стилю: визначаємо палітру, товщину контурів, ступінь контрасту. UV-розгортка: розкладка швів з урахуванням подальшого ручного малювання. Ручне малювання albedo: тіні, хайлайти, контури — все вручну, шарами. Оптимізація під mip-map: коригування товщини ліній, налаштування Anisotropic Filtering. Фінальна перевірка в рушії: тест під різним освітленням, на різних mip-рівнях. Здача вихідників: PSD або .spp зі збереженням шарів.

Як ми працюємо: стек і процес

Ми використовуємо єдиний пайплайн для всіх проєктів. Етапи:

1. Аналітика. Вивчаємо референси, визначаємо очікуваний texel density та контраст.
2. Проектування UV. Розкладаємо шви так, щоб мінімізувати видимі розриви на намальованих лініях.
3. Малювання в 3D-painter або Photoshop. Малюємо шари: base color → shadows → highlights → details → AO.
4. Оптимізація. Перевіряємо mip-map у рушії, коригуємо товщину ліній, налаштовуємо фільтрацію.
5. Деплой. Здаємо вихідники та фінальні текстури в потрібних форматах.

Hand-painted текстури в середньому в 2–3 рази легші за вагою, ніж повноцінний PBR-сет, завдяки відсутності окремих карт нормалей та roughness. Це дає виграш у продуктивності на мобільних платформах.

Типові помилки в hand-painted текстурах

• Занадто м'яке освітлення. Контраст має бути вищим, ніж у реальності. Малюйте із запасом.
• Неправильний кут освітлення. Умовне джерело світла в albedo має бути однаковим для всіх ассетів на сцені.
• Відсутність micro-detail. Навіть у простому стилі потрібен шар дрібних деталей — невеликі варіації тону, тонкі лінії, точкові хайлайти.

У своїй практиці ми зіткнулися з задачею: для mobile RPG у стилі hand-painted потрібні були NPC з обмеженням 512x512 albedo. На такому розширенні фотореалістичні деталі втрачаються. Натомість використовувався підхід: три тональних рівні (тінь, півтінь, світло) + намальований контур 2px + кілька характерних деталей (гудзик, візерунок, складка). У рендері виглядало переконливо при камері в півтора метра від персонажа — саме такий відступ камери був у грі.

Зв'яжіться з нами, щоб обговорити ваш проєкт. Ми допоможемо визначити стиль і розрахувати терміни. Замовте створення стилізованих текстур — отримайте консультацію щодо вашого арт-стилю. Також ви можете замовити пробне малювання одного ассета, щоб оцінити якість та швидкість роботи.

Текстурування та матеріали

Художник надсилає асет у рушій — і він виглядає як пластикова іграшка. Ми це бачили десятки разів: правильна геометрія, хороша UV-розгортка, але матеріал «не грає». У 90% випадків причина — у нерозумінні PBR-каналів. За 10+ років роботи над мобільними та PC-проектами ми виробили пайплайн, який гарантує передбачуваний результат у будь-якому освітленні. Текстурування для сучасних ігор — це робота з фізично коректними матеріалами, процедурними системами та жорстким FPS-бюджетом. Наш досвід включає понад 50 завершених ігрових проектів — від інді до AAA. Зв'яжіться з нами — обговоримо, який пайплайн текстурування краще підійде вашому проекту з PBR-матеріалами для ігор.

Чому PBR-матеріали є стандартом для сучасних ігор?

PBR (Physically Based Rendering) — не художній стиль, а набір правил, за яких матеріал поводиться фізично передбачувано за будь-якого освітлення. В Unity (URP/HDRP) та Unreal це стандарт за замовчуванням. Використання PBR скорочує час на переробку на 30%: матеріал, запечений за правилами, не потребує повторного налаштування при зміні середовища. На відміну від legacy-підходів, PBR дає єдність у команді — художник і технар говорять однією мовою каналів.

Що входить до PBR-пайплайну: Metal/Roughness vs Specular/Glossiness?

Два основні workflow:

• Metal/Roughness (використовується в Unity URP, Unreal): Base Color — дифузний колір без інформації про освітлення. Metallic — бінарна карта: 0 (діелектрик) або 1 (метал). Roughness — 0 дзеркальна поверхня, 1 матова. Normal Map — симуляція рельєфу. AO (Ambient Occlusion) — затемнення в заглибленнях.
• Specular/Glossiness — старий workflow, використовується рідше, в основному legacy-проектах або при конверсії з Photoshop.

Граничні значення для діелектриків: base color не темніший за #383838 і не світліший за #E0E0E0 — інакше матеріал починає «світитися» або «провалюватися» в темряву при HDR-освітленні. Для металів base color = колір відбиття (золото — теплий, хром — нейтральний).

— з документації Unreal Engine: «PBR — єдиний спосіб отримати передбачувані відбиття на всіх платформах».

Як Substance Designer прискорює створення тайлових матеріалів?

Якщо Substance Painter — ручне фарбування по готовій геометрії, то Substance Designer — програмування матеріалу. Нодовий граф на виході дає набір текстурних карт, які генеруються алгоритмічно. Designer в 5 разів швидший за ручне текстурування при повторному використанні: один граф з параметрами — розмір каменю, зазор, замшілість, вологість — дає сотні варіацій. Замість малювання 2K-текстури руками художник збирає граф, який можна:

• Параметризувати — один граф «кам'яна кладка» з повзунками: розмір каменю, зазор, ступінь замшілості, вологість.
• Масштабувати без втрати якості — рендеринг в будь-якій роздільній здатності (2K → 4K для cinematic).

Будівельні блоки графа в Designer:

• Shape nodes — геометричні примітиви (прямокутник, коло, полігон). Основа для тайлових патернів.
• Noise nodes (Perlin, Gaussian, Cells, Voronoi) — органічні нерегулярності.
• Tile Generator / Splatter — ключові ноди для створення патернів з контролем зміщення, ротації, масштабу.
• Warp nodes — деформація по карті нормалей або градієнту (потоки, зсуви, тріщини).
• Blend — змішування шарів з маскуванням (фінальний композитинг).
• Normal Map nodes — синтез нормалей з height-даних.

Типовий граф для матеріалу «промисловий метал»:

[Shape: прямокутна панель]
    ↓
[Tile Generator: сітка панелей з невеликим offset]
    ↓
[Warp: мікровибоїни від Gaussian noise]
    ↓
[Blend: додавання curvature-маски → іржа по ребрах]
    ↓
[Blend: потоки по Directional Warp]
    ↓
[Export: BaseColor / Metallic / Roughness / Normal / AO]

Такий граф перевикористовується в різних проектах без переробки при зміні роздільної здатності. Один граф економить до 40% часу на повторювані текстури.

Як уникнути втрати продуктивності при роботі з текстурами?

Головна помилка — завищена роздільна здатність текстур і неправильний формат стиснення. Порівняльна таблиця по платформах:

Ніколи не експортувати PNG в продакшн без компресії — це прямий витрата пам'яті. BC7 для RGBA дає хорошу якість при 8 bpp. ASTC для мобайла налаштовується за співвідношенням quality/size. Додаткова таблиця порівняння інструментів:

Як відбувається процес роботи: від референсу до інтеграції?

1. Аналіз референсів та референсної геометрії — визначення PBR-каналів, стилю, обмежень платформи.
2. Створення UV-розгортки та бейкінг — запікання AO, Normal, Curvature, Thickness з урахуванням texel density.
3. Текстурування — Painter для hero, Designer для тайлів, hand-painted якщо потрібно.
4. Експорт та оптимізація — стиснення в цільовий формат, атласування, LOD-текстури, тест на цільовій платформі.
5. Підтримка при інтеграції — налаштування матеріалів у рушії, налагодження при проблемах з освітленням.

Що входить в роботу та гарантії якості?

• Deliverables: PBR-сети текстур (Base Color, Metallic, Roughness, Normal, AO) під Metal/Roughness workflow, параметричний граф Substance Designer (якщо потрібно), повна документація з налаштування матеріалів в Unity/Unreal, підтримка при інтеграції з тестуванням на цільовій платформі.
• Гарантія: кожен матеріал перевіряється в рушії під трьома різними умовами освітлення. Наш досвід — 10+ років, 50+ проектів, включаючи проекти з AR Foundation та XR Interaction Toolkit.
• Строки: від 3 до 14 днів залежно від складності (один тайловий матеріал в Designer — 3–5 днів, hero asset з UDIM — до 14 днів). Вартість розраховується індивідуально.

Замовте текстурування вашого асета — ми гарантуємо передбачуваний результат без переробок. Отримайте консультацію щодо відповідного пайплайну вже сьогодні.