2D-графика: что это, где применяется и как освоить

Главное заблуждение новичка: если рисунок красив в редакторе, работа закончена. На деле персонаж, нарисованный на холсте в 4000 пикселей, на экране телефона занимает пару сотен, вокруг него может появиться светлая кайма, а атлас весом 3 МБ на диске занимает в видеопамяти в несколько раз больше. Поэтому подготовку к движку осваивают так же осознанно, как рисунок.

Кому и когда пригодится навык

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

Другой подход нужен, если камера в игре вращается вокруг объектов, — тогда уместнее 3D. Ретростилистика с ручной расстановкой каждой точки — отдельная техника, пиксель-арт, со своими правилами масштабирования. Для рекламного ролика или анимированного баннера ближе моушн-дизайн. О профессиях аниматора и иллюстратора на сайте есть отдельные статьи; здесь речь о навыке, который применяют в своей работе.

Растр или вектор

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

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

Учебный пример: персонаж для мобильного платформера

Учебная ситуация: разработчик делает платформер для Android, и ему нужен герой с анимациями покоя и бега. Рисовать каждый кадр бега вручную долго, поэтому выбрана скелетная анимация: персонаж разбит на части — голову, торс, плечи, предплечья, кисти, бёдра, голени, — а программа двигает их костями.

Художник рисует героя в слоях, и каждая часть получает запас формы на стыках: плечо заходит под торс, чтобы при повороте руки не открылась дыра. Затем части экспортируют, собирают в Spine скелет и анимации и упаковывают картинки в атлас — один большой файл, где все детали лежат рядом. В упаковщике Spine по умолчанию максимальный размер страницы атласа — 2048 × 2048, между деталями рекомендуют оставлять 2 пикселя, а подгон страницы под степень двойки назван требованием «некоторых игровых движков» (документация Spine Texture Packer).

По справочнику форматов текстур Unity несжатый RGBA 32 bit тратит 32 бита на пиксель, ETC2 — 8, ASTC 6×6 — 3,56. Для атласа 2048 × 2048 это примерно 16 МБ, 4 МБ и 1,8 МБ соответственно, без учёта мип-карт. Unity отдельно предупреждает: на старых Android-устройствах без поддержки ASTC текстура распаковывается в несжатый RGBA 32 bit (выбор формата по платформе). Проверка простая: посмотрите в инспекторе движка итоговый формат и объём атласа и запустите сцену на слабом телефоне.

Spine: что умеет недорогая версия

У лицензий Spine, популярного редактора скелетной 2D-анимации, есть неочевидные границы. На странице покупки в сентябре 2026 года версия Essential стоит 69 долларов по скидке (обычная цена 99), Professional — 379 (обычная 449). Сетки, деформации, веса, отсечение, ограничения IK, трансформаций, путей и физики есть только в Professional. Там же сказано, что Essential не может сохранить или экспортировать проект, в котором есть функции Professional.

Развевающийся плащ, гибкий хвост, нога, которая сама встаёт на ступеньку, — это сетки и IK, то есть Professional. Если студия пришлёт вам проект с сетками, в Essential вы его не сохраните. Лицензионное соглашение редактора в редакции от 5 апреля 2025 года добавляет два условия. Первое: лицензия Essential или Professional выдаётся одному названному пользователю, программу можно поставить максимум на два компьютера. Второе: эти версии доступны только тем, у кого выручка, инвестиции и прочее финансирование за последние 12 месяцев меньше 500 тысяч долларов; сверх этого нужна Enterprise. Встраивать библиотеки Spine в свою игру можно по разделу 2 того же соглашения, то есть при наличии лицензии редактора.

Откуда берётся кайма по контуру спрайта

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

Бороться с этим можно двумя путями. Первый — заполнить прозрачные пиксели цветом соседних непрозрачных. В Unity за это отвечает параметр Alpha Is Transparency, который расширяет цветовые каналы, чтобы избежать артефактов на краях (настройки импорта спрайта). В Godot то же делает параметр Fix Alpha Border, а в упаковщике Spine — Bleed. Второй путь — премультиплицированная альфа, когда цвет каждого пикселя заранее умножен на его прозрачность. Но тогда и движок должен смешивать картинку тем же способом: в Godot для этого нужен CanvasItemMaterial с подходящим режимом наложения (импорт изображений в Godot). Если экспорт и движок настроены по-разному, края портятся снова, поэтому настройку согласуют с программистом один раз и записывают.

