Пиксельная графика

Эта статья находится на начальном уровне проработки, в одной из её версий выборочно используется текст из источника, распространяемого под свободной лицензией
Материал из энциклопедии Руниверсалис
Википе-тан в пиксельной графике, увеличено в 4 раза

Пи́ксельная гра́фика (от англ. pixel — сокращение от picture element[1]) — форма цифрового изображения, созданного на компьютере с помощью растрового графического редактора, где изображение редактируется на уровне пикселей (точек), а разрешение изображения настолько малó, что отдельные пиксели чётко видны. На старых (или на неполнофункциональных) компьютерах, в играх для Game Boy, играх для старых игровых приставок и многих играх для мобильных телефонов в основном используется пиксельная графика, так как это единственный способ сделать чётким небольшое изображение при малом разрешении экранов, характерном для этих устройств.

Отличительные черты пиксельной графики

Распространено заблуждение, что любой рисунок или эскиз, сделанные с использованием растровых редакторов — пиксельная графика[2]. Это неверно, «пиксельное» изображение отличается от «непиксельного» технологией — ручным редактированием рисунка пиксель за пикселем. Поэтому пиксельный рисунок отличается от других видов компьютерного искусства небольшими размерами, ограниченной цветовой палитрой и (как правило) отсутствием сглаживания.

Пиксельная графика использует лишь простейшие инструменты растровых графических редакторов, такие как «карандаш», «прямая» или «заливка». Поэтому встречаются шедевры пиксельной графики, сделанные в Microsoft Paint и других неполнофункциональных редакторах.

В любом случае, использование инструментов, не работающих с отдельными пикселями (например, «Кисть») и автоматических фильтров (таких, как сглаживание) считается неприемлемым в «настоящем» искусстве пиксельной графики — такие инструменты добавляют новые пиксели автоматически, нарушая аккуратное ручное размещение. «Правилом хорошего тона» считается использовать минимальное число цветов; в идеале — стандартные 16 цветов, доступные на подавляющем большинстве видеоподсистем, даже самых ранних: в них три бита кодируют сигналы R,G,B и четвёртый бит кодирует яркость.

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

Достоинства

  • Один из самых простых в изучении стилей компьютерного искусства (простую пиксельную картинку можно нарисовать, даже не имея особых художественных способностей).
  • Естественный выбор на ограниченных палитрах и сверхнизких разрешениях, где важен каждый пиксель.
  • Требует мало памяти за счёт применения палитровых форматов с небольшим количеством цветов.
  • Даже при очень плохой цветопередаче пиксельный рисунок не теряет выразительности.
  • Хорошо выглядит на экранах с чёткими границами пикселей (наподобие ЖК).

Недостатки

  • В эпоху TrueColor-мониторов и видеосопроцессоров с аппаратным альфа-смешиванием выразительнее смотрятся другие стили (хоть на низких разрешениях всё равно приходится выравнивать линии по пикселям).
  • Плохо переносит автоматическое масштабирование (при изменении разрешения картинку требуется перерисовывать). На современных (2016) ПК разрешение мониторов достаточно высокое, чтобы пиксельную игру можно было запустить во весь экран в масштабе 2:1 и более (см. ниже); если это невозможно — остаётся только запускать игру в окне.
  • На некачественных мониторах (чересстрочные ЭЛТ, некоторые ЖК с аналоговым входом или нехваткой цифровой полосы пропускания) «сетчатое тонирование» (см. ниже) может мерцать.

Методы рисования

Пиксельный рисунок, сделанный в Paint

Рисование обычно начинают с эскиза, который состоит из основных линий и определяет характер того, что художник намеревается изобразить. Его можно получить путём обводки отсканированного рисунка, и довольно часто ими делятся другие художники. Существуют и другие методы, некоторые из которых напоминают обычное рисование.

Ограниченная палитра требует использования размытия для получения различных цветов и оттенков, но из-за особенностей пиксельной графики делается это только вручную. Иногда можно встретить даже сглаживание «ручной работы» — в том числе с альфа-каналом формата PNG, что позволяет наложить изображение на любой фон.

Вот несколько примеров использования вышеупомянутых техник:

1. Основная форма размытия — «сетчатое тонирование» или дизеринг — два цвета в виде «шахматки» из пикселей 2×2. Изменение плотности каждого цвета позволяет получать полутона. Также «шахматки» из пикселей 2×2 позволяют создавать иллюзию большого количества оттенков.
2. Стилизованное размытие с беспорядочно рассеянными квадратами из пикселей 2×2 позволяет добиться необычных эффектов. Ещё могут использоваться небольшие круги.
3. Сглаживание (англ. Anti-aliasing) — нарисованное вручную с использованием эффекта сглаживания.

Хранение

Файл GIF (318 байт).
Файл PNG (258 байт).
Файл JPEG (706 байт).

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

Пиксельную графику стараются не сохранять в формате JPEG, так как сжатие «с потерями» не подходит для элементов пиксельного рисунка, даже если сжатие минимально. Алгоритм сжатия JPEG может вызвать серьёзное искажение первоначального вида пиксельного рисунка из-за того, что может менять цвета отдельных пикселей. По размеру же JPEG-файлы с такими рисунками получаются даже больше, чем сохранённые в GIF или PNG. BMP и другие форматы без сжатия используются, когда того требует игра или программа: палитровые форматы со сжатием без потерь (GIF, PNG-8) дают меньший размер файла, не приводя к потерям качества.

Классификация

Слева — изомет­ри­ческая. Справа — плоская.
пример изометрической проекции
пример изометрической проекции

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

Изометрическая пиксельная графика рисуется в проекции, близкой к изометрической. Примеры можно увидеть в играх, которые отображают трёхмерное пространство, не используя при этом трёхмерной обработки. Технически в изометрии углы должны быть 30° от горизонтали, но при этом линии в пиксельной графике выглядят неровными. Чтобы устранить этот эффект, выбираются линии с отношением пикселей 1:2, а угол при этом составляет 26,565° (арктангенс от 0,5).

Реже встречаются другие проекции — диметрическая или перспективная.

История

Игра Broforce (2015) стилизована под консоли и фильмы 80-х годов.

Термин pixel art был впервые использован Аделью Голдберг и Робертом Флегалом из Исследовательского центра Пало-Альто корпорации «Xerox» в 1982 году. Хотя сама графика использовалась ещё за 10 лет до этого в программе Ричарда Шоупа, в Xerox PARC и т. п.

Пиксельная графика широко применялась в 1980-е годы на компьютерах и приставках с ограниченными палитрами. Появление изменяемых 256-цветных палитр положило конец засилью пиксельного рисунка в играх; с тотальным распространением true color пиксельный рисунок был потеснён и с рабочих столов ОС.

Тем не менее, на портативных устройствах (мобильные телефоны, PSP и Nintendo DS) пиксельный рисунок широко распространён и по сей день. Иногда пиксельная графика используется в рекламных баннерах.

Игра Flinthook.

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

Значки для операционных систем с ограниченными функциями отображения тоже представляют собой пиксельную графику. В Windows значки «рабочего стола» — это растровые изображения различных размеров, наименьшие из которых иногда не просто уменьшенные варианты, а самостоятельные образчики пиксельной графики. На «рабочих столах» GNOME и KDE изображения представлены прежде всего SVG, но и они содержат пиксельную графику в PNG для небольших размеров, таких как 16×16 и 24×24. Другим применением на современных компьютерах являются значки для сайтов и различных списков предпочтений (англ. favicon).

Сообщества

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

Иногда ставятся задачи рисования «на тему», в которых художники создают свои работы по заданному шаблону или по определённой тематике. Некоторые такие работы могут затем объединяться в одну большую картину.

Распространена игра «одень куклу»: кто-то рисует голую куклу (обычно с деформированными пропорциями), остальные пририсовывают к ней причёску и одежду.

Алгоритмы автоматического масштабирования

Слева — «ближайший сосед», справа — SaI

Пиксельная графика плохо переносит изменение размера; при переходе на другое разрешение её приходится перерисовывать. Обычные алгоритмы масштабирования наподобие билинейной и бикубической интерполяции предназначены для фотографий и совершенно непригодны для пиксельного рисунка — картинка становится размытой. Впрочем, существуют алгоритмы, повышающие чёткость графики на высоких разрешениях. Современные компьютеры могут исполнять эти алгоритмы даже в реальном времени.

Увеличение в целое число раз

Пиксельная Википе-тан, увеличенная вдвое алгоритмом Hq2x

Простейший алгоритм, пригодный для увеличения в 2, 3 и т. д. раз — «ближайший сосед». Некоторые из алгоритмов, которые автоматически добавляют картинке деталей:

С нецелыми коэффициентами

Алгоритмов с нецелыми коэффициентами, автоматически «додумывающих детали», на начало 2016 года не известно. Однако существует несколько методик для масштабирования игры с нецелым коэффициентом.

  • В масштабах свыше 2:1 существует несложная методика, сохраняющая пиксельную решётку. А именно: для каждого физического пикселя смотрим, какие пиксели картинки и в какой пропорции его покрывают. В этой пропорции и смешиваем цвета пикселей[3]. На этом принципе работает, например, Shovel Knight.
  • Для реализации спецэффектов, когда конкретный кадр виден ничтожную долю секунды, чаще всего применяют фильтр «ближайший сосед». Так работает, например, Terraria — она просто поворачивает пиксельные мечи вместе с их крупными пикселями.
  • Если нужно показать картинку в масштабе от 1 до 2, например, в редакторе и не сильно погрешить против истины, пригоден фильтр Ланцоша. В играх же масштаба от 1 до 2 стараются избегать[3].

Пиксельная графика на движке wikimedia

См. также

Примечания

  1. Pixel — Definition and More from the Free Merriam-Webster Dictionary. Дата обращения: 17 июня 2013. Архивировано 3 июня 2017 года.
  2. What is Pixel Art?. Дата обращения: 24 февраля 2016. Архивировано 21 февраля 2016 года.
  3. 3,0 3,1 Gamasutra: Lars Doucet’s Blog — Doing an HD Remake the Right Way. Дата обращения: 24 февраля 2016. Архивировано 2 февраля 2016 года.

Ссылки