28 декабря 2016 в 20:21

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



«Галоп пикселя» — часть 1 (линк)
«Галоп пикселя» — часть 2 (линк)
«Галоп пикселя» — часть 3 (линк)
«Галоп пикселя» — часть 4 (линк)

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

В этой статье мы рассмотрим анимацию света плоскостями, когда мы анимируем свет крупными заливками и лишь затем начинаем его детализировать. Анимацию света по контуру объекта, и поведение света на разных поверхностях, иначе на объектах с разными материалами. Три главы. Три пули. Надеюсь, что в цель.

Цель этой статьи показать насколько силён дуэт брата и сестры, Света и Тени в движении. Мы уже видели, как они преображают сцены в статике. Но динамика нам ещё не знакома. Давайте исправим это упущение.

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



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

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

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

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

Пусть светом бьет


— Пусть он станет источником отваги, смелости родником живительного оптимизма
который никогда не перестанет бить…
— Лучше сказать струится.
— Но родник, он бьет…
Генрих Рамкопф и Якобина Мюнхгаузен «Тот самый Мюнхгаузен»


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

Всё может быть простым. Но всё рано или поздно становится сложнее. Так или иначе. Мне кажется, что пиксель-арт, как и жизнь, имеет обыкновение усложнятся по мере следования пути. Здесь можно привести много аналогий.

Мне нравится та, где у вас есть новая машина, и первые тысячи километров вы движетесь с хорошим темпом. Но затем может сломаться колесо, или что-то в машине. Вам понадобятся деньги на бензин. Вам нужны будут средства на питание, воду и другие предметы первой необходимости. Со временем ваше приключение может превратиться в довольно запутанный клубок нитей, в которых будет сложно разобраться, но прежде всего, важен первый шаг – встать с дивана. Повернуть ключ зажигания. И это легко. Порой это и стоит сделать. Невзирая на последствия. Тем не менее, оглянитесь сперва, нет ли вокруг людей, пусть последствия коснутся лишь вас и вашей машины.

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

Парочку кадров отведем на ничего не деланье, и ещё парочку на «игру света». Свет будет падать на куб справа, а затем слева. Не каждый кадр должен сообщать зрителю анимацию. Но каждый кадр, даже без анимации должен сообщать зрителю информацию. Чтобы имитировать засветку от источника освещения возьмем прямоугольники идентичные плоскостям, которые мы бы хотели засветить. Цвет возьмем с фона, как самый яркий свет на сцене. И выставим ему прозрачность. 47% у такого слоя слева и справа. Ну а задержку у кадров выставим 0,5 секунд.



Не тянет на шедевр. Понимаю и принимаю. Но всё с чего-то начинают. Видите лампочку? Она будет показывать нам, откуда идёт свет. Здесь у нас четыре кадра. Давайте попробуем увеличить количество кадров? Введём чуть больше плавности в нашу анимацию. Пусть их будет шесть.



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



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



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

И сами себе ответим – потому что на таком детализированном объекте должен быть другой свет. С учётом рельефа объекта, и с учетом цветов, которые на нём находятся. И давайте условимся ещё об одном. Свет и Цвет очень похожие слова. Но они не одинаковы.

Чтобы имитировать работу света на объекте мы можем вручную сделать цвета светлее (это классический путь, где мы сами рисуем свет), но мы можем также автоматизировать нашу работу, наложив сверху те маски, что мы уже использовали до этого. Для нашей ваты. Только заменив тот цвет, на цвет белый с режимом наложения Overlay.



Значительно лучше. Однако в данном случае свет падает плоскостью на весь объект целиком, без учета мелкого рельефа объекта. Всего несколько полос света на продольных пазах дадут легкую иллюзию объемности этого объекта. Ну и раз уж мы расщедрились на несколько линий (причём действительно линий, а не бог знает чего, вроде хорошего пиксель-арта) то, пожалуй, добавим к этому ящику ещё несколько контейнеров и какого-нибудь персонажа.



Мы похулиганили. Форсировали силуэтные работы и задали на сцене общую композицию. А теперь давайте ненадолго отвлечемся от этой сцены, чтобы наши глаза отдохнули и подумаем над тем, как нам сделать анимацию света исходя из того, что наш объект не просто ящик, но нечто более рельефное. Нечто объемное. Нам нужен сложный объект.

Обещаю вам, мы обязательно вернемся к нашему парню. Правда, с новым оружием. И обязательно его добьем. Запомним лишь, что сейчас мы «били плоскостями», т.е. сделали анимацию, рассчитанную на освещение плоскостей.

Пусть свет струится



— Но родник, он бьет.
— Иногда бьет, а иногда струится. В данном случае лучше, чтобы он струился.
Генрих Рамкопф и Якобина Мюнхгаузен «Тот самый Мюнхгаузен»


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

Некоторые любят коверкать это утверждение. Дескать, больше цветов – больше возможностей. Вранье. Больше цветов – больше путей запутаться. Больше цветов – больше возможностей совершить ошибку. И так, между прочим — больше слов, значит больше таких вот еретических текстов наполненных блудливыми мудрствованиями вместо пиксель-арта. Больше ещё не означает лучше, и данное положение верно во множестве случаев, от художественно-эстетических до повседневно-практических. Безусловно, после познания нищеты и голода, подстегивающих нашу фантазию, неплохо бы и обогатиться, чтобы затем плевать и получать удовольствие, но лишь после.

Итак. Давайте начнем с эскиза. А точнее с силуэта. Мы всё это проходили десятки раз и потому сегодня не станем тратить на это более десятка минут. Пусть это будет гонщик. На мотоцикле. И пускай это будет будущее. Просто потому, что неохота рисовать колеса, а затем их анимировать. Да, еще одно «и». И пускай свет на нашей анимации струится. Обтекает объект по краям, словно тот самый ручей.



Силуэт говорит сам за себя. По крайней мере, можно понять, что речь идёт о седоке. На чем-то. Без колес. Согласно нашей ленивой вводной. Давайте всё-таки обозначим седока более явно. И добавим силуэту читаемости. Начнём мы не со света, но с тени, оставив свет на самое сладкое.



Мне показалось, что сапоги будут ему впору. Но не будем останавливаться на достигнутом. Здесь есть база, а нам нужен дополнительный рельеф. Именно на нём будет играть наш свет в будущем.



Сапоги… когда я нарисовал сапоги мне подумалось, что персонаж напоминает мне героя Роберта Патрика. Терминатор Т-100 в полицейской форме. Чтобы дополнить этот образ стоит добавить ряд деталей. Вроде желтой полосы на штанах, и надписи «Police» на борту нашего футуристичного мотоцикла. Надпись хорошо помогает идентифицировать объект, в том случае если руки художника произрастают из непредназначенных для этого мест. По удивительному стечению обстоятельств надписи же помогают сделать любой техногенный дизайн более осознанным, сообщая зрителю техническую информацию об объекте, делая его достоверным.



Уже лучше. Кое-какой свет. Кое-какая тень. Но всё статично. Мертво. Неподвижно. Как бы нам не сильно напрягаясь обозначить некое движение на сцене? Давайте сделаем это в духе старого кино. Где герои сидят в машине, а вокруг бегают люди с ёлками. В нашем случае ёлками будут фонари, которые будут двигаться позади «наездника». Ну и раз у нас тут движение, давайте подрисуем пару пикселей к тени, чтобы она нелепо подергивалась.



Мы наконец-то добрались до дела. Всё остальное было разминкой. Обычным и рутинным делом за вычетом создания дизайна для техники. Сейчас начнётся то, что ряд читателей называет «магией десяти минут». Этот феномен происходит обычно после нескольких часов работы (не в данном случае, разумеется) когда зритель зевает на стриме и вдруг, ближе к концу изображение оживает, а в последние десять минут наполняется интересными мелочами и деталями. Феномена, по счастью нет. Это называется другими словами. Работа и закономерный результат прямо пропорциональный количеству вложенного труда. Если вы несколько часов полеживали на диване или ковырялись пальцем в носу, то «магии десяти минут» не будет. Получится разве что магия десяти лишних кило, равно пропорциональная количеству часов и дней, проведенных в блаженном бездействии.

Свет падает на нашего офицера сзади. А потому он будет задевать его лишь по кромке, как если бы мы смотрели на лезвие ножа, будучи в темной комнате, а источником света в ней была бы открытая дверь. Грань ножа, обращенная к нам, не отражала бы свет. Но на кромке заостренного лезвия была бы заметной игра света. В один или два миллиметра. В нашем случае свет будет распределяться по объекту линией в один пиксель. Очевидно, что наибольшая концентрация света будет находиться в непосредственной близости от источника освещения. Для того чтобы это понять не нужно быть доктором наук, или учиться в техническом вузе. И в «замедленной съёмке» видно как этот свет падает на объект.



Взглянув на объект при нормальной скорости проигрывания, мы видим, что это более или менее похоже на работу света в реальности. Настолько насколько термины реальности вообще могут быть применимы к пиксель-арту, когда рабочее полотно занимает всего 250х120 пикселей.



Теперь стоит сделать свет куда более объемным, чем прежде. Помните, что было до этого? Анимация света по кромке. Бак объемный, и свет должен распределяться иначе. Да и другой рельеф тоже должен играть следующим образом:



Теперь нужно обозначить блики. Всего в один цвет. У нас их мало. Обозначить так, чтобы они подчеркивали игру света на рельефных частях объектов. Трубках, выпуклых пазах мало понятно назначения на корме, и кромках объектов.



Давайте сделаем укрупненные примеры того как работает свет на выпуклостях. Если приглядеться – всё очень просто. Вся информация о свете передается всего двумя цветами. Вся информация передается за счёт небольшого количества пикселей. Это не так уж и трудно.



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



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



В общем и целом лучше, чем было. Но… всё равно суховато. И верно. Ведь статья у нас об игре света и тени. Дуэт, как мы заявили ранее. А здесь я вижу лишь одно. Соло.

Тень представлена крайне скудно. Давайте повторим силуэт нашего офицера, закрасим его одним цветом и исказим так, чтобы создавалась иллюзия, что на каждом кадре тень от объектов располагается в соответствии с положением источника освещения.



Уже неплохо. Но есть один нюанс. Чувствуете рывок в первом и восьмом кадрах? Нет плавности в анимации. Тень резко исчезает в конце восьмого кадра и не менее резко появляется в первом. Что делать? На помощь придёт прозрачность. Ближе к начальному и конечному кадру анимации стоит ослабить интенсивность тени. У меня даже обоснование найдется. По мерее удаления от источника освещения тень бледнеет и размывается, потому, как направленный источник освещения исчезает и остается лишь один тип освещения. Глобальный. Как в пасмурную погоду. Делает он это, к сожалению, лишь в одну сторону, но… это жертвы на которые приходится идти имея анимацию на шесть кадров. Мы потому и выбрали столь малое их количество. Потому что эта анимация вызов нам же. Вызов самим себе. Научиться быть лаконичными.



Помните нашего парня из первой главы? Мы обещали к нему вернуться. Отводить третью главу, чтобы ручей бил и струился в одно и то же время, было бы расточительным. Мы остановились на том, что мы сделали анимацию света для ящика в центре сцены. Думаю, что стоит добавить тот объект, что на самом деле источает этот свет. Негоже ему летать как духу. Кроме того, добавив машину, мы скроем часть кадров в нашей небольшой анимации. Это даст нам возможность работать всего с несколькими кадрами. Теми кадрами, что могут быть названы информативными.



Машина есть – пусть едет теперь.



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



Уже лучше. Добавим отражение под машиной. И добавим небо. Всего в один цвет. Иногда достаточно пары штрихов чтобы изображение стало законченным. Правда, это не тот случай. Близкий к нему, но не тот.



Мы получили воздух в нашей сцене. И это точка, где можно было бы завершить нашу работу в рамках первых двух глав. Однако всегда есть что доделать. И иногда бывает случай обратный описанному парой строк выше. Когда той самой пары штрихов — не хватает. Не хватает для того чтобы неплохое… стало, наконец, хорошим. Грань эта тонка и неуловима. Однако мы попытаемся её нащупать. И только так это можно сделать. Опытным путём.

При прочем добавленном мы не продолжили работать со светом. Упражнение с офицером дало нам понимание силы контрового света, которое обтекает объекты по краям. Будет неплохо добавить её и здесь. К той анимации плоскостями на гранях куба, которую мы делали до этого. Мы «пробьем» светом края контейнеров, термос и самого персонажа. Я обещаю не заостряться на этом долго. У нас и кроме этого есть дела. Всё будет сделано тонкими линиями шириной в один пиксель.



Теперь стоит поработать с другими выпуклостями. Точно также в один пиксель. Кадров, когда объекты на заднем плане видимы не так уж и много. Если сделать на гранях объектов явные световые акценты, яркие и сочные, то из-за малого количества кадров на видимых нам объектах эти линии будут словно вспышки молний. Нужно быть осторожными и не «светить зрителю в глаза» больше необходимого.
Поэтому теперь «пробьем» краску на контейнерах. Также по краю. Также контейнеры имеют щели, и потому мы обозначим и их, словно свет пробежался по кромке стали.



Давайте обработаем теперь те грани объектов, которые остались нетронутыми. Пусть свет живет и двигается на них заранее, возвещая появление фар машины на сцене до её появления и провожая их, когда машины на сцене уже нет. Это неверно с точки зрения распределения света по поверхности, но иногда (довольно часто) отрицать законы реальности полезно. В угоду художественному образу.



Последний аккорд это спецэффекты. Несколько кадров «следа света» от фар. Как если бы всё это было заснято на видео. Затем чуть более яркое свечение от фар, когда техника попадает в центр кадра и чуть более светлое небо. Всего по чуть-чуть. Как если бы мы добавляли в блюдо приправы, перец и соль.

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



Какие выводы мы можем сделать на основе первых двух упражнений? Давайте оформим их в виде списка, который может быть использован затем в виде памятки:

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

Не всё золото, что блестит


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

Тоже верно и для анимации. Можно играть формами, объектами, светом, тенью и цветами. Как вам заблагорассудится. И каждая партия – будет особой. Один пиксель, всего одна точка могут, и будут, менять всё изображение в целом, будучи проставленными в нужном месте. Когда я писал статью, мне нужно было дописать финальную её часть, но в этот момент вырубилось электричество. Мне ничего не оставалось, кроме как «писать» её в голове, сидя в полутьме и проклиная свою маниакальную привязанность к компьютеру. Вот такое смс-сообщение я отправил своему другу в ответ на обеспокоенность, в связи с исчезновения моей персоны из сети:
— Я ж статью писал! Отними у меня комп… я ж никто! А так, хоть некто с компом.

Всего одна буква меняет смысл этого депрессивного сообщения. Точно также и с пикселями. И когда сырой набросок обретает форму, а скомканная мелодия обретает гармонию, несколько удачных точек превращают изображение в то, что нужно. Здесь важно внимание к мелочам. И вот как раз об одной из таких мелочей я бы хотел поговорить, подытоживая очередную часть «галопа».

Всем нам известно, что по разным поверхностям свет распределяется по-разному. На резине свет не особо заметен, на металле ярко играет бликами, если металл чистый. Играет тускло, если металл не первой свежести (к примеру, покрыт ржавчиной). Игра света на разных объектах зависит от того материала из которого они сделаны. Уровень отражения света у разных материалов разный. Стекло и грязное стекло, бумага или глина, металл и пластик — все они принимают освещение по-разному. С разной степенью радушия, и с разной отдачей в виде отраженного света.

Давайте попробуем оформить это в виде небольшого мини-урока. Представим, что на столе лежат два компакт-диска со звуковыми дорожками к сериалу «Lost». И нет, это не реклама сериала. И «нет» под номером два, это не CD-диски, но их чехлы, так как болванки обычно выглядят идентично. Пусть это будут их упаковки. Мы исходим из того, что правая обложка это глянцевый материал, ну а левая обложка больше напоминает матовую поверхность, которая поглощает свет и не дает ярких отражений. Правая обложка имеет помятости на краях, ну а левая выполнена с линейным тиснением, что еще больше изменяет внешний вид материала.

Таким образом, мы попытаемся имитировать разные материалы, чтобы показать, что свет может и должен распределяться по-разному. Скажу вам честно. Большинство пиксель-артистов отрицают этот элемент визуализации. Во-первых, частенько артистами игнорируется тень в пределах самого объекта. Т.е. объект сразу рисуется со светотенью и анимируется только направленный свет. Во-вторых, частенько игнорируется работа с разными материалами в пределах одного объекта. Это дорого в производстве, за исключением случев, когда где-то на объекте или персонаже присутствует стекло или поверхность с сильным уровнем отражения. В этом случае рисуется быстрый блик и дело с концом.

Тому, безусловно, есть причины. Продолжительность нашей жизни не так уж высока, чтобы заниматься глубокой эстетикой без веских на то причин. Контент для игр требуется изготавливать быстро, по возможности не усложняя себе жизнь. Однако сегодня мы, в качестве образовательного материала, всё же коснёмся этой темы.

Для начала нарисуем «шар света». Радиус с точкой максимальной яркости и точкой полного отсутствия света. Что-то вроде фонаря сверху, или абстрактной лампочки. Нам не до эстетизма. Нам нужно понять, как визуализировать разные материалы в пиксель-арте. Ну и между делом, ещё и в виде анимации. Так что эстетизм мы даже не высадим на следующей остановке. Он просто не сядет рядом с нами. Сразу. И да, это расизм. Безусловно. Но сегодня я спешу. Новый Год близко. А я обещал выпустить эту статью ещё несколько месяцев назад. Так что шары в руки.

Уже знакомый нам приём, когда мы накладываем маску света через режим. И перемещаем её в пределах девяти кадров так чтобы свет двигался более или менее плавно.



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




Мы предполагаем, что темное на обложках это краска, нанесенная на обложку. Краска, как не странно имеет объем, если приглядеться к реальным объектам. А объекты старые склонны деформироваться со временем из-за чего свет на них распределяется неровно. Давайте сделаем такое неровное распределение света на правой обложке.



Искажение формы и последующее искажение света заметно не везде. Как в реальности. Что-то стареет быстрее, что-то медленнее. Куда-то попала капля воды и бумага набухла, где-то влаги не было и это было для обложки великим благом. Предположим также, что правый диск был наиболее часто используемым. И поэтому край обложки загнулся. Раз это произошло, стоит показать светом, что бумага выгнута. Стало быть, свет на ней задержится ненадолго.



Похулиганили и хватит. Это был всего лишь образовательный приём. Давайте снабдим обложку кантиком в один пиксель и добавим линейных бликов для того чтобы правая обложка отличалась от левой обложки радикальным образом.



Займемся теперь левым диском. Он у нас тоже тисненый и тоже рельефный. Вот на нём мы оторвемся по полной программе. Пусть свет гуляет по всему периметру трафаретного изображения. Давайте даже кое-где его поцарапаем. Пусть там будет легкий линейный блик.



И давайте сделаем так, что бедную «ногу» на постаменте совсем выгнуло. Пусть там будет явная впуклость, и пусть свет там играет наиболее ярко.



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



И последний штрих. Самый долгий. Нам нужно добавить на краевых кадрах фактуры. Чтобы дать иллюзию того самого тиснения. И вдобавок, пусть в тот момент, когда свет проходит непосредственно над обложкой на ней появляется чётко заметный линейный штрих. Тот самый, что мы могли видеть в первой части галопа пикселя, когда я показывал приём с потертым металлом. Дело в том, что штриховки и паттерны также могут использоваться анимациях. В частности, для того чтобы сообщить зрителю о другом характере поверхности объекта.

Эти эксперименты очень увлекательны. И порой, как я и говорил ранее, последний штрих преображает картинку кардинальным образом. Согласитесь, что теперь они, действительно выглядят по-разному. И это заслуга именно штрихов, а не чего-либо ещё. Да, мы притушили свет, да мы изменили радиус засветки, но всё это было бы бесполезно, если бы мы не сообщили зрителю информацию о фактуре нашего объекта.



Давайте напоследок взглянем на этот объект ближе. Чтобы увидеть те мелкие детали, что могут быть незаметны на первый взгляд. Это то, что я называю хорошим эффектом. Видите, как на краях играет фактура? Крестовая штриховка соседствует с линейной штриховкой, и в динамике они дают довольно забавный эффект.



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

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

Вам не обязательно безумствовать и покрывать всю вашу сцену ультра анимацией света. Вы можете выбрать какой-то элемент и сделать на нём акцент, оставив всю остальную сцену заполненной статичным, не двигающимся освещением, как я сделал в своём маленьком «Bemidji Project» по мотивам известного телесериала «Fargo». Всего одна табличка играет на свету, но как я понял по отзывам публики, этого оказалось вполне достаточно. Именно об этом я и пытался сказать. Иногда мелочи достаточно, что бы поставить на работе финальный штрих.



Эпилог


Здесь мы с вами попрощаемся. Надеюсь, что ненадолго. И надеюсь, что год грядущий будет богаче на публикации. Обещать ничего не стану, но классически скажу огромное спасибо моим патронам с ресурса Patreon. Без них эта статья вряд ли была бы возможной. Как и в прошлый раз приведу список замечательных людей, что волокли меня на себе сквозь долгие месяцы радиомолчания.

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

В качестве постскриптума отмечу, что статью опять пришлось урезать вдвое. И получается так, что второй части статьи, посвященной анимации света и тени – быть. Она не обязательно будет следующей, но рано или поздно состав, затерявшийся в пути доберется до Хабра. В этом у меня сомнений нет.

Всем спасибо за внимание, за ваше время и… с Наступающим вас.



P.S. В рамках поддержки статьи прошел стрим. К сожалению в этот раз мы не добрались до анимации, ибо времени было немного. Однако мир стал богаче на ещё один пиксель. Запись четырехчасового стрима можно найти здесь: www.twitch.tv/weilard/v/110577402

Ну а результат выглядит следующим образом. И теперь я действительно вас покидаю. Увидимся после Нового Года. На некоторые комментарии, если они будут, я отвечу ещё сегодня. Ещё раз спасибо.



Бункер герр Текста
Заметка первая, классически оправдывающаяся.
Статья как обычно вышла существенно толще, чем планировалось, поэтому половину пришлось отрезать и оставить на будущее. Материал в части публикации был сырым и нуждался в существенной доработке. У меня, к сожалению, часто получается так, что я пытаюсь впихнуть в одну статью всё, что только можно описать. А потом ещё с месяц отрезаю ломти мяса. В этот раз всё пошло по обычному сценарию. Сначала набор веса – потом принудительная липосакция. Была продвинутая анимация теней, и кое-какие наработки по свету, но… лучше меньше, но качественнее, чем пытаться брать объемом. Это не лесоповал.

Заметка вторая, не поддерживающая.
В этот раз я не могу себе позволить поддержку статьи в течение полутора суток, как это обычно бывало. Это требует времени, которым я не располагаю. У меня осталось часов восемь свободного времени, куда нужно впихнуть сон, и куда нужно впихнуть хотя бы немного отдыха. Помимо сна. Всем известно, что я игрок, и игрок увлеченный. Можно сказать заядлый. Заниматься играми удается редко. К сожалению. И если есть возможность раскатать партию в «Stellaris»…

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

Заметка четвертая, снова оправдывающаяся.
Инфо-Сфера не работает. Будет введена в строй после Нового Года.

История изменений:
29 декабря 2016 года, 6:18 MCK (правка опечаток)
Андрей Ляпичев @Weilard
карма
437,7
рейтинг 0,0
художник, пиксель-артист, моделлер и дизайнер
Похожие публикации
Самое читаемое Разработка

Комментарии (51)

  • +2
    Последнее изображение, это скриншот игры над которой я работаю в свободное время.

    Я так понимаю, «Shut up and take my money» придётся ждать долго?
    • +1
      Чего точно не будет так это краудфандинговой кампании. Так что… я просто буду стараться делать своё дело. И находить на него время. Ждать придётся долго.
      • +1
        А можно узнать почему вы решили обойтись без краудфайндинга?
        • +5
          Я не слишком опытен в этом деле. Значит нужен посредник. Начиная краудфандинг кампанию ты даешь некие обязательства людям, которые тебя поддерживают. Если посредник подведёт, то можно остаться без денег на разработку и с обязательствами. В моём положении это непозволительный риск. А жанр adventure не предполагает присутствия в Steam в рамках «Early Access». Это значит:
          — Кикстартер, слишком рисково + затраты собственных средств на подготовку + отсутствие известности
          — Early Access в Steam, несвоевременно + не слишком популярный жанр (adventure) + отсутствие желания бить игру на главы, чтобы запуститься в EA

          Таким образом остаются лишь собственные инвестиции. Или привлечение средств со стороны доверенного лица (коих я на этой планете не знаю). Простите за несколько скомканный ответ, я уже очень много часов без сна и немного подтормаживаю.
        • 0

          Лично я опасаюсь краудфандинга из-за:


          • отсутсвия опыта
          • слабого английского
          • опасения, что будет слишком большая трата времени на поддержку
          • 0
            К сожалению, опыт можно набрать только двумя способами, воспользовавшись помощь кого-то более опытного, но это вводит в управление процессом ещё одного человека, который будет иметь большое влияние в тех местах, где вы слабы. А второй способ метод проб и ошибок, который закономерно ведёт к потере времени и средств.

            «Слабый английский» я разрешил для себя следующим способом — начал говорить. Сперва не знал ничего, вызывал массу критики в свой адрес и взрывы дикого хохота со стороны знающих. Но как говорил один небезызвестный пират «старание в зачёт идет». Не говоря уже о крылатом «Я никогда не боялся быть смешным… Это не каждый может себе позволить» © Барон Мюнхгаузен. С этим у меня не всё гладко, но я стараюсь.
            И в определённый момент всё встало на свои места. Я по прежнему не понимаю, что мне говорят, но зато люди начали понимать меня. А это не мало. Вряд ли мой диалект лучше раннего Пятницы, но, черт-возьми, понимают чертяки.
      • 0
        На данный момент что тормозит разработку — создание кода или арта?
  • 0
    Спасибо! Я впечатлён. Сам не думал, что всё прочитаю, но так затягивает…

    P.S. и всё же исправьте ошибку:
    Мы уже видели, как они преображают сцены в статистике. Но динамика нам ещё не знакома

    P.P.S. А ссылки можно на другие части?
    • 0
      Всегда пожалуйста. Поправлю как голова придёт в норму.

      Первая — https://habrahabr.ru/post/247333/
      Вторая — https://habrahabr.ru/post/261987/
      Третья — https://habrahabr.ru/post/275703/
      Четвертая — https://habrahabr.ru/post/318678/
  • +2
    Как всегда офигенно!
    Благодарю, и с наступающим!
    • 0
      Спасибо. И вас тоже!
  • 0
    Спасибо за очередной шикарный материал по пиксель арту.
    Очень интересно ваше мнение как человека вовлеченного в сам процесс:

    Небольшая «кул-стори» перед вопросом. На дворе считай конец 2016 года. Конец очередного года с различными прорывами (ну куда уж без них) в индустриях. 4К форматы, Виртуальная реальность и прочее. Все больше и больше появляется (есть?) доступных технологий для обычных пользователей, которые дают возможность творить да и зарабатывать в общем на этом. Я человек далекий по вопросам «внутренней кухни», по этому возникли такие вопросы.
    Так вот. Есть ли будущее у пиксель арта?. Не опасно ли тратить свое время на изучение данного вида «искусства» или как любят еще называть — техники исполнения для тех, кто не окунулся с головой еще в процесс? И добавить в продолжении вопроса, про материальную составляющую. Ведь сам действо требует по сути колоссального количества свободного времени требуемого как и на само обучение, так и на развитие навыка и разумеется сам процесс.

    IMHO — На данный момент мнение таково, что сам пиксель арт востребован в довольно узком кругу, некий андерграунд. Используется в небольших инди-играх либо исключительно для хобби или как крайняя степень ностальгии по былым годам. Новыми поколениями в принципе не интересен (есть исключения конечно). Сейчас наступает (наступило) поколение трехмерной графики, которое по моему мнению легче поддается к изучению, требует меньше времени на «смотри какая красота вышла» и имеет поддержку общества и «времени» и тут пиксель арту просто нечего предоставить, былой шарм уже не так удивляет и не так мил…

    Спасибо за внимание, с наступающим!

    • +4
      Будущее есть пока пиксель-арт рисуют, и будущее есть пока есть хотя бы один человек увлеченный тем или иным видом искусства. Даже один человек может многое.

      По поводу «новых поколений которым не интересно»… то как продаются «пиксельные» игры в Steam доказывает обратное. Интерес есть, и хороший пиксель-арт по прежнему в цене. По поводу 3D, которое готовить легче… это не совсем так. Пиксель-арт выбирают потому, что с его помощью игры делать легче чем с помощью 3D. И быстрее. Потому что «легкое 3D» это почти всегда уродство. Именно поэтому сейчас так много одинаково уродливых игр, а не красивой трехмерной графики. Красивых инди как в случае 3D, так и в случае пиксель-арта… мало.
  • 0
    Спасибо за ваши статьи, читаю с самой первой части.

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

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

    Тоже с наступающим. )
    • +1
      Спасибо за добрые слова в адрес публикаций. Это ценно.
  • 0
    Спасибо вам, Вейлард, за замечательные статьи!

    Оффтопик: очень люблю любые ваши стримы за некий уют и теплоту. Всегда подключаюсь, когда могу.

    С наступающим!
    • +1
      Спасибо-спасибо! В следующем году — обязательно обеспечим. Немного уюта и столько же пикселя! ) Вас тоже… с ним. С Наступающим!
  • +1
    Прочел на одном дыхании, как и прошлые статьи. Они действительно интересны и весьма доходчиво доносят, даже до такого тугодума как я. Спасибо!
  • +1

    В предпоследней картинке (фарго) мечащийся поднатиском ветра 'флаг" и качающаясяттабличка демонтируют с ритмом и направлением падающего снега. При тех порывах и выхлоп авто сносило бы влево..

    • 0
      Обычный гротеск. Кроме того, при использовании восьми кадров на анимацию довольно сложно перемещать объекты в пределах сцены. Есть много резонов по которым анимация была сделана такой, какой она была сделана.
      • +1

        Вы в абзаце перед этой картинкой пишете что важно не число и яркость эффектов а гармония в картинке. Вообще вся статья супер но отвесный, неспешно падающий снежок на фоне такого ветра что качаются даже шланги на заправке как раз создает дисгармонию в картине… если его просто убрать ощущения От проделанной работы будут на много достовернее.
        Статья приемы великолепны. Зачем все портить такой мелочью? (Я с телефона и не заметил как т9 меня корректирует. Дурацкое слово в предыдущем комментарии следует читать — дисонирует)

        • +1
          У меня свой взгляд на вещи, ему и я и следую. Гармонию каждый человек воспринимает по разному. То, что плохо для одного — хорошо для другого. И это — абсолютно нормально. Поэтому в данном случае я не вижу дисгармонии. Поэтому я не рассматриваю этот снежок как мелочь, которая всё испортила.
        • 0
          Частенько художники прибегают к приёму гиперболы — преувеличению, так эффекты кажутся выразительнее. К тому же, поведение влага говорит о том, что флагшток «дешевенький» и вот-вот отвалится даже от слабого ветра =)
          • 0
            вы когда нибудь заправляли машину? заправочные шланги дубовые и их колебания на ветру аналогично флакштоку косвенно свидетельствуют что ветер нешуточный. При этом снежок падает как будто штиль…
            Раз художник имеет позицию и готов её отстаивать это его право и его дело и я «заткнулся»
            зачем «подпевать» не зная его резонов?
            Он убедительно и внятно рассказывает в начале как блик освещения меняется даже от того что на обложке есть фактура материала или «тиснение»… это очень глубоко и правильно, я снимаю шляпу. На анимацию блика на баке ховербайка можно любоваться часами.

            Раз в «Фарго» он говорит что медленные снежинки это дань его внутернним компромисам я готов принимать, я лишь заметил что есть детали которые у меня как стороннего зрителя вызывают сомнения.
            И только
            • +1
              Неоднократно говорил, что измерять пиксель-арт категориями реальности это довольно сложная задача. Я бы даже сказал опасная. В мире где и палец человека, и шланг заправки, и древко копья частенько имеют в толщину не более одного пикселя. На многие работы ограничения накладывают не только размеры изображения, но и количество кадров.

              Пока человек не садиться делать анимацию он не понимает почему всё делается так, а не иначе. И только сделав по-своему он может понять, что правильно в соответствии с реалиями нашего мира далеко не так красиво и приятно глазу, как нечто гротескное, искаженное, вымышленное, работающее вопреки законам физики и общепринятым порядкам.

              Я считаю, что измерять пиксель-арт критериями реальности дело неблагодарное. Всё-равно что пытаться подсчитать количество патронов в обойме того или иного пистолета размером в четыре пикселя. Дискуссия обреченная на провал, или, по крайней мере, тупик.
  • +1
    Как всегда — спасибо! Изумительный материал и подача!
    Желаю побольше времени на сон в будущем году и осуществления всех планов! С наступающим! :)
    • 0
      Спасибо! И вас тоже с наступающим! И, да… безусловно. Времени хочется. И на сон, и на творчество.
  • +1
    Супер! Утянул, читаю… Как обычно, впрочем. Эх.
  • +1
    Первый раз в жизни посмотрел твич, очень круто и душевно. Статью тоже прочитал от точки до точки, когда запустил твич вначале даже не понял что это живая трансляция.
    • 0
      Ну… (ковыряя ножкой пол) у нас всегда так. Есть небольшая тусовка, где собираются пиксель-артисты, разработчики и программисты определенного склада. В некоем смысле всё это походит на виртуальную семью. Только не семью с картинки, а ту где все собачатся, хулиганят, спорят и ссорятся, мирятся и испытывают друг к другу симпатию. Т.е. полный набор эмоций для хорошего заряда. В хорошие дни. Бывают и плохие. Как и у всех, впрочем.
  • +1
    Пиксель-арт люблю и пользую, но у меня оно само так исторически сложилось, из экономии ресурсов. Канонов не знаю. Вопрос возник.

    Почему не используется сглаживание? Даже когда размер палитры вполне позволяет добавить пару-тройку цветов. Вот есть у нас нечто чёрного цвета, например, надпись DIG IT, что над катом, и мы точно знаем, что оно будет на статичном белом фоне. Почему не складить края серым цветом?
    • 0
      Каждый сам выбирает себе путь. Кто-то любит сглаживать, кто-то нет. Кто-то тремя цветами, а кто-то одним. Тут всё зависит от собственных предпочтений.
  • +2
    Примерно год назад я имел честь ознакомиться с предыдущими статьями цикла «Галоп пикселя».
    Такую любовь к предмету повествования редко встретишь, особенно в технических статьях.

    И это очень вдохновляет. Как год назад вдохновило и меня на занятия пиксель-артом.

    Огромное спасибо, Андрей! С Наступающим!
    • 0
      Спасибо Мастак! Спасибо! Я тоже тебя люблю. Тоже с Наступающим. Желаю тебе здоровья, как и всем читателям, впрочем. Я примерно так и полагал. Если рассказать о пиксель-арте как есть, без обиняков, т.е. что чувствуешь, как делаешь, то возможно будет интересно. И, если честно, не ожидал теплого приёма на откровенно техническом ресурсе. Но случилось маленькое чудо. Встретили тепло. Что приводит меня к ещё одному выводу, вернее привело уже давно — нужно придерживаться своего пути и идти им. Чтобы не случилось.
  • +1
    Майн готт, как я скучаю по старым пиксельным квестам типа Loom. Спасибо что дали возможность окунуться в то самое настроение!
    • 0
      Всегда пожалуйста. Заходите. Старое тоже любим и чтим.
  • +1
    Спасибо огромное за за такие мануалы)
    • 0
      Кто-то же должен (смеется). А то пишут так скучно, что спать хочется. Как можно скучно писать о творчестве… и зачем писать если собираешься наскучить читателю. Но это так… мой взгляд на вещи. С мнением редакции и большинства он может не совпадать.
  • 0

    Спасибо за очередную шикарную статью! Я в игры не играю (не сложилось), но единственная купленная мной игра — это King Arthur's Gold за ее графику.
    Так же не в целях рекламы (я не имею никакого отношения к этой программе) могу всем увлекающимся посоветовать крутой редактор фоток в 8битную графику: 8Bit Photo Lab, Retro Effects

  • 0

    Вы не пробовали в конце анимации освещения от машины на контейнере добавить уходящий красноватый блик? От задних фар, по-идее передние только вперёд светят.


    И ещё вопрос по мотоциклисту. Источник освещения за мотоциклом, но мне кажется, что при таком направлении освещения элементы под надписью police будут оставаться в тени. Вы добавили там блики "для красоты" или из каких-то других соображений?


    P.S. Спасибо за статью!

    • 0
      Нет. Не пробовал.
      Блики могут быть от света направленного с другой стороны. От наблюдателя.
    • 0
      Думаю, что картинка прежде всего должна быть красивой и привлекать. Я немного устал уже говорить о том, что «честные» изображения порой источник скуки. В Голливуде не просто так используют контровые источники освещения. Не один десяток лет в их качестве был синий и красный. Это делалось не потому, что это реально, и не потому что так всё и выглядит в реальности, но потому что это было эффектно и красиво.
  • +1
    Крутяк! Никаких тебе "… а теперь дорисуем оставшиеся детали совы", всё разжевано и на ложечку положено.

    Обожаю пиксельные анимашки! Я хоть и посматривал стримы время от времени, но всё равно половину пропустил. Тем приятнее обстоятельно всё прочитать и пересмотреть. :)
  • 0
    С большим сожалением покидаю работу. Это означает, что комментирование с моей стороны вряд ли будет возможным. Набирать ответы на смартфоне мука адская. Может быть что и придумаю. Всех ещё раз с Наступающим. Увидимся в новом году!
  • 0
    Превосходная статья. Читал с упоением. Побольше бы подобных интересных статей с примерами на Хабре. Вас с Наступающим! А я пошёл читать предыдущие части)
  • +1
    ух, каждая публикация из серии «Галоп пикселя» — это просто праздник какой-то :)
    я не художник, не дизайнер, а всего лишь простой программист, правда любопытствующий насчёт 2D/3D графики и игростроя… и я в восторге от того, как простые (на первый взгляд) картинки развиваются, дорисовываются (согласно определённым правилам) и буквально таки оживают в процессе раскрытия темы публикации!
    ощущение, как будто я становлюсь свидетелем проявлений подлинного искусства… хотя, почему «как будто»? :))

    P.S.:
    заодно, хочу поздравить автора с наступающим Новым Годом, пожелать дальнейших творческих успехов, чтобы муза не покидала и удача была :))
  • 0
    Работа, разумеется, офигенная. Только вопрос о «колбасе» на ветру — почему решил именно такую анимацию? Количество кадров? Колбаса действительно так себя ведёт на ветру?
    • +1
      Забавно, потому что я про тоже спрашивал у автора в вконтакте, когда он выложил эту работу. Слишком равномерно колышется. Дело в ограничении кадров — всего 8.
      • 0
        Спасибо! Мне даже не надо особо комментировать. Малое количество кадров частенько накладывает свои ограничения. В этом и есть вызов. Впихнуть как можно больше информации с заведомо ограниченными входными условиями.
  • +1
    Смотрю Ваш твич и читаю посты! Спасибо, что доносите полезный материал до аудитории… хотелось бы, конечно, чуть чаще, а то приходится ожидать выхода новой статьи, как Half-life 3)
    • 0
      Спасибо на добром слове. Не всё разделяют любовь к маленьким пиксельным лодкам, что несутся в толще воды, которую я создаю вокруг непосредственного материала, но… бог с ними, черт-возьми. Свой путь… есть свой путь. И, да… мне бы тоже хотелось бы чтобы материал поступал чаще. Забавно, но я не первый раз встречаю такое сравнение в адрес своих статей в сети.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.