Хабрахабр

«Галоп пикселя — часть пятая» — Анимация персонажей. Ходьба

Ходьба (линк) «Галоп пикселя», часть I — базовые понятия, этапы взросления, прикладные упражнения (линк)
«Галоп пикселя», часть II — перспектива, цвет, анатомия и прикладные упражнения (линк)
«Галоп пикселя», часть III — Анимация (линк)
«Галоп пикселя», часть IV — Анимация света и тени (линк)
«Галоп пикселя», часть V — Анимация персонажей.

Мы продолжаем цикл «Галоп Пикселя». Доброго времени суток Хабр. Пространное повествование о пикселях, их жизни, способе их создания, приёмах и уловках в работе с ними. Сейчас, находясь на старте 2019 года, можно с уверенностью говорить, что это не только цикл статей, но и многолетняя сага. Кому нужны причины отсутствия или пауз, если можно просто вернуться к тому, что мы делали, в чём варились, и в чём, даст бог — будем наблюдаться и далее. Мы не будем рассуждать о причинах первоначального «спринта», который затем превратился в многолетний марафон, ибо нет ничего более жизненного, чем сама жизнь. В пикселях, конечно же!

Наконец-то мы подошли к созданию полноценной анимации персонажей. Сегодняшняя публикация станет очередной, и возможно даже поворотной вехой в нашем повествовании. Но сегодня наши персонажи пойдут, а в следующей части даже побегут, завоевав то, что уже давно их по праву рождения. Двумя предыдущими главами мы охватили анимацию света и тени, а также анимацию неподвижных персонажей (idle-animation) без ярко выраженных действий. И пройдут ещё одну точку, которая ознаменует окончание базового цикла. Ещё один плодородный регион. Наши пиксели наконец-то станут живыми.

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

Во-первых, ещё в первой статье цикла я обещал вам рассказать о создании контента для трёх типов игр. Несколько слов о задачах второстепенных. Также я обещал вам рассказать о продвинутой анимации света и тени, и о типах передачи полутонов за счёт штриховки (dithering). Изометрических (isometric games), платформерах (platform games) и тех, что хорошо видны с высоты птичьего полета (top-down games). Задачи, по большому счёту, континентального характера. Каждая из этих тем, не остров и даже не архипелаг. Здесь есть, где развернуться, и есть что копать.

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

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

Допустим, что мы делаем игру в классическом разрешении для игр древних эпох, 320х200 пикселей. Как это часто бывает, началом нашей работы станет постановка задачи. Задача уже не радует, не правда ли? И также предположим, что у нас два цвета на всю графику, и два кадра на любую из анимаций. И даже если это возможно, то… что можно сделать в двух цветах, если один из них фон? Что можно сделать в двух кадрах? Звучит как форменное издевательство. Силуэт? Проверим, так ли это на самом деле.

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

Глава I — Бинарные танцы

— На самом деле важно лишь одно — что человек может и чего он не может.
Капитан Джек-Воробей

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

Ну а вторым цветом будет… фиолетовый. Ради интереса мы используем в качестве первого цвета белый, и пускай это будет цвет жизни и света, ода нашему бытию на этой бренной планете. Но уж никак не черный. Или то, что я считаю фиолетовым. В интересах экономии пространства мы пока что срежем верх и низ нашего полотна на 320х200 пикселей, сосредоточившись исключительно на персонаже. Сегодня мы не будем грустить.

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

Рис.
Глава I. 1 — Где он ждёт

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

Рис.
Глава I. 2 — Где он ждёт с приятелями

Использование компоновок. Даже «12 принципов анимации» аниматоров студии Диснея, Олли Джонстона и Френка Томаса нам в нашей задаче помогут только в одном единственным пункте. Это было бы уместно в случае четырех, шести или восьми кадров анимации. Приём, когда создаются ключевые кадры, и между ними дорисовываются остальные. Но у нас-то на горизонте лишь двухкадровая патетика!

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

Рис.
Глава I. 3 — 24 кадровая анимация сделанная для невышедшего проекта «Drake: The Golden Hind Story», как иллюстрация максимальной нагрузки на кадры, и как следствие на художника.

Можно делать анимации ничуть не хуже, с вдвое меньшим количеством кадров. В этой анимации 24 кадра и надо сказать это было полным безумием. Мне же в давно минувшие годы очень хотелось сделать кинематографичный плафтормер (от англ. К слову сказать, во множестве современных игр выполненных в стилистике пиксель-арта немного кто замахивается на двадцати четырех кадровую анимацию. С игрой как-то не сложилось, но анимации остались, и ждали своего часа, чтобы появиться здесь. «cinematic platformer») и я решил побезумствовать. Хотя бы в виде прикладного материала.

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

Рис.
Глава I. Обычно всё происходит наоборот. 4 — Половина 24 кадровой анимации, как иллюстративный материал для выделения ключевых кадров задним числом. Сначала идут ключевые кадры со стороны художника, потом прорисовка промежуточных.

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

Рис.
Глава I. На базе выбранных ключевых кадров и будет создана заданная анимация. 5 — Половина 24 кадровой анимации, переведенный в «белое и черное» как иллюстративный материал для выделения ключевых кадров согласно задаче поставленной в главе.

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

Компоновки это то, чем собираемся заняться мы, создание ключевых кадров и последующая дорисовка между ними необходимых нам дополнительных движений (посредством промежуточных кадров). Существует две техники создания анимации (согласно «12 принципам анимации») и это – либо использование компоновок, либо прямое фазованное движение. Рисуется первый кадр, а затем ему дорисовываются дополнительные кадры по мере его движения (я бы назвал это «анимацией по обстоятельствам»). Прямое фазованное движение это когда персонаж рисуется как есть. Исключение могут составить заставки или ролики. Это подходит для мультфильма, но не очень подходит для производства графики в играх, где созданная нами анимация сразу уходит в игровой мир в виде персонажа.

Этот приём отлично подойдет для игровых заставок в стиле незабвенных Another World или Flashback. Дело в том, что в случае прямого фазованного движения персонаж может идти куда-то по своим делам, задумчиво почесывая затылок, иногда оглядываясь и возможно даже хихикая над чем-то, и каждый кадр движения, что он будет делать – будет уникальным. Таким образом, мы получаем первое, и надеюсь последнее, в сегодняшней публикации определение. Но в случае если нужно создать несколько кадров анимации, которые при повторе будут работать в цикле (в игровой индустрии в отношении анимации частенько используется не английское слово cycle, а слово loop), и будут исключительно шагом, или бегом – компоновка единственное решение.

Ключевые кадры – это специфические кадры, который аниматор определяет как ключевые, между которыми затем дорисовываются промежуточные.

Чтобы это за специфические кадры такие? Однако формулировка довольно туманна, не так ли? Для себя лично я вывел собственное определение ключевого кадра. В чём их специфика?

Ключевые кадры – это кадры, которые максимально хорошо описывают анимируемое движение в отдельно взятые, ключевые моменты времени этого движения.

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

Рис.
Глава I. Слева — в цвете. 6 — Два кадра обозначенных как ключевые. На изображении хорошо заметно, что левый вариант выглядит скомканным, тогда как правый вариант при уменьшении и соответствующей чистке может решить поставленную в главе задачу. Справа в «черно белом» варианте.

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

А именно, анимации двухцветных изображений на два кадра. Теперь вооружившись хотя бы поверхностным знанием о ключевых кадрах, вернёмся к нашим приятелям, а заодно и посмеемся над собой и нашей дилеммой. Хотя бы по причине отсутствия других кадров! Так как в нашем случае оба кадра, по определению будут ключевыми.

Рис.
Глава I. 6. 7 — Двухкадровая анимация сделанная с оглядкой на кадры с Рис.

У нас есть двухкадровая анимация в диапазоне двух цветов. Мы справились с поставленной задачей. Потому, что любая детализация (цвет, свет или тень) на персонаже, выходящая за рамки силуэта сразу бы расставила всё на свои места, и стало бы ясно, что созданное нами решение не что иное, как иллюзия. Однако стоит отметить, что она и стала-то возможной исключительно по причине ограничения цветов. Не только потому, что с их помощью можно показать, что даже «персонажи на два кадра» могут быть разным в пределах примерно одной весовой категории. Ради забавы я создал семь реплик одного и того же человечка. Но и вероятно потому, что хотел таким образом сказать спасибо группе «Hanggai» под композицию которой «The Vast Grassland» я несколько часов верстал эту часть Галопа, и которая до сих пор держит меня на плаву.

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

Рис.
Глава I. Рассматривается как маленький трибьют группе «Hanggai» 8 — Эмоциональная зарисовка демонстрирующая разницу между персонажами посредством изменения толщины объектов, смены групп пикселей, изменения силута — для придания персонажем разного характера.

Глава II – Триколор

А имя… чёрт с ним.
Капитан Джек-Воробей — Может быть, лучше три шиллинга?

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

Именно такое ограничение по количеству кадров на одну анимацию использовал и до сих пор использует движок RPG Maker (в ряде его версий). Кроме того я вспомнил одну забавную деталь. Но мне это подходит как некий вызов, и возможность проиллюстрировать ещё одну иллюзию, которую мы создадим вместе с вами. Мне непонятны резоны таких решений принятых разработчиками (а их было не мало), в силу какой-то диковинной, инопланетной логики. Прямо сейчас.

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

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

Рис.
Глава II. Они не обязательно должны соответствовать тому, что вы сделаете в финале. 1 — Разные позы одного и того же персонажа выполненные с целью понять его настроение, и формы. Но всегда есть необходимость подумать перед началом работы, а порой и просто прочувствовать что-либо. Нет жестких правил следования.

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

Рис.
Глава II. 2 — Иллюстрация прогресса

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

Рис.
Глава II. 3 — Иллюстрация прогресса

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

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

Рис.
Глава II. 4 — Иллюстрация прогресса

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

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

Рис.
Глава II. 5 — Иллюстрация прогресса

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

Рис.
Глава II. 6 — Иллюстрация прогресса

Выбирайте сами, что вам больше подходит. Сдвигом на один пиксель по вертикали в нейтральной зоне мы получаем эффект покачивания, или… подпрыгивания. Сдвиг всего на один пиксель делает нашу походку более реальной и более живой. В случае полного шага человек обычно чуть ниже, в случае стойки с занесённой ногой… выше. Помните, я упоминал «12 принципов анимации»? Предлагаю на этом не останавливаться. Одним из таких принципов является создание выразительной черты в персонаже.

Рис.
Глава II. 7 — Иллюстрация прогресса

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

Рис.
Глава II. 8 — Иллюстрация прогресса

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

Рис.
Глава II. 9 — Иллюстрация прогресса

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

Рис.
Глава II. 10 — Иллюстрация прогресса

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

Рис.
Глава II. 11 — Иллюстрация прогресса

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

Тот же самый принцип, что мы использовали выше — был использован для одной пост-апокалиптической игры, которая, к сожалению, так и не увидела свет. Было бы некрасиво с моей стороны не нанести визит одному старому знакомому. Игра не стала реальностью, но зато мы имеем обучающий материал, а значит, что работа уже не была напрасной.
Безусловно, движение персонажа более чем шаг напоминает шарканье, а в некоторых моментах даже русскую плясовую, но, тем не менее, он движется, что также наводит на ещё одну мысль. Спрайты делались именно под RPG Maker, с этим странным ограничением на три кадра в пределах секвенции. Они тоже имеют право на жизнь. Работая в ограниченном, или небольшом количестве кадров не стоит бояться больших с точки зрения размера в пикселях, персонажей.

Рис.
Глава II. Использовался в демо-версии сделанной на движке RPG Maker. 12 — Персонаж выполненный с параметрами идентичными задаче главы для не вышедшего пост-апокалиптического проекта «Finder».

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

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

Глава III – Знак четырёх

В честном бою я бы тебя заколол!
— Ну тогда сражаться честно явно нет резона.
Диалог Уилла Тёрнера и Джека-Воробья
— Ты не победил, ты сжульничал!

Пусть анимация будет иметь четыре кадра. Нашу третью главу мы также начнём с постановки задачи. Однако в плане цветов не будем так суровы. Мы продолжим двигаться в отношении кадров постепенно, по нарастающей. Мы уже поняли, что голод и воздержание полезны для понимания сути вещей и отсутствия лишнего веса. Время поста закончилось. Пусть на стол выставят не менее шестнадцати цветов, ибо мы желаем пировать! Но… как же оргии? Условимся также, что если наше обжорство зайдет слишком далеко, мы не будем плакать, соблюдая диетические «тридцать два».

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

Рис.
Глава III. Могут быть выполнены как угодно, в каких угодно видах и стилях. 1 — Эмоциональные наброски, как часть поиска образа будущего персонажа. Их задача не сделать набросок в пиксель-арт стиле, но нащупать те эмоции, тот образ, что вам нужен.

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

Во все времена на любого художника осуществлялось давление со стороны социума, образовательных учреждений, или моды (словом окружающим вас клубка змей в виде тех или иных источников прессинга) заставлявшее его делать что-либо в определенном общепринятом стиле, или в соответствии с общепринятыми стандартами изображения чего-либо, в согласии с этическими стандартами и бог знает чем ещё. Почему я заостряюсь на этом моменте. И даже если не значит, то определённо задевает. К несчастью… чаще всего мнение окружающих для художника много значит. Разумеется, пропуская всё, что валится на вас, через особую призму. Поэтому самое главное в этом вопросе – игнорировать все типы мнений кроме вашего собственного. Если не нужен – просто делайте то, что нравится, и то к чему сердце лежит. Выделяя среди прочего – адекватную критику, способствующую вашему росту, в том случае если вам он, конечно, нужен. Если нужен – отделяйте зерна от плевел.

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

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

Рис.
Глава III. 2 — Иллюстрация прогресса.

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

Рис.
Глава III. 3 — Иллюстрация прогресса.

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

Рис.
Глава III. 4 — Иллюстрация прогресса.

Вернее мужественно сжатые кулачки. Предположим, что свет падает сверху, немного под углом, и поможем объему на куртке, добавим теней, которые отбрасывают руки, а заодно сделаем и сами руки.

Рис.
Глава III. 5 — Иллюстрация прогресса.

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

Рис.
Глава III. 6 — Иллюстрация прогресса.

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

Рис.
Глава III. 7 — Иллюстрация прогресса.

Без обращения внимания на конкретные детали будет довольно сложно увидеть различия между предыдущим вариантом и последующим. А теперь займемся магией. Одна и та же форма рук оживает за счёт перекладки цветов. Но они определенно есть. Чем ближе объект к наблюдателю, тем он светлее, чем дальше, тем темнее. Не меняя формы объекта – мы меняем его цвета. Теперь мы должны провернуть такой же приём с остальными частями тела. Это поворотный момент нашей работы. Однако, не будем забегать вперёд.

Рис.
Глава III. 8 — Иллюстрация прогресса.

Лично мне она напоминает одну стереотипную кепку для не менее стереотипных персонажей, которые так любят вставлять в дешевых комедиях, чтобы создать третьесортный образ грузина, который уже давно не соответствует реальности (а соответствовал ли вообще)? Вам не кажется, что у верхнего персонажа идущего на нас кепка выглядит как-то странно? Добавив на неё света. Давайте-ка исправляться. Чем дальше нога – тем темнее. А заодно, раз уж мы стали работать со Светой, добавим и тени на ноги Джошуа. Обострим цвета в районе теней так, чтобы персонаж стал более объемным в ракурсах, где он идёт на нас, и от нас, в особенности.

Рис.
Глава III. 9 — Иллюстрация прогресса.

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

Рис.
Глава III. 10 — Иллюстрация прогресса.

На виде слева и справа просто добавим один пиксель на носке ближнего к наблюдателю кроссовка. Точно также как мы это уже проделывали с руками – возьмёмся за кроссовки. А вот на виде сзади и виде спереди — придётся поработать. Что-то вроде блика.

Рис.
Глава III. 11 — Иллюстрация прогресса.

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

Рис.
Глава III. На руках форма объекта не меняется, но меняется исключительно цвет, чтобы передать движение объекта в пространстве. 12 — Укрупнённый пример анимации за счёт перекладки цветов. Хорошо видно, что даже один правильно поставленный пиксель заставялет кроссовок как будто сгибаться. На кроссовках используется тот же приём, с незначительными изменениями размера объекта.

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

Рис.
Глава III. 13 — Иллюстрация прогресса.

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

Рис.
Глава III. 14 — Иллюстрация прогресса.

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

Рис.
Глава III. 15 — Иллюстрация прогресса.

После появления света на объекте становится ясно, что некоторые части персонажа выглядят пустыми. Как это часто бывает – одно тянет за собой другое. С таким же успехом она могла быть какой-нибудь ещё бляхой, но мы будем считать, что именно так в пиксель-арте и выглядят почтальонские регалии. Давайте добавим кокарду почтальона на его кепку. Назовём это очередным посвящением «Почтальону» Кевина Костнера, к коему я питаю определённую слабость (сколько их было у меня, почтальонов этих!). Не буду скрывать, практически всё, что я делаю, так или иначе связано с пост-апокалиптикой.

Рис.
Глава III. 16 — Иллюстрация прогресса.

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

Рис.
Глава III. 17 — Иллюстрация прогресса.

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

Рис.
Глава III. 18 — Иллюстрация прогресса.

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

Рис.
Глава III. 19 — Финальная версия Почтальона.

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

Глава IV – Необязательный синопсис

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

Компоновки. Метод создания анимации посредством ключевых кадров с дорисовкой между ними кадров промежуточных в количестве необходимом автору.

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

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

Анимация посредством зеркального отражения объекта. Метод создания полноценной анимации на базе половинной анимации, где вторая половина создаётся за счёт зеркального отражения первой половины анимации и при возможном использовании перекладки цветов.

Анимация перекладкой цветов. Анимация, создаваемая за счёт изменения цветов объекта, а не его формы.

Глава V – Эпилог

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

Безусловно, данного курса может быть недостаточно, в том случае если вы замахнулись на «Another World» или «Flashback». С помощью этих нехитрых уроков и при определённой практике вы сможете создавать графику, которая будет уместно выглядеть в играх класса «Stardew Valley» или «Starbound».

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

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

Xочу выразить им свою признательность за долготерпение потому, что скоропостижно поглотившая меня работа в «Dark Crystal Games», и различные проблемы со здоровьем не давали мне заниматься этим делом с должным усердием. В окончании «Эпилога» я бы хотел выразить благодарность своим Патронам с Патреона, моим дорогим ПП, которые поддерживали меня два года. Поэтому скажу просто – Спасибо, что вы есть! И добавлю, что описать словами те эмоции, которые они мне дарят своей поддержкой, а стало быть, эмоции напрямую связанные с выходом новой главы «Галопа» — не получится.

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

Увидимся на той стороне луны (подмигнул). Ну всё.

Бункер герр Текста

Заметка первая, классически оправдывающаяся.
Если честно состояние сейчас… наверное так себя чувствует старая струна, которую натягивают, чтобы выдать правильный звук. Два года прошло с момента написания прошлой статьи. Для меня это скорее печальная новость, чем какая-либо ещё. С тех пор как я вступил в должность главного художника, по сути арт-директора пост-апокалиптической игры «Encased» от «Dark Crystal Games» моё свободное время куда-то улетучилось. Справедливости ради надо отметить, что физически — далеко не всё. Я бы даже сказал, что его было достаточно для написания статьи, для создания рисунков, и многих других вещей, которыми я обычно люблю заниматься. Но вот незадача исчезли силы. Совершенно. Этот проект как пиявка высосал из меня всё, что было, и каждый день я словно поднимаюсь на амбразуру дота, до которого ещё километров пятнадцать надо проковылять. И пока ковыляешь – вся жизнь проносится перед глазами. Что самое печальное пятнадцать километров понятие метафорическое. Физически я не покидаю стул квартиры, в которой «снимаю» комнатку.

Наверняка все знают, что оптимальное разрешение изображения на Хабре для того, чтобы оно корректно выглядело в статье – 793 пикселя. Заметка вторая, кашевидная.
Самое тяжелое в статье это иллюстрации, их нарезка и верстка. Поэтому сначала делаются иллюстрации, затем делается кратное увеличение, подбирается нужный размер, в каждом случае разный, а затем создаётся «рамка», которая окружает это изображение. И это не очень напоминает кратный размер. А что если это анимация, да ещё разделенная изображений на сорок? И ладно если это статическое изображение. Ты должен внимательно отсмотреть материал, поправить огрехи, подумать и т.д. Такие операции редко, когда можно повесить на скрипт, потому что даже создание срезов иллюстраций – процесс не автоматизированный. Начинаешь лезть на стену. В результате работа растягивается на недели, потому что даже текущий набор изображений нахрапом не взять. Я даже не уверен, что это статья, и что она вообще может кому-то в чём-либо помочь. Сейчас, после двойной вычитки статьи я уже нахожусь на грани легкого помешательства. Вы уж простите ребята, но в голове у меня форменная каша. Вероятно, такое ощущение создаётся по причине публикации после очередного рабочего дня. И мне известен только один способ проверить статью – доверить её публике.

Хотя бы часок. Заметка третья, «стриммерская».
Я практически год ничего толком не стриммил, но сегодня я могу посидеть и послушать музыку. Однако мы всегда можем обменяться разного рода сообщениями. Стрим в поддержку статьи непозволительная роскошь, надо беречь силы на завтрашний рабочий день. Завтра как обычно будет «рабочее радио», так я себя развлекаю в процессе работы. Так что – добро пожаловать. Рубанок и стружка здесь — www.twitch.tv/weilard
«Кручу» звуковые дорожки к играм и фильмам, пока махаю рубанком.

Инфосфера

Термины, определения и дополнительные информационные ресурсы

Анимация — (от фр. animation — оживление, одушевление) — западное название мультипликации: вид киноискусства и его произведение (мультфильм), а также соответствующая технология. (вики-линк)
12 принципов анимации — набор основных принципов анимации, предложенных аниматорами студии Дисней Олли Джонстоном и Фрэнком Томасом в их совместной работе «Иллюзия жизни: анимация Диснея».
(вики-линк)

03. Дата последней правки в статье: 26. 2018 Время: 01:54

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

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть