Пиксельная или векторная графика: выбор стиля для 2D-игры
Пиксельная и векторная графика — это разные техники создания изображений, а не просто два внешних вида. Пиксельная графика — это цвет, расставленный вручную на фиксированной сетке: каждая точка — отдельное решение, разрешение жёстко задано, а результат воспринимается как авторская ретро-эстетика. Векторная графика строится из математических контуров и заливок, у неё нет фиксированного разрешения, и она остаётся чёткой на любом экране, что подходит для чистого, современного, плоского стиля. Выбор зависит не от того, что объективно лучше, а от нужной эстетики, способа анимации и диапазона экранов, на которых игра должна хорошо выглядеть. Пиксельную графику анимируют покадрово из спрайт-листов, векторную обычно привязывают к скелету и анимируют интерполяцией. Это руководство объясняет, как работает каждый подход, чем они отличаются в масштабировании, размере файлов и анимации, и какой стиль какой 2D-игре подходит.
Пиксельная и векторная графика — это разные техники создания изображений, а не просто два внешних вида, и различие между ними структурное, а не косметическое. Пиксельная графика — это цвет, расставленный вручную на фиксированной сетке: каждая точка — отдельное решение, разрешение жёстко задано, а результат воспринимается как рукотворный и ретро. Векторная графика строится из математических контуров и заливок, поэтому у неё нет фиксированного разрешения и она остаётся чёткой на любом экране. Выбор редко сводится к тому, что объективно лучше: он зависит от нужной эстетики, способа анимации и диапазона устройств, на которых игра должна хорошо выглядеть.
Это руководство о выборе между двумя основными стилями. О том, какими инструментами их создавать, читайте в обзоре лучших бесплатных инструментов для 2D-графики. О том, как заставить готовую графику двигаться, рассказывает обзор инструментов для спрайт-анимации.
Пиксельная графика: каждая точка — решение
Пиксельная графика — это растровое изображение, которое рисуют по одному пикселю при намеренно низком разрешении, обычно ограниченной палитрой. Сама дисциплина и есть суть: из-за небольшого разрешения один пиксель не на месте меняет читаемость спрайта, поэтому художник контролирует каждую точку. Персонаж может быть высотой 16, 32 или 64 пикселя, и всё изображение — фиксированная сетка пикселей.
Отсюда три свойства.
Во-первых, у пиксельной графики есть собственное разрешение. Спрайт 32×32 — это ровно 32 пикселя в ширину и высоту. Он не масштабируется бесконечно; это конкретная сетка.
Во-вторых, палитра обычно ограничена. Многие художники работают фиксированным набором цветов — 8, 16 или 32 — и ради эстетики, и как ограничение, которое заставляет делать читаемые силуэты. Работа в жёстких рамках — то, что придаёт стилю ясность.
В-третьих, края резкие, а не сглаженные. По умолчанию вдоль контура нет антиалиасинга; переходные пиксели художник расставляет сам, чтобы плавно передать изгиб. Эта выверенная вручную гладкость краёв во многом определяет ощущение от пиксельной графики.
Векторная графика: геометрия, а не точки
Векторная графика рисуется контурами — точками, кривыми Безье и залитыми областями, заданными математикой, — а не сеткой цветных точек. Поскольку изображение — это описание форм, у него нет собственного пиксельного разрешения. Один и тот же векторный рисунок остаётся чётким и на экране телефона, и на мониторе 4K, потому что отрисовщик заполняет фигуры при любом нужном размере.
Расплата в том, что игры редко рисуют вектор напрямую во время работы. Большинство движков работает с растровыми текстурами, поэтому векторную графику обычно растеризуют — преобразуют в пиксельное изображение — при подходящем разрешении и импортируют как спрайт. Векторный файл остаётся редактируемым оригиналом; растеризованный спрайт показывает сама игра. Некоторые движки умеют отображать вектор напрямую, но экспорт в PNG нужных размеров — распространённый и универсальный путь.
Векторная графика подходит для чистых линий, плоских цветов и геометричных форм. Это естественная среда для современного минималистичного образа и для арта, который должен оставаться чётким на множестве экранов.
Чем они отличаются
| Пиксельная графика | Векторная графика | |
|---|---|---|
| Основа | Растровая сетка пикселей | Математические контуры и заливки |
| Разрешение | Фиксированное (спрайт 32×32 и есть 32×32) | Нет — масштабируется до любого размера |
| Масштабирование | Чистое только при целом множителе; иначе размытие или мерцание | Чёткое при любом размере |
| Палитра | Обычно небольшая и выверенная | Фактически не ограничена |
| Типичный формат | PNG (без потерь), GIF/APNG для превью | SVG (оригинал), экспорт в PNG для движка |
| Размер текстур | Очень маленький | Зависит от целевого разрешения растеризации |
| Какая эстетика | Ретро, рукотворная, инди, ностальгическая | Чистая, современная, плоская, мобильная казуальная |
Проблема масштабирования
Это практическая суть пиксельной графики, и её стоит понять, прежде чем выбирать стиль.
Пиксельная графика выглядит правильно, когда её масштабируют целым числом — в 2, 3, 4 раза — по ближайшему пикселю: каждый исходный пиксель становится чистым блоком, и края остаются резкими. Масштабируйте тот же спрайт в 1,5 раза или включите гладкую билинейную фильтрацию — и изображение ломается: края размываются, а при нецелых множителях каждый исходный пиксель отображается на разное число пикселей экрана, поэтому спрайт мерцает и дрожит при движении. Сохранить пиксельную графику чёткой при произвольных разрешениях — известная трудная задача, именно поэтому в 2D-движках есть «пиксель-перфект» камеры и опции целочисленного масштабирования.
Векторная графика полностью обходит эту проблему. Поскольку формы — геометрия, отрисовщик чисто заполняет их при любом целевом разрешении, и один и тот же арт выглядит резким на любом устройстве. Цена в том, что при преобразовании вектора в текстуру приходится выбирать целевое разрешение растеризации, и совсем мелкие детали, хорошо читающиеся в векторном редакторе, могут не пережить растеризацию в маленький спрайт.
Анимация: покадровая против скелетной
Два стиля тяготеют к разным способам анимации, и это стоит учитывать при выборе.
Пиксельную графику почти всегда анимируют покадрово. Каждая поза — отдельный рисунок, а последовательность упаковывается в спрайт-лист — сетку кадров, которую движок перебирает. Плюс — полный контроль: каждый кадр ровно такой, как вы нарисовали. Цена — труд: каждый кадр каждой анимации рисуется вручную, а чем больше спрайт, тем больше пикселей перерисовывать на кадр.
Векторную графику обычно анимируют скелетом. Арт разбивают на части (рука, голова, торс), привязывают к костям, и компьютер рассчитывает промежуточные кадры. Это быстрее в производстве, даёт файлы меньшего размера и упрощает смешивание анимаций, но подходит персонажам из раздельных частей лучше, чем персонажам с плотной сплошной штриховкой. Ведущий инструмент скелетной анимации — Spine; бесплатная альтернатива — DragonBones. Обзор инструментов спрайт-анимации разбирает оба подхода подробно.
Частая ошибка — выбирать способ анимации до стиля арта. Стиль обычно сам определяет способ: детальным пиксельным персонажам нужна покадровая прорисовка; чистым раздельным векторным — скелет.
Что используют известные игры
Несколько конкретных ориентиров помогают откалибровать два образа — и тут есть частая ловушка: нарисованную от руки графику ошибочно называют пиксельной или векторной.
| Стиль | Примеры |
|---|---|
| Пиксельная графика | Celeste, Stardew Valley, Hyper Light Drifter, Terraria |
| Векторная графика | Angry Birds, Cut the Rope, множество браузерных и мобильных казуальных игр |
| Ручная роспись / ручная отрисовка (не то и не другое) | Hollow Knight (расписана от руки), Cuphead (традиционная покадровая отрисовка) |
Третья строка важна. Hollow Knight и Cuphead часто расплывчато называют «2D-артом», но ни одна из них не сделана в пиксельной или векторной графике — обе расписаны и нарисованы от руки. Если ваш ориентир — такая игра, перед вами третий производственный процесс (цифровая живопись или классическая анимация), а не выбор «пиксели или вектор», которому посвящено это руководство.
Что выбрать вам
- Хотите ретро, рукотворную индивидуальность → пиксельная графика. Ограниченная палитра и расставленные вручную пиксели создают выверенный, ностальгический образ, и на этом пути маленькие инди-команды создали одни из самых узнаваемых игр в индустрии.
- Хотите чистый, современный, плоский образ → векторная графика. Плоский цвет и чёткая геометрия подходят современной мобильной и казуальной эстетике и остаются резкими на любом экране.
- Целитесь в широкий диапазон размеров экрана → векторная графика. Она растеризуется чисто при любом разрешении и полностью снимает проблему чёткости при масштабировании.
- Нужны самые маленькие текстуры → пиксельная графика. Спрайт 32×32 занимает совсем мало места, что важно для объёма хранения, времени загрузки и памяти на слабых устройствах.
- Будете анимировать покадрово и хотите полный контроль → пиксельная графика в паре с редактором спрайт-листов.
- Хотите анимировать на костях и переиспользовать риги → векторная графика в паре со скелетным инструментом вроде Spine или DragonBones.
Частые ошибки
| Ошибка | Что идёт не так | Что делать вместо этого |
|---|---|---|
| Масштабирование пикселей со сглаживанием | Размытые спрайты, мерцающие края | Используйте фильтрацию по ближайшему пикселю и целочисленное масштабирование; добавьте пиксель-перфект камеру |
| Выбор инструмента до стиля | Вы боретесь с программой ради образа, под который она не создана | Сначала решите эстетику, потом берите инструмент и способ анимации |
| Путаница: ручная роспись вместо пикселей или вектора | Неверный производственный план, неподходящие инструменты | Классифицируйте честно — расписанная от руки 2D — отдельный процесс |
| Слишком мелкая растеризация вектора | Детали пропадают или мерцают при увеличении | Экспортируйте в максимальном отображаемом размере или в нескольких плотностях |
| Предположение, что вектор «проще» | Чистый рисунок и риггинг — сами по себе навыки | Закладывайте время на дисциплину рисунка и скелетную настройку, а не только на пиксели |
Как сюда встроен Egmatic
Какой бы стиль вы ни выбрали, арт — лишь исходный материал для игры, а не сама игра, и работа после арта отнимает большую часть времени. Вы импортируете спрайты, расставляете их в сценах, подключаете анимации и запускающую их логику, а затем полируете то, как игра ощущается.
Egmatic создан именно для этой последующей работы. Это 2D-ориентированная IDE и движок, а не графический редактор: спрайты, которые экспортирует ваш арт-инструмент, становятся ассетами в редакторе сцен с предпросмотром в реальном времени, поэтому можно подгрузить спрайт-лист, запустить его анимацию, увидеть движение и поправить сцену за секунды, а не за цикл сборки. Если ваша цель — довести 2D-игру до конца, то есть превратить арт в любом стиле во что-то играбельное, для этого Egmatic и сделан. А сам арт удобнее создавать в одном из бесплатных инструментов для 2D-графики.
Вывод
Пиксельная и векторная графика различаются структурно, а не только внешне. Пиксельная — фиксированная сетка расставленных вручную точек, чисто масштабируется только целым числом и анимируется покадрово; векторная — геометрия, которая масштабируется до любого размера и обычно анимируется на скелете. Берите пиксельную для рукотворного ретро-образа и маленьких текстур; берите векторную для чистого современного вида и чёткости на любых экранах. И помните, что третья категория — расписанная и нарисованная от руки 2D — не относится ни к одной из них, поэтому классифицируйте ориентир честно, прежде чем выбирать инструмент. О том, чем создавать арт, читайте в обзоре бесплатных инструментов для 2D-графики; о том, как заставить его двигаться, — в обзоре инструментов спрайт-анимации.
Источники
- Пиксельная графика — растровое изображение, рисуемое при фиксированном низком разрешении ограниченной палитрой, где каждый пиксель ставится намеренно — Wikipedia: Pixel art
- Векторная графика представляет изображения математическими контурами и формами, а не сеткой пикселей, и не зависит от разрешения — Wikipedia: Vector graphics
- Пиксельную графику нужно масштабировать целым числом с фильтрацией по ближайшему пикселю; нецелое масштабирование и сглаживание вызывают размытие и мерцание, поэтому движки предлагают пиксель-перфект камеры и целочисленное масштабирование окна — Unity 2D Pixel Perfect, Godot: Multiple resolutions
- SVG — стандартный векторный формат; игровые движки обычно растеризуют векторную графику в PNG-текстуры, а не рисуют SVG напрямую — MDN: SVG
- Spine — ведущий инструмент 2D-скелетной анимации; DragonBones — бесплатная альтернатива; скелетная анимация привязывает части арта к костям и рассчитывает промежуточные кадры — Esoteric Software (Spine)
- Celeste, Stardew Valley, Hyper Light Drifter и Terraria — широко приводимые примеры пиксельных игр — Wikipedia: Hyper Light Drifter, Wikipedia: Terraria
- Hollow Knight использует расписанные от руки 2D-фоны и персонажей (цифровая живопись), а не пиксельную или векторную графику — Polygon: Hollow Knight art
- Cuphead анимирован традиционной ручной техникой на бумаге, а не пикселями или вектором — Studio MDHR: The making of Cuphead
- Angry Birds и Cut the Rope — распространённые примеры векторной и вектороподобной мобильной графики флеш-эпохи — Wikipedia: Angry Birds, Wikipedia: Cut the Rope