Курс піксель-арту 6

Це переклад публікації «Les Forges Pixel Art Course».

Частина 1: Правильні інструменти
Частина 2: Лінії і криві
Частина 3: Перспективи
Частина 4: Тінь і світло
Частина 5: Палітри кольорів
Частина 6: Згладжування
Частина 7: Текстури і розмиття
Частина 8: Світ тайлів

Частина 6: Згладжування (Anti-aliasing)

Де весь ваш піксель-арт стає красивим. Чи ні. Насправді це залежить від того, наскільки жахливий він був раніше.
image

1. План атаки
Якщо ви мали сміливість читати нинішніх фахівців з новин відеоігор, можливо ви вже бачили журналістів скаржаться на аліасінг (aliasing — ступінчастість ліній) в деяких іграх. Аліасінг — це явище, яке відбувається, коли об'єкт на передньому плані знаходиться перед фоновим кольором, і межа між цими об'єктом і фоном проявляється як жахлива, гостра грань. 3D ігри є основною жертвою явища, так як автоматичні алгоритми згладжування вимагають великих обчислювальних витрат. Приклад нижче, взято з Final Fantasy III версії Nintendo DS. Накладення спектрів особливо помітно по краях чорного кольору в одязі.
image
2D гри порушені мало, тому що там завжди є старий добрий піксель-артівський антиаліасінг (згладжування), щоб згладити всі ці жахливі контури, і згладити переходи між об'єктами і фоном. Насправді тут не потрібно алгоритмів. Ви просто думаєте про це заздалегідь. Подумайте трохи, якщо бажаєте. Ми можемо виділити три ситуації, в яких явище аліасінга може зустрічатися, і ми будемо діяти відповідно. Перший випадок: у мене є два різних кольори на моєму спрайте, і перехід між цими двома кольорами разючий. В цьому випадку ми можемо застосувати згладжування, щоб пом'якшити переходи. Другий випадок: перехід між одним з моїх персонажів і пейзажем позаду нього, весь в сходинках (допоможіть!). Це може бути складно, тому поділимо це на два випадки:
-якщо мені пощастило: насправді це означає «я знаю колір фону, який буде показаний на моєму спрайте». У цьому випадку ви можете згладити грані вашого спрайту, щоб бути впевненим, що перехід між ним і пейзажем не буде занадто різким.
-якщо мені не дуже пощастило: іноді це неможливо, передбачити колір фону, на якому ваш спрайт буде показаний (наприклад, якщо герой гри йде через безліч фонів). В цьому випадку не робіть нічого. От і все. Це буде нерозумно, змінювати межі вашого спрайту щоб згладити переходи, так як ви не знаєте, в який колір буде перехід. Добре, тепер ви знаєте чому і коли використовувати згладжування… залишилося з'ясувати, як його використовувати!

2. Атака!
Добре. Як ви зробите ці чудові згладжені переходи між двома кольорами? Відповідь досить очевидна, просто використовувати один або більше проміжних кольорів (наприклад сірий йде між білим і чорним), відомих як буферні відтінки. Всі тонкощі в тому, як ви використовуєте їх. Насправді, якщо ви позбавлені художнього чуття, ви можливо хочете робити щось таке:
image
Прокляття, це просто жахливо. Я сподіваюся що ви пам'ятаєте не гірше мене, не тільки що цей так званий «метод» займає багато часу на реалізацію, (піксель-арт досить утомливо робити це), але це також не вирішує нашої проблеми переходів. Коротенько, цього недостатньо, просто зробити що-небудь з буферними відтінками для згладжування. Згладжування — скромна техніка, запам'ятайте це. Зараз ви знаєте як ви робити не повинні (у термінах цих поганих контурів), подивіться що насправді зроблено. Спершу картинки, потім слова.
imageimageimageimage
Дозвольте розглянути маленьку помаранчеву дугу, люто яка зіштовхується з чорним фоном. Зліва — звір в його природному стані. Праворуч — послідовні етапи процесу згладжування. Ми почнемо з згадки, що межі дуги кола, це серія сегментів, довжина яких від 1 до 3 (це має вам нагадати главу про криві). Ми візьмемо кожен сегмент окремо, розглядаючи лінії зображення, одну за одною. У разі вертикальних сегментів (не тут), ми розглянемо колонки зображення, одну за одною. На кожній лінії, пом'якшуємо перехід на обидві сторони від кордону, але увага: якщо ви відхиляєтеся за кордон ваших двох кольорів, ви зруйнуєте оригінальну форму (і станете ближче до прикладу того, як не потрібно робити). Ваші буферні тіні не повинні поширюватися за кінці сегментів ліній вище і нижче, це здається дуже складним, але фактично це не так, погляньте на останній малюнок, сегменти з 1 пікселя, можуть приймати тільки 2 пікселя згладжування, тому що якщо вони перетечуть на сусідні сегменти, вони створять дуже неприємний ефект, названий «смугастість» (і досить близько до поганого прикладу вище). Не робіть контур навколо вашої фігури. Якщо необхідно, можна робити деякі корективи, якщо незважаючи на всі запобіжні заходи, злегка спотворюється фігура об'єкта, але зараз у нас не той випадок. Також знайте, що необов'язково згладжувати сегменти довжиною 1, які досить хороші і самі по собі.

3. Повна перемога!
Результат видно відразу (або вам негайно потрібні очки). Ось як ці зміни вплинули на наш помаранчевий коло, а також нашого старого доброго друга, дракона.
image
image
Також зверніть увагу, що я трохи приглушив зовнішнє освітлення на драконі. Як раніше анонсувалося, зовнішнє освітлення це техніка, яка використовується помірно. Я закінчу маленьким технічним зауваженням, для найбільш кмітливих з вас, що я не знаю куди приткнути: ваші тіньові буфера не зобов'язані бути між сглаживаемыми квітами. Якщо ви просто хочете оптимізувати вашу палітру, ви можете спробувати використовувати сірі, тому що у них є здатність використовуватися в рампах різних кольорів, і творити чудеса антиалиасинга.
image
Цей зразок піксель-арту був щедро надано Пандою, який робить згладжування набагато краще за мене (тебе). Не забудьте протерти слюні з клавіатури після перегляду деталей.

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

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.