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

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

Википе-тан в пиксельной графике, увеличено в 4 раза

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

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

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

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

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

Достоинства

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

Недостатки

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

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

Пиксельный рисунок, сделанный в 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).

Редизайн графики видеоигр 2-го и 3-го поколения консолей

8-ми и 16-ти битные видеоигры на консолях 2-го и 3-го поколений имели ряд технических ограничений по разрешению спрайтов и цветовым палитрам. С ростом мощности компьютеров эти ограничения исчезли, а старые видеоигры по прежнему являются источником вдохновения для пиксель-арт художников. Поэтому очень часто художники перерисовывают графику (рерайт) из старых игр, при этом расширяют цветовую палитру и разрешение пиксельных спрайтов. В итоге получается мок-ап - скриншот из старой видеоигры, если бы она, например, выходила не на 8-ми битной, а на 16-битной консоли.

Также некоторые игровые студии, выпускают римейки старых видеоигр. Так в 2017 году вышел римейк видеоигры River City Ransom по названием River City Ransom: Underground от независимой студии из Канады Conatus Creative.

Развитие эмуляторов ретроконсолей так же способствовало повышенному интересу сообщества к старым видеоиграм и переосмыслению их графики. Эмулятор ретроконсолей Mesen позволяет обладателям даже невысоких знаний в программировании создавать и запускать графические моды для старых видеоигр. Сообщество поклонников ретроигр уже создало графические моды для таких игр как: Battle City, Super Metroid, Castlevania, Ice Climber и другие игры для консоли NES. Причем эмулятор позволяет не только изменять спрайты, менять их разрешение, добавлять новые спрайты, но и добавлять новые анимации.

Так же это работает и обратную сторону, когда на современную игру делают демейк - упрощают игру, меняют графику игры на пиксельную, как если бы эта игра выходила на ретроконсолях.

Пиксель-арт в других сферах развлечений

Зачастую к пиксель-арту прибегают в совершенно неожиданных сферах развлечений, например в настольных играх. Яркие примеры настольных игр с иллюстрациями в стиле пиксель-арт это настольные игры: Pixel Tactics, Boss Monster, СУПЕРТАНК. Как правила эти игры ссылаются на видеигры, либо являются их настольной адаптацией, как, например, настольная игра СУПЕРТАНК является адаптацией видеоигры Battle City, а игра Boss Monster отсылает к различным видеоиграм-сайдскроллерам и ролевым играм в жанре fantasy. Т.к. игровой процесс настольных игр сильно отличается от видеоигр, то подбираются такие механики, которые наиболее полно передают атмосферу оригинальной видеоигры. Например, в настольной игре СУПЕРТАНК танки передвигаются ортогонально по клеточкам, как в оригинальной Battle City. Также в игре стоит задача охранять свой штаб в виде орла. И игровое поле представляет собой лабиринт из препятствий как и в оригинальной игре Battle City в виде виде различных типов ландшафта: кирпич, бетон, вода, лед и кусты, причем взаимодействие с ландшафтом происходит так же как в видео игре: кирпичные стены можно разрушать выстрела, а лед позволяет танку проскользить дальше по ходу движения и т.д. Есть и игре и бонусы, которые работают тоже как в оригинальной игре: "звездочка" прокачивает танк и он ездит быстрее, а "каска" дает временную неуязвимость. Так же для создания атмосферы ретровидеоигры на 8-ми или 16-битной консоли все иллюстрации в настольной игре СУПЕРТАНК выполнены в стиле пиксель-арт, что отсылает нас к графике консолей 2-го и 3-го поколения. Так же в игре есть персонажи - Генералы, которые являются отсылкой-пародией на героев фильмов-боевиков 80-90-х годов: Рэмбо, Терминатор, Чак Норрис, Брюс Ли, Робокоп и другие персонажи.

Сообщества

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

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

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

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

Основная статья: Алгоритмы масштабирования пиксельной графики

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

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

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

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

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

• EPx (Scale2x) — Eric’s Pixel Expansion
• Scale3x
• SaI — Scaling and Interpolation
• Eagle ; SuperEagle
• Hq2x, Hq3x, Hq4x
• Vector Scaling

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

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

• В масштабах свыше 2:1 существует несложная методика, сохраняющая пиксельную решётку. А именно: для каждого пикселя экрана смотрим, какие пиксели картинки и в какой пропорции его покрывают. В этой пропорции и смешиваем цвета пикселей. На этом принципе работает, например, Shovel Knight.
• Для реализации спецэффектов, когда конкретный кадр виден ничтожную долю секунды, могут применять так называемую разнопиксельность — объект не вписывается в пиксельную сетку игры и рисуется крупными пикселями по другой сетке — ближайшим соседом или другим методом, сохраняющим крупные пиксели. Ретро-пример: Teenage Mutant Ninja Turtles: Turtles in Time, враги, вылетающие на зрителя. Современный пример: Terraria — она просто поворачивает пиксельные мечи вместе с их крупными пикселями.
• Если нужно показать картинку в масштабе от 1 до 2, например, в редакторе и не сильно погрешить против истины, пригоден фильтр Ланцоша. В играх же масштаба от 1 до 2 стараются избегать.

См. также

• eBoy — студия, специализирующаяся на создании пиксельной графики
• Мозаика
• Вышивка крестом
• Восьмибитная музыка

Литература

• Колодников А.И. Ранние формы компьютерного дизайна: пиксельная графика и растровая система // Terra artis. Искусство и дизайн. 2022. № 3. С. 36–41.
• Benjaminsson K. The Masters Of Pixel Art. Volume 1-3. Göteborg, Sweden: Nicepixel, 2016 - 2019.
• Donovan T. Replay: The History of Video Games. Lewes: Yellow Ant, 2010. 192 p.
• Ekilson S. Graphic Design: A New History. Göteborg, Sweden: Simon & Schuster, 2012.
• Silber D. Pixel art for game developers. San Francisco, CA USA: William Pollock, 2016. ISBN 978-1-59327-886-1.
• Wolf M.J.P. Before the Crash: Early Video Game History. Detroit: Wayne State University Press, 2012. 272 p.

Ссылки

• 8Biticon Pixel Avatar Maker (англ.)