«Галоп пікселя — частина четверта» — Анімація світла і тіні



Доброго часу доби Хабру і цінителям піксель-арту, шанувальникам квадратних точок, адептам лімітованих дозволів і квітів. Радий представити на ваш суд чергову статтю з циклу «Галоп Пікселя». Не буду витрачати час на виправдання мого довгої відсутності і в увазі явної присутності перейду до суті справи. Сьогодні ми продовжимо вивчати анімацію. На цей раз це буде анімація світла і тіні. Здебільшого на статичних об'єктах. Всі пам'ятають – спочатку база. Спочатку фундамент. Спочатку просте. Ну а складне ввалится у ваші двері само, слідом за діточками.

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

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

Лопати в руки.




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

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

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

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

Нехай світлом б'є

— Нехай він стане джерелом відваги, сміливості криницею життєдайного оптимізму
який ніколи не перестане бити…
— Краще сказати струмує.
— Але джерело, він б'є…
Генріх Рамкопф і Якобина Мюнхгаузен «Той самий Мюнхгаузен»


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

Все може бути простим. Але все рано чи пізно стає складніше. Так чи інакше. Мені здається, що піксель-арт, як і життя, має звичай ускладняться по мірі проходження шляху. Тут можна навести багато аналогій.
Мені подобається та, де у вас є нова машина, і перші тисячі кілометрів ви рухаєтеся з гарним темпом. Але потім може зламатися колесо, або щось в машині. Вам знадобляться гроші на бензин. Вам потрібні будуть кошти на харчування, воду та інші предмети першої необхідності. З часом ваше пригода може перетворитися на досить заплутаний клубок ниток, в яких буде складно розібратися, але перш за все, важливий перший крок – встати з дивана. Повернути ключ запалювання. І це легко. Деколи це варто зробити. Незважаючи на наслідки. Тим не менш, озирніться спершу, чи немає навколо людей, нехай наслідки торкнуться лише вас і вашої машини.

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

Парочку кадрів відведемо на нічого не деланье, і ще парочку на «гру світла». Світло буде падати на куб праворуч, а потім ліворуч. Не кожен кадр повинен повідомляти глядачеві анімацію. Але кожен кадр, навіть без анімації повинен повідомляти глядачеві інформацію. Щоб імітувати засвічення від джерела освітлення візьмемо прямокутники ідентичні площинах, які ми б хотіли засвітити. Колір візьмемо з фону, як найяскравіший світло на сцені. І виставимо йому прозорість. 47% у такого шару зліва і справа. Ну а затримку у кадрів виставимо 0,5 секунд.



Не тягне на шедевр. Розумію і приймаю. Але всі з чогось починають. Бачите лампочку? Вона буде показувати нам, звідки йде світло. Тут у нас чотири кадри. Давайте спробуємо збільшити кількість кадрів? Введемо трохи більше плавності в нашу анімацію. Нехай їх буде шість.



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



Тепер ми подложим наш намальований контейнер знизу під ці шари зі світлом.



Як ми бачимо, ілюзія освітленості на об'єкті зникла. Хоча, по правді сказати, її і не було. Поки що. Задамо собі питання. Чому це відбувається? Чому світ виглядає як вата, як звичайний колір зверху ні краплі не схожий на реальне висвітлення?
І самі дамо собі відповідь – тому що на такому деталізованому об'єкті повинен бути інший світ. З урахуванням рельєфу об'єкта, і з урахуванням кольорів, які на ньому знаходяться. І давайте умовимося ще про одне. Світло і Колір дуже схожі слова. Але вони не однакові.

Щоб імітувати роботу світла на об'єкті ми можемо вручну зробити світліше кольору (це класичний шлях, де ми самі малюємо світ), але ми можемо також автоматизувати нашу роботу, наклавши зверху ті маски, що ми вже використовували до цього. Для нашої вати. Тільки замінивши той колір, колір білий з режимом накладення Overlay.



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



Ми похуліганили. Форсували силуетні роботи і поставили на сцені загальну композицію. А тепер давайте ненадовго відвернемося від цієї сцени, щоб наші очі відпочили і подумаємо над тим, як нам зробити анімацію світла виходячи з того, що наш об'єкт не просто ящик, але щось більш рельєфне. Щось об'ємне. Нам потрібен складний об'єкт.
Обіцяю вам, ми обов'язково повернемося до нашого хлопця. Щоправда, з новим озброєнням зброєю. І обов'язково його доб'ємо. Запам'ятаємо лише, що зараз ми «били площинами», т.е. зробили анімацію, розраховану на освітлення площин.

Нехай світло струмує

— Але джерело, він б'є.
— Іноді б'є, а іноді струмує. В даному випадку краще, щоб він струменів.
Генріх Рамкопф і Якобина Мюнхгаузен «Той самий Мюнхгаузен»


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

Деякі люблять перекручувати це твердження. Мовляв, більше кольорів – більше можливостей. Брехня. Більше квітів – більше шляхів заплутатися. Більше квітів – більше можливостей зробити помилку. І так, між іншим — більше слів, значить більше ось таких єретичних текстів наповнених блудливими мудруваннями замість піксель-арту. Більше не означає краще, і це положення вірно в безлічі випадків, від художньо-естетичних до повсякденно-практичних. Безумовно, після пізнання убогості і голоду, підхльоскують нашу фантазію, непогано б і збагатитися, щоб потім плювати і отримувати задоволення, але лише після.

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



Силует говорить сам за себе. Принаймні, можна зрозуміти, що мова йде про седоке. На чимось. Без коліс. Згідно нашої ледачою вступній. Давайте все-таки позначимо вершника більш явно. І додамо силуету читаності. Почнемо ми не з цього світу, але з тіні, залишивши світло на солодке.



Мені здалося, що чоботи будуть йому впору. Але не будемо зупинятися на досягнутому. Тут є база, а нам потрібен додатковий рельєф. Саме на ньому буде грати наш світ у майбутньому.



Чоботи… коли я намалював чоботи мені подумалося, що персонаж нагадує мені героя Роберта Патріка. Термінатор Т-100 в поліцейській формі. Щоб доповнити цей образ варто додати ряд деталей. Зразок жовтої смуги на штанях, і написи «Police» на борту нашого футуристичного мотоцикла. Напис добре допомагає ідентифікувати об'єкт, в тому випадку якщо руки художника виростають з непризначених для цього місць. За дивним збігом обставин написи допомагають зробити будь-техногенний дизайн більш усвідомленим, повідомляючи глядачеві технічну інформацію про об'єкті, роблячи його достовірним.



Вже краще. Певний світло. Якась тінь. Але все статично. Мертво. Нерухомо. Як би нам не сильно напружуючись позначити якийсь рух на сцені? Давайте зробимо це в дусі старого кіно. Де герої сидять в машині, а навколо бігають люди з ялинками. У нашому випадку ялинками будуть ліхтарі, які будуть рухатися позаду «наїзника». Ну і раз у нас тут рух, давайте подрисуем пару пікселів до тіні, щоб вона безглуздо здригалась.



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

Світло падає на нашого офіцера ззаду. А тому він буде зачіпати його лише по кромці, як якщо б ми дивилися на лезо ножа, будучи в темній кімнаті, а джерелом світла в ній була б відкрита двері. Грань ножа, звернена до нас, не відбивала б світло. Але на кромці гострого леза була б помітною гра світла. В один або два міліметри. У нашому випадку світло буде розподілятися по об'єкту лінією в один піксель. Очевидно, що найбільша концентрація світла буде перебувати в безпосередній близькості від джерела освітлення. Для того щоб це збагнути не треба бути доктором наук, або навчатися в технічному вузі. І в «сповільненій зйомці» видно як світло падає на об'єкт.



Глянувши на об'єкт при нормальній швидкості програвання, ми бачимо, що це більш або менш схоже на роботу світла в реальності. Настільки, наскільки терміни реальності взагалі можуть бути застосовні до піксель-арту, коли робоче полотно займає всього 250х120 пікселів.



Тепер варто зробити світ більш об'ємним, ніж раніше. Пам'ятаєте, що було до цього? Анімація світла по крайці. Бак об'ємний, і світ повинен розподілятися інакше. Та й інший рельєф теж повинен грати наступним чином:



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



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



Підсумуємо перші дві глави. Хоча… що за дурниця? Ми можемо і повинні зробити цю сцену краще. У ній не вистачає життя. Немає динаміки. Думаю, що розвівається шарф і оновлений шолом нам підійдуть більш ніж перехід до підсумками перших двох глав. Нехай світло на шоломі грає яскраво і гордо, адже все-таки він найбільш близький до джерела світла.



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



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



Вже непогано. Але є один нюанс. Відчуваєте ривок у першому і восьмому кадрах? Немає плавність анімації. Тінь різко зникає в кінці восьмого кадру і не менш різко з'являється в першому. Що робити? На допомогу прийде прозорість. Ближче до початкового і кінцевого кадру анімації варто послабити інтенсивність тіні. У мене навіть обґрунтування знайдеться. За мерее видалення від джерела освітлення тінь блідне і розмивається, бо, як спрямований джерело освітлення зникає і залишається лише один тип освітлення. Глобальний. Як в похмуру погоду. Робить він це, на жаль, лише в одну сторону, але… це жертви на які доводиться йти маючи анімацію на шість кадрів. Тому ми і вибрали настільки мале їх кількість. Тому що ця анімація виклик нам же. Виклик самим собі. Навчитися бути лаконічними.



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



Машина є – нехай їде тепер.



«Кольчужка» виявилася короткувата. Іноді розмір все-таки має значення, щоб люди не говорили. По-перше, приберемо іконку світла, наш літаючий значок допомагав нам зрозуміти звідки б'є світло. І давайте удлиним машину. В анімації вона відчувається коротким обрубком, а нам потрібно те, що називається «позитивною динамікою» на сцені.



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



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

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



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



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



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

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



Які висновки ми можемо зробити на основі перших двох вправ? Давайте оформимо їх у вигляді списку, який може бути використаний потім у вигляді пам'ятки:

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

Не все золото, що блищить

Я дуже люблю наш багатий мову за те, що їм можна грати. Можна грати як словами і оборотами промови, так і трактувати що завгодно… і як завгодно, надаючи одним і тим же виразами в контексті різні смисли.

Теж вірно і для анімації. Можна грати формами, об'єктами, світлом, тінню і квітами. Як вам заманеться. І кожна партія – буде особливою. Один піксель, всього одна точка можуть і будуть міняти зображення в цілому, будучи проставленими в потрібному місці. Коли я писав статтю, мені потрібно було дописати фінальну частину, але в цей момент вирубилася електрика. Мені нічого не залишалося, крім як «писати» її в голові, сидячи в напівтемряві і проклинаючи свою маніакальну схильність до комп'ютера. Ось таке смс-повідомлення я відправив своєму другові у відповідь на стурбованість у зв'язку зі зникнення моєї персони з мережі:
— Я ж статтю писав! Забери у мене комп… я ж ніхто! А так, хоч хтось з компом.

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

Всім нам відомо, що по різним поверхням світло розподіляється по-різному. На гумі світло не особливо помітний, на металі яскраво грає відблисками, якщо чистий метал. Грає тьмяно, якщо метал не першої свіжості (наприклад, покритий іржею). Гра світла на різних об'єктах залежить від того матеріалу, з якого вони зроблені. Рівень відбиття світла у різних матеріалів різний. Скло і брудне скло, папір або глина, метал і пластик — всі вони беруть освітлення по-різному. З різним ступенем привітності, і з різною віддачею у вигляді відбитого світла.

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

Таким чином, ми спробуємо імітувати різні матеріали, щоб показати, що світ може і повинен розподілятися по-різному. Скажу вам чесно. Більшість піксель-артистів заперечують цей елемент візуалізації. По-перше, частенько артистами ігнорується тінь в межах самого об'єкта. Тобто об'єкт відразу малюється зі світлотінню і анимируется тільки направлене світло. По-друге, часто ігнорується робота з різними матеріалами в межах одного об'єкта. Це дорого виробництві, за винятком випадків, коли десь на об'єкті або персонажа присутній скло або поверхню з сильним рівнем відображення. У цьому випадку малюється швидкий блік і справа з кінцем.

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

Для початку намалюємо «куля світла». Радіус з точкою максимальної яскравості і точкою повної відсутності світла. Щось на зразок ліхтаря зверху, чи абстрактної лампочки. Нам не до естетизму. Нам потрібно зрозуміти, як візуалізувати різні матеріали в піксель-арт. Ну і між справою, ще й у вигляді анімації. Так що естетизм ми навіть не висадимо на наступній зупинці. Він просто не сяде поруч з нами. Відразу. І так, це расизм. Безумовно. Але сьогодні я поспішаю. Новий Рік близько. А я обіцяв випустити цю статтю ще кілька місяців тому. Так що кулі в руки.

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



Ми умовилися, що права глянсова обкладинка, ну а ліва матова. Так що нам, принаймні, варто підвищити рівень освітленості праворуч, і знизити його зліва. Словами герцога з уже згадуваного сьогодні фільму:
— Може варто, все-таки, в даному випадку підняти верх зверху і знизити низ знизу?
Герцог «Той самий Мюнхгаузен»




Ми припускаємо, що темне на обкладинках це фарба, нанесена на обкладинку. Фарба, як не дивно має об'єм, якщо придивитися до реальних об'єктів. А об'єкти старі схильні деформуватися згодом із-за чого світло на них розподіляється нерівно. Давайте зробимо таке нерівне розподіл світла на правій обкладинці.



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



Похуліганили і вистачить. Це був всього лише освітній прийом. Давайте забезпечимо обкладинку кантиком в один піксель і додамо лінійних відблисків для того щоб права обкладинка відрізнялася від лівої обкладинки радикальним чином.



Займемося тепер лівим диском. Він у нас теж тиснений і теж рельєфний. Ось на нього ми відірвемося по повній програмі. Нехай світло гуляє по всьому периметру трафаретного зображення. Давайте навіть подекуди його поцарапаем. Нехай там буде легкий лінійний блик.



І давайте зробимо так, що бідну «ногу» на постаменті зовсім вигнула. Нехай там буде явна впуклость, і нехай світло там грає найбільш яскраво.



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



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

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



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



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

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

Вам не обов'язково шаленіти і покривати всю вашу сцену ультра анімацією світла. Ви можете вибрати якийсь елемент і зробити на ньому акцент, залишивши всю іншу сцену заповненої статичним, не рухаються освітленням, як я зробив у своєму маленькому «Bemidji Project» за мотивами відомого телесеріалу «Fargo». Всього одна табличка грає на світлі, але як я зрозумів з відгуків публіки, цього виявилося цілком достатньо. Саме про це я і намагався сказати. Іноді дрібниці достатньо, що б поставити на роботі фінальний штрих.



Епілог

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

Ігор Гриценко, Матей «Retronator» Ян, Калам, Гові Дей (Howie Day), Павло Бартчук, Гліб Рукашников, Олександ «Ля-Бестія» Андрєєв, Рос Вільямс (Ross Williams), Веслом, Стас Гальюнас, Ікс-Раст (xRust), Микола Изодеров, Антон Решетников, Олег і Фернандо Езра (Fernando Esra)

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

Всім дякую за увагу, за ваш час і… з Наступаючим вас.



Бункер герр ТекстуПримітка перша, класично оправдывающаяся.
Стаття як завжди вийшла значно товщі, ніж планувалося, тому половину довелося відрізати і залишити на майбутнє. Матеріал в частині публікації був сирим і потребував суттєвого доопрацювання. У мене, на жаль, часто виходить так, що я намагаюся втиснути в одну статтю все, що тільки можна описати. А потім ще з місяць відрізаю скибки м'яса. В цей раз все пішло за звичним сценарієм. Спочатку набір ваги – потім примусова ліпосакція. Була просунута анімація тіней, і деякі напрацювання по світу, але… краще менше, але якісніше, ніж намагатися брати об'ємом. Це не лісоповал.

Примітка друга, не підтримує.
В цей раз я не можу собі дозволити підтримку статті протягом півтори доби, як це зазвичай бувало. Це вимагає часу, яким я не маю. У мене залишилося вісім годин вільного часу, куди треба впихнути сон, і куди треба впихнути хоча б трохи відпочинку. Крім сну. Всім відомо, що я гравець, і гравець захоплений. Можна сказати завзятий. Займатися іграми вдається рідко. На жаль. І якщо є можливість розкачати партію в «Stellaris»…

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

Примітка четверта, знову оправдывающаяся.
Інфо-Сфера не працює. Буде введена в дію після Нового Року.

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

0 коментарів

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