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

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

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

Частина 4: Тінь і світло

Сьогодні ми перейдемо з 2D в 3D, в той час як залишимося в 2D. Ви побачите (або немає). З тим що ми обговорювали досі, ви зможете робити красиві штрихові малюнки та малювати предмети з коректною перспективою. Це гарний початок, але цього недостатньо, щоб робити піксель-арт. У цій частині ми поглянемо на затінення. Це набір технік, що дозволить нам ліпити наші краєвиди і персонажів щоб уявити обсяг (і я врятую вас від довгого розповіді про традиційну важливості цієї частини, ЦЕ ПРОСТО СУПЕР ВАЖЛИВО).

1. Навіщо потрібна тінь?
Насправді ви можливо вже знаєте відповідь на це питання. Щоб ваш мозок міг інтерпретувати обсяг об'єктів, ми змінюємо кольору на поверхні, що випливають з розходжень у освітленості частин об'єкта. Вам не потрібен прожектор галогеновий, щоб побачити цей ефект у реальному житті; найменші відображення визначають глибину, озирніться навколо!

image

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

image

Що важливо запам'ятати, це те, що я вибрав джерело світла, і я помістив тіні і світло як функцію наступну з цього. Якщо б мій малюнок був більш складним, я повинен був би звернути увагу на джерело світла на множині, так щоб все залишилося погодженим. Звичайно вам не потрібно поміщати джерело вгорі праворуч, ви можете розмістити його де завгодно.

Речі не завжди такі прості як ця сфера з кількох причин:

— Об'єкти можуть бути в тіні один одного.
— Об'єкти можуть мати більш складні форми, і важко передати їх обсяг точно (особливо в піксель-арт)
— Світло має прикру тенденцію відбиватися на ці об'єкти, стіни і підлоги.

В результаті низ сфери повинен виглядати приблизно так.

2. І як це робити?
Хороше питання! Я допоможу вам трохи. Перше, що вам потрібно зробити, це розмістити джерело світла (найбільш часто це буває праворуч вгорі, або ліворуч вгорі, так як зазвичай це сонце):

image

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

image

Наприклад зверніть увагу на дракона з першої частини (і ви побачите його знову). Я застосував техніки затінення як описано в цій частині, щоб надати йому об'єм. Мій джерело світла праворуч і не дуже високо; вся ліва частина дракона в тіні, виключаючи лапу яка ближче до вас і частина сірої області створеної тілом. Більше нічого сказати, це просто модернізація штрихового малюнка.

3. Уникнути дві помилки
a. Подушечное затінення (Pillow shading)
Подушечное затінення пробачити тільки в одному випадку: якщо ви ніколи не читали про тіні і світло. Цим підходом користувалися люди, які помічали, що інші використовують світлі і темні кольори, але насправді не розуміли як або чому. Інстинктивно вони починають вставляти яскраві кольори в середину і темні кольору по краях. Результат жахливий.

image

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

b. Розуміння без розуміння
Друга помилка, яку слід уникати, для людей які читають такі статті (для вас, наприклад). Причини які змушують людей робити такі помилки, це: «Добре, я помістив мій джерело світла праворуч внизу. Готове. Тепер кольори яскравішими праворуч внизу, і темніше зліва вгорі, і все буде добре».

image

ПОМИЛКА. Результат катастрофічний, і не має об'єму. Чому? Тому що в трьох вимірах плоскі поверхні висвітлюються одноманітно, якщо тільки це не дуже тьмяний і близький світ (як вуличний ліхтар). У звичайних умовах ви будете мати справу з дуже далеким джерелом світла, як сонце, що висвітлює плоскі поверхні рівномірно.

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

image

Тим не менш обережніше: освітлення тіней не означає, що тіні стануть світліше. Для кращого результату, просто підсвітите межі затінених областей, і залиште інші тіні темними.

image

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

image

Нарешті, як маленький приклад чого можна досягти з цією технологією в більшому масштабі, ось вам скріншот Історій Фантазії (Tales of Phantasia) на Super NES, в якій стіни і колони освітлені смолоскипами забезпечуючи гарну демонстрацію навколишнього освітлення (небо це «основний» джерело світла).

І ми вже («вже», це для вас, у мене це зайняло роки) в кінці цієї частини. Як і в попередніх частинах, якщо щось здалося вам неясним, це тому що я не занурювався в деталі малювання в загальному, а замість цього сфокусувався на піксель арт. Якщо ви хочете вивчити освітлення, і знаєте англійську, ви можете почитати цю сторінку.

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

2 коментарі

avatar
Жорстоко. Переклад тексту з російської, який був перекладений із англійської, який був перекладений із французької.
Комментарий отредактирован 2014-11-13 22:14:01 пользователем tsymbaliuk
avatar
І таке буває :)
Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.