Всім привіт, мене звуть Григорій Дядиченко і я технічний продюсер. Сьогодні хочеться обговорити підготовку 2д арту. Існує, скажімо так, хороший тон в плані підготовки графічних асетів. Виходячи з контексту технічних обмежень і зручності подальшої роботи. Більше мова про Unity3d звичайно, але багато речей працюють скрізь однаково і по суті змінюються в нюансах. Якщо вам цікава дана тема, то ласкаво просимо під кат!
Відразу обмовлюся, що в даній статті не буде якогось ноу-хау рішення. Швидше компіляція основних правил і технік, якими треба користуватися. Що ж, почнемо!
Ступінь двійки
Одне з найголовніших правил при підготовці арту - це текстури розміру ступеня двійки. Під ступенем двійки я розумію в даному випадку розміри типу 128х128, 1024x512 і так далі. Тобто кожна сторона текстури повинна в пікселях якимось ступенем 2.
Тут звичайно краще уточнювати завжди у програмістів чи сформують вони текстурний атлас автоматично, або ж дана текстура буде використовуватися «як є». Тому що якщо текстура не вкладається в атлас то в ідеалі її розміри повинні бути рівні ступені двійки. Для прикладу скажемо Spine анімація, так як вона вже є текстурним атласом.
Причин для цього досить багато. Починаючи від укладання текстур у відео-пам'ять і закінчуючи тим, що через принципи роботи сучасних алгоритмів стиснення текстур під різні пристрої текстура 1023х1024 буде займати більше місця в додатку, ніж текстура 1024х1024, тому що движок не може її стиснути.
Додавати скрізь альфу теж не добре. Якщо є можливість запхати атлас всі текстури в атлас розміру ступеня двійки без додавання альфа-каналу - це найкраще. Але часто просто додати альфи теж непогане рішення, яким би дивним не здавалося. Ми збільшуємо розміри текстури, але при цьому вона стає меншою і працює кращою. Звичайно ж цим краще не займатися програмістам, а враховувати саме художником, оскільки автоматичне «розтягування» та інше часто призводить до артефактів у візуалізації.
Текстурні атласи
Друга річ, якою важливо користуватися - це текстурні атласи. Текстурний атлас - це по суті супер текстуру, в якій лежить безліч окремих текстур для асетів. Вони використовуються і в 3д, і в 2д графіку.
У старі часи потрібно було користуватися спеціалізованим софтом і плагінами для цього. Зараз в Unity є Sprite Packer, який працює з коробки. Він автоматично формує текстурний атлас зі спрайтів. Важливо що з саме зі спрайтів. Тому якщо для якогось VFX текстура використовується, як текстура - не забуваємо про ступінь двійки.
Що прикольно, Sprite Packer Unity збирає не просто атлас. Всі спрайти пакуються в міші, що дозволяє по-перше, укладати текстури компактніше, по-друге, знизити альфа блендинг за рахунок того, що не малюється зайва альфа. Головний нюанс який варто враховувати - ця техніка не працює з UI, так як там завжди все малюється за допомогою квадратного мішу. Тому пакуючи атласи для UI спрайт пакером юніті потрібно прибирати галочки Allow Rotation і Tight Packing.
Основний плюс текстурних атласів у тому, що гпу оптимальніше відмальовує графіку. Об'єкти малюються в один Draw Call, текстури лежать у відео пам'яті компактніше і їх простіше завантажувати на gpu в цілому. Крім цього художникам не потрібно сильно паритися за ступінь двійки в цьому випадку, оскільки всі інструменти автоматично формують правильний розмір для оптимального стиснення.
Невеликим, я не скажу недоліком, а нюансом роботи з атласами, треба думати як їх пакувати, щоб максимум об'єктів використовуваних в атласі одночасно перебували в кадрі. Скажімо у вас є гра в якій між рівнями є магазин, там є деякі товари типу зброї для персонажа. Але спрайти з магазину в грі не використовуються. Всі їх краще скласти в окремий атлас від ігрових об'єктів. Так як припустимо ви поклали туди персонажа гри навіщось, тоді на запуску рівня разом з персонажем у відеопам'ять підуть ще й купа спрайтів, які на рівні ніколи не відобразяться. Тут знову-таки правило не залізне, так як якщо ресурсів ГПУ у вас достатньо, а важливіше знизити скажімо вагу збірки, то тоді звичайно можна змішувати собі на здоров'я, щоб отримати мінімальну кількість текстур.
Біль програмістів з градієнтами
Якщо це необхідно за візуальним стилем тощо, то це ніби не обговорюється. Я вже писав у статті про градієнти і нюанси роботи з ними, але там все ж немає однієї важливої речі. Glow. М'який glow. Мені здається, що як у веб-розробників вічне питання «як відцентрувати div?», то в ігрових це питання - «як зробити правильний Glow?». Тільки завдання для ігрових в рази складніше. Я для себе вивів просту техніку, яка базується на все тій же ідеї зі статті з акрилом. Як руки дійдуть треба буде оформити це в репозиторій.
Ідея в загальних рисах звучить так. Окремою камерою рендеримо об'єкт у сцені, який ми хочемо підсвітити. Зменшуємо текстуру до розміру типу 256х256, розмиваємо її гауссом, перефарбовуємо в колір глоу з урахуванням альфа каналу і малюємо розрахувавши uv за скрінспейс координатам. Це досить складно. Є ще техніки «намалювати весь глоу» - дорого за вагою збірки, дешево по гпу. Використовувати ідею з постпроцесингу, що глоу це по суті emission кромка плюс bloom. І так далі. Загалом це складно. Те що це складно не привід це не робити. Але якщо графічний стиль не постраждає, якщо тінь на кнопці або панелі буде «жорсткою» - краще робити жорстку тінь. Програмісти будуть дуже раді.
Слідкуйте за пивотами
Це важливо скрізь завжди і в 2д, і в 3д. Узгоджуйте з програмістами, як вони планують розпологати об'єкт, і де потрібно поставити пивот. З текстурами - це більше до програмістів і можна просто мати на увазі. Тому що в юніті в налаштуваннях текстури є можливість задати пивот. А ось з тими ж Spine анімаціями пивот задається в спайні. І це дуже погано, коли програмісти починають милицями компенсувати позиції роблячи зайві трансформи або ще якусь дичину, замість того щоб відразу поставити пивот, де треба. Тому за цим дуже важливо і дуже потрібно стежити, як з боку програмістів, так і з боку арту, тому що надалі це дуже сильно спростить всім життя.
Замість ув'язнення
Існує ще багато інструментів типу того ж Spine, щоб робити оптимально анімації, тому що пнг секвенції - це дуже дорого. Або ж технік, які застосовуються в контексті конкретної гри типу «палітр» (якщо кількість доступних кольорів обмежена, то можна витрачати менше правил на їх зберігання) Але розповідь про окремі нюанси роботи з ними - це навіть не одна стаття.
Остання порада, яку я б дав ігровим художникам пам'ятати про те, що в тих же мобільних іграх для вас максимальний дозвіл 2048х2048. Топові пристрої вже спокійно ставляться до 4к текстурам, але зазвичай мобільні ігри робляться не для останньої лінійки айфонів.
Дякую за увагу. Про щось міг забути, так що буду радий, якщо ви напишете про це в коментарях.