В каком порядке осваивать

Каждый шаг ниже опирается на предыдущий. Сначала глаз и рука, потому что без понимания формы и света никакая настройка не спасёт картинку. Затем интерфейс, где ошибки видны сразу. Движок нужен до анимации, чтобы вы с самого начала проверяли рисунок там, где его увидит игрок. Упаковку и сжатие оставляют на конец: их имеет смысл настраивать, когда накопилось несколько спрайтов.

1. Рисунок, свет и цвет: предметы из простых форм, затем персонаж в трёх ракурсах. Для начала хватит бесплатной Krita.
2. Вектор и интерфейс: иконки на одной сетке, кнопка и рамка, которые растягиваются без искажения углов.
3. Импорт в движок: перенесите спрайты в Godot или Unity, задайте всем одинаковый масштаб в пикселях на единицу и посмотрите на реальном экране.
4. Анимация: сначала покадровый цикл из 6–8 кадров, потом тот же цикл скелетом.
5. Атлас и сжатие: соберите все спрайты сцены в атлас, сравните объём при разных форматах и проверьте края.

Если рисовать почти не умеете, первый шаг стоит пройти с преподавателем. На курсе «Основы 2D-графики» от Skillbox за три месяца в Photoshop разбирают композицию, линейный рисунок, светотень, колористику, фактуры и базовую анатомию, а итогом становится портфолио из четырёх-шести работ. Игровой экспорт там не заявлен, поэтому шаги 3–5 придётся осваивать отдельно.

Упражнения и типичные ошибки

Первое упражнение — один предмет в размерах 512, 128 и 48 пикселей: если на 48 он не читается, упростите силуэт. Второе — набор интерфейса из кнопки, рамки окна и шести иконок. Третье — персонаж из шести-восьми частей с анимацией покоя. Работу проверяйте в движке, а не в редакторе, на тёмном и на светлом фоне: так сразу видна кайма.

Типичные ошибки повторяются. Новички рисуют мелкие детали, которые пропадают при уменьшении. Не оставляют перекрытия на суставах, и в анимации появляются щели. Задают спрайтам разный масштаб, и персонаж оказывается ниже двери. Забывают про отступы в атласе, и к краю детали подмешивается соседняя.

Тем, кому ближе вектор и интерфейсы, подойдёт программа с живыми занятиями. На курсе «2D-дизайнер с ИИ» Академии ТОП восемь месяцев работают в Photoshop, Illustrator и Figma: CG-арт, flat-графика, 2D-персонажи, изометрия, иконки и типографика. Игровая графика и анимация в описании программы не указаны, а число проектов для портфолио на странице не раскрыто — уточните это у школы.

Как выбрать обучение

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

Инди-разработчику, который сам пишет код, полезно посмотреть на 2D с другой стороны. На курсе «Разработка игр на движке Flutter: Flame» от Merion Academy за два месяца при нагрузке 2–5 часов в неделю проходят 11 блоков, среди них спрайты и анимации, коллизии, уровни и звук. Рисовать там не учат, зато становится понятно, в каком виде программист ждёт от художника графику.

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

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

Как навык влияет на доход

Надёжной зарплатной статистики по навыку нет: открытые выборки по должности «2D-художник» крошечные — на Dream Job в 2026 году по ней всего два отзыва (dreamjob.ru). Полезнее понимать, какие задачи навык открывает. Инди-разработчик экономит на аутсорсе графики прототипа. UI-дизайнер берёт заказы на игровые интерфейсы, где нужны не только макеты, но и файлы под движок. Иллюстратор со знанием Spine и атласов претендует на вакансии 2D-художника или аниматора в игровых студиях, а не только на заказы иллюстраций.

Ещё один путь — продавать готовые наборы ассетов. По соглашению с поставщиками Unity Asset Store (редакция от 13 апреля 2026 года) автор получает 70 % цены продажи за вычетом возвратов, банковских комиссий и налогов; при выплатах банковским переводом раз в квартал сумма меньше 250 долларов переносится на следующий квартал. Проверьте заранее, доступны ли выплаты в вашей стране. Чтобы оценить зарплаты в своём городе, смотрите вакансии с фильтром по региону и опыту, сравнивайте медиану, а не среднее, и отмечайте, указана сумма до вычета налога или на руки.