Перейти до вмісту

Піксельна графіка

Матеріал з Вікіпедії — вільної енциклопедії.
Зображення Вікіпе-тан в піксельній графіці, збільшене увчетверо

Піксельна графіка (від англ. pixelангл. — скорочення від pix element[1]) — форма цифрового зображення, створеного на комп'ютері за допомогою растрового графічного редактора, де зображення редагується на рівні пікселів (точок), а роздільна здатність зображення настільки мала, що окремі пікселі чітко видно. На старих (або на неповнофункціональних) комп'ютерах, в іграх для Game Boy, іграх для старих ігрових приставок і багатьох іграх для мобільних телефонів в основному використовується піксельна графіка, оскільки це єдиний спосіб зробити чітким невелике зображення при малій роздільній здатності екранів, характерній для цих пристроїв.

Відмінні риси піксельної графіки

[ред. | ред. код]

Поширена помилка, що будь-який малюнок або ескіз, зроблений з використанням растрових редакторів — піксельна графіка. Це неправильно, растрове зображення відрізняється від «не піксельного» технологією — ручним редагуванням малюнка піксель за пікселем. Тому піксельний малюнок відрізняється від інших видів комп'ютерного мистецтва невеликими розмірами, обмеженою колірною палітрою і (як правило) відсутністю згладжування.

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

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

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

Переваги

[ред. | ред. код]
  • Один з найбільш простих у вивченні стилів комп'ютерного мистецтва (просте піксельне зображення можна намалювати навіть не маючи особливих художніх здібностей).
  • Природний вибір на обмежених палітрах і наднизьких розширеннях, де важливий кожен піксель.
  • Потребує мало пам'яті за рахунок застосування палітрових форматів з невеликою кількістю кольорів.
  • Навіть при дуже поганій передачі кольору піксельний малюнок не втрачає виразности.
  • Добре виглядає на екранах із чіткими межами пікселів (зразок РК).

Недоліки

[ред. | ред. код]
  • В епоху hicolor-моніторів і відеопроцесорів з апаратним альфа-змішуванням виразніше виглядають інші стилі (хоч на низьких дозволах все одно доводиться вирівнювати лінії по пікселях).
  • Погано переносить автоматичне масштабування (при зміні розширення картинку потрібно перемальовувати). На сучасних (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) стилізована під приставки і фільми 1980-х років

Термін pixel art був вперше використаний Аделлю Ґолдберт і Робертом Флеґалом з Дослідницького центру Пало-Альто корпорації «Xerox» в 1982 році, хоча сама графіка використовувалася ще за 10 років до цього в програмі Річарда Шоупа, в Xerox PARC і т. ін.

Піксельна графіка широко застосовувалася в 1980-ті роки на ПК та приставках із обмеженими палітрами. Поява змінюваних 256-кольорових палітр поклало край засиллю піксельного зображення в іграх; з тотальним поширенням truecolor піксельний малюнок був витіснений і з робочих столів ОС.

Тим не менш, на портативних пристроях (мобільні телефони, PSP і Nintendo DS) піксельний малюнок широко поширений і сьогодні. Іноді піксельна графіка використовується в рекламних банерах.

Сучасна піксельна графіка використовується як відповідна реакція любителів ігор/малюнків на переважання тривимірної графіки. Деякі ентузіасти використовують її як наслідування минулого. А інші вважають, що вона відроджує традиції префіксальних ігор другого й третього покоління, в яких графіка вже стала виглядати естетично.

Значки для операційних систем з обмеженими функціями відображення теж являють собою піксельну графіку. У Windows значки робочого столу є растровими зображеннями різних розмірів, найменші з яких іноді не просто зменшені варіанти, а самостійні зразки піксельної графіки. На робочих столах» GNOME і KDE зображення представлені насамперед SVG, але і вони містять піксельну графіку в PNG для невеликих розмірів, таких як 16×16 і 24×24. Іншим їх застосуванням на сучасних комп'ютерах є значки для сайтів і різних списків переваг (англ. favicon).

Спільноти

[ред. | ред. код]

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

Іноді ставляться завдання малювання «на тему», у яких художники створюють свої роботи за заданим шаблоном або з певної тематики. Деякі такі роботи можуть об'єднуватися в одну велику картину.

Надзвичайно популярні піксельні ляльки: один художник малює шаблон ляльки (як правило, з перекрученими пропорціями), інші наводять ляльці риси обличчя, зачіску, вбрання. Поганим тоном вважається одягати ляльку в чужі аксесуари («франкендоллінґ»).

  • Pixel As Art (Піксель арт як мистецтво) Twitter

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

[ред. | ред. код]
Зліва — «найближчий сусід», праворуч — 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.
  • Для реалізації спецефектів, коли конкретний кадр видно мізерну частку секунди, найчастіше застосовують фільтр «найближчий сусід». Так працює, наприклад, Terraria — вона просто повертає піксельні мечі разом з їхніми великими пікселями.
  • Якщо потрібно показати картинку в масштабі від 1 до 2, наприклад, у редакторі з малою погрішністю, придатний фільтр Ланцоша. В іграх масштабу від 1 до 2 намагаються уникати.

Див. також

[ред. | ред. код]

Примітки

[ред. | ред. код]
  1. Pixel — Definition and More from the Free Merriam-Webster Dictionary. Архів оригіналу за 3 червня 2017. Процитовано 30 квітня 2017.

Посилання

[ред. | ред. код]