Руководство по созданию пиксельной графики для игр

      Игры    Пикселарт    Уроки   Магазин    Ссылки    Контакт GAS 13    
  SO YOU WANT TO BE A PIXEL ARTIST?
Автор: Tsugumo (перевод 1-2 части Gas 13, перевод 3-11 части Smudgy, редакция Zuiki)

Часть 11: Анимируем простую атаку

На этой странице МНОГО анимированных гифов... Они могут чуть подтармаживать. Чтобы посмотреть их на нормальной скорости, кликните на каком-либо гифе правой кнопкой и выберите пункт просмотра картинки в отдельном окне.

Итак, мы ознакомились с основами создания и анимирования спрайта... но на одних только копировании и вставке вы далеко не уедете. Если ваш персонаж должен вертеться вокруг своей оси, вам придётся рисовать его в новых позах, так или иначе. Как обычно, сначала давайте взглянем на примеры из игры Street Fighter Alpha 3:

Street Fighter Alpha 3Street Fighter Alpha 3Street Fighter Alpha 3

Street Fighter Alpha 3Street Fighter Alpha 3Street Fighter Alpha 3

Street Fighter Alpha 3Street Fighter Alpha 3

Если анимации подтормаживают, это даже хорошо... Попробуйте подсчитать количество кадров в каждой анимации. Также оцените разнообразие присутствующих движений. Круговой удар Гила длится 9 кадров. Его слабенький удар - это простой тычок на 5 кадров. Здесь только 2 кадра были нарисованы с нуля: начальный кадр "стояния" и конечный, где рука выброшена вперёд. Промежуточные довольно легко получить, работая непосредственно с пикселами, тут использовался такой же подход, как и при анимации дыхания. Я поставил посередине гифы Карины, ну, потому что они клёво смотрятся, хех... Великолепные движения. Удары ногами имеют хорошую хлёсткость, удар с оборота тоже замечательно выглядит. Удар Сагата - это всего лишь пара кадров, потому что после завершения движения ногой в обратном порядке идут кадры, использованные ранее... Таким способом можно существенно сократить количество использованных кадров, только не перебарщивайте. Данный метод прокатил у Сагата, а вот на ударе Гила (вверху справа) не сработал бы, так как он выбрасывает руку строго горизонтально и она не идёт вниз, как при окончании удара... поэтому, если пустить кадры в обратном порядке, получится, что Гил бьёт кого-то сзади локтём. Вам решать, какое движение будет подходящим в атаке... Если у вас есть что-нибудь вроде видеокамеры, вы можете даже заснять себя совершающим нужное движение и посмотреть, какие конечности куда идут при настоящем ударе.

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

В этих спрайтах идея такова - нарисовать от руки каждый кадр, отсканировать и перевести в пикселы. Исходя из собственного опыта рисования спрайтов, я по-прежнему настаиваю, что нужно упрощать себе работу, где только можно, то есть рисовать для анимации лишь необходимое... Конечно, вы МОЖЕТЕ детально проработать лицо в каждом кадре, но для этого нет особой причины, так как мысленно вы себе представляете, что "выражение лица во время анимации будет постоянным". Точно так же и при рисовании кадров... Если вы знаете, что "в 5-м кадре будет слегка двигаться рука", то незачем тратить время на отрисовку 5-го кадра, ибо вы его создадите на стадии пиксельной обработки. Будь у вас большая компания с кучей художников, с отдельной командой для раскадровки и ещё одной для ретрейсинга этих самых кадров, вам волей-неволей пришлось бы показывать в кадре каждую деталь, так как люди, занимающиеся переводом бумажных рисунков в пикселы, попросту не знали бы, чем заполнять промежуточные кадры, так как данное знание оставалось бы у художников в головах. Вот кое-какие наброски из Капкомовского Street Fighter:

Street Fighter

Street Fighter

Тут много кадров... Верхний пример ещё ничего, но вот на нижнем их просто огромное количество, а там показано малюсенькое движение. Последние 3 кадра практически неразличимы, эти изменения можно нарисовать непосредственно в пикселах... НО - Capcom большая компания, и если у вас такая же туча народу, то вы можете позволить себе подобные вещи. Если вы когда-либо видели спрайты из Street Fighter 3 (я не нашёл ничего в сети, так что вам придётся сходить в зал игровых автоматов, чтобы посмотреть их, а заодно, пока будете там, зацените игру Capcom VS SNK, потому что в ней потрясные анимации), то поймёте, почему здесь нарисовано столько кадров... Это выглядит ЧРЕЗВЫЧАЙНО плавно. На практике мы могли бы обойтись каждым вторым кадром из верхнего ряда, всё равно анимация была бы превосходной. Кадры сверх необходимых сделают её плавнее, но это необязательно, ибо мозг наблюдателя и так заполнит пробелы на месте пропущенных кадров. Именно поэтому не стоит перемещать кулак на один пиксел за раз при анимации удара... Оставьте приличные "скачки", и мозг зрителя сработает не хуже компьютера: "Окей, он переместился оттуда вот туда" - и сам воссоздаст несуществующие кадры за те доли секунды, что идёт анимация. Обратное утверждение неверно: нехватка кадров, особенно при перемещении объекта на заметную дистанцию, смотреться будет УЖАСНО.

Вам придётся научиться определять минимальное количество кадров для нормальной анимации. Как и с рисованием, для этого дела не придумали формулы. Это достигается практикой и самообучением. Достаньте видеокассету с мультфильмами, пройдитесь по сценам кадр за кадром и сами увидите, что фреймов там хватает. Аниме для этого прекрасно подходит, потому что идёт с низким фрэймрейтом и содержит только важные кадры. Диснея с его высокой скоростью смены кадров изучать труднее. Если вы посмотрите на удары Брюса Ли или Джеки Чана, то заметите, что их движения укладываются в 2-3 кадра. Примерно к тому же стремится аниме... получается "реалистичное" взрывное впечатление от движений. У Диснея всё красиво, анимации очень плавные, но удары (я сужу по воспоминаниям о фильме Mulan) выполняются медленно, им недостаёт импульса, который можно получить, убрав парочку кадров. Для диснеевских фанатов (и тем, кто думает, что мы, любители аниме, плохо относимся к творчеству данной студии): я не утверждаю, что мне не нравится Дисней и всё такое, они делают великолепную работу... Но мы говорим об экшне и драках, и аниме в целом даёт ту резкость ощущений, которой не хватает Диснею, а это для нас при изучении спрайтовой анимации гораздо важнее.

Слишком много кадров, и желаемый эффект не получится... Как раз поэтому большинство 3D-анимаций смотрятся плохо. Куча фреймов, и всё движется ТАК плавно, что реалистичным быть просто не может. Это распространнёная ошибка начинающих, т.к. при работе в 3D компьютер добавляет кадры в промежутках и люди этим злоупотребляют. Лучше меньше, да лучше... Как в пинке Карины, посмотрите на те гифы вверху. У неё знатный выхлест в этом ударе, и это ВЫГЛЯДИТ мощно. Нога отставлена назад, согнута в колене и выброшена вперёд - там и впрямь всего три кадра. Показывайте только значимое, ибо избыток фреймов может всё испортить. Наверняка в третьем SF было огромное количество кадров, но только в "медленных" частях. В верхней последовательности от руки нарисованных поз можно видеть, что в движении этого парня кадров хватает... К сожалению, следующий кадр обрезан, но там корпус персонажа развёрнут на 180 градусов относительно последнего видимого фрейма (наблюдаемая там рука - левая). Движение очень плавное, но они знали, когда нужно обойтись меньшим числом кадров и что быстрый скачок делает анимацию живее и красивее. Опять же, этому вы можете научиться, только изучая работы других. Итак, достаньте себе пару анимешных фильмов (начните со Street Fighter, его можно найти где угодно) и изучите сцены с драками кадр за кадром.

Я уже рассказывал о рисовании и ретрейсинге кадров, а так как в этом разделе руководства я собираюсь заниматься только анимацией, то... я не буду делать это чересчур подробно, ибо и вы, и я, КОНЕЧНО же, уже прочитали предыдущие части, хех... Мне нужно что-то вроде удара ногой, потому что обычно на них отводится больше движения, чем в ударах руками, и это как раз то, что нужно для демонстрации. Я выбрал простой боковой удар, как у Сагата, и теперь распланирую свои действия:

animating basic attack

В качестве персонажа я избрал девчонку в свободных штанах... почему именно в свободных, прояснится чуть позже. Я сделал серию набросков в углу страницы, чтобы уточнить движение... Получилось 7 кадров. Хочется всё-таки 8. В том кадре, где её нога находится вверху и собственно наносит удар, штанина на этой ноге свисает вниз. Я добавлю кадр, в котором нога и корпус останутся в том же положении, а вот штанина продолжит движение вверх по инерции, ведь так обычно происходит на самом деле. Я не рисовал такого раньше, но попробую сейчас. Чем больше я пишу в этом руководстве, тем больше самобучаюсь. Итак, я собираюсь добавить этот кадр с выхлестом штанины и выяснить, какой получится эффект. И заметьте, я не собираюсь его РИСОВАТЬ... Я сделаю этот кадр на уровне пикселов, так как работы тут будет немного, а если бы я его нарисовал, то после ретрейсинга он был бы похож на предыдущий фрейм и почему бы тогда не начать как раз с этого предыдущего? Я могу убрать последний кадр, когда она возвращает ногу - не знаю, понадобится ли он... Одного фрейма с согнутой в колене ногой может быть достаточно для наблюдателя, и он поймёт, что она ставит ногу на место. Следующий шаг - превратить наброски во что-то более осмысленное:

animating basic attack Street Fighter

Каждый из этих набросков умещается на четвертинке обычной бумаги формата А4. Они отсканированы тем же способом, который я объяснял в главе о рисовании спрайтов, можете посмотреть её, если хотите узнать о подходящих настройках сканера и т.д. Идеально будет завести блокнот и работать с ним, потому что можно пролистывать его и сразу наблюдать ваши анимации, к тому же, все страницы в нём одного размера. У меня под рукой блокнота не было, зато я нашёл пачку бумаги и сымпровизировал, нарисовав маленькие направляющие уголки слева вверху и справа внизу. Когда я подкладывал сверху новый лист бумаги для следующего кадра, то следил, где были маркеры, чтобы выровнять листы. Если вы работаете в условиях ограниченного размера спрайта (например, не больше 64х64 пикселов), вам могут понадобиться рамки, обозначающие ваш размер... Разметьте себе квадрат, чтобы не выходить за допустимые пределы. Слава богу, размеры спрайтов в наши дни не имеют ограничений.... В игре Marvel VS Capcom Мегамэн изображён маленьким спрайтом, а Халк в то же время просто огромен. НО работать с ограничениями - в целом полезно, это приучает всё продумывать заранее.

Я решил-таки выкинуть последний кадр и добавил лицо, это не заняло много времени. По какой-то причине я нарисовал ногти на пальцах ног, которые, как можно видеть на уменьшенных версиях картинок, превратились в большие чёрные пятна. То же самое произошло и с пальцами, а я ведь совсем чуть-чуть уменьшил кадры, я ещё не получил нужный размер. Да, я сделал ей перевязанную правую руку в первом кадре, но потом решил избавиться от бинта... это из-за отзеркаливания. Вы ведь вряд ли захотите рисовать кадры для каждого бойца в правой и левой стойке. К тому же, в большинстве современных игр спрайты обычно рисуют направленными в одну сторону, а игровой движок зеркалит их в другую сторону. Старые игры (в дни SNES/Genesis) использовали этот подход ради экономии места. Особенно это относится к файтингам, потому что там МНОГО кадров... Небольшая ремарка: на штанах одного персонажа из Street Fighter вдоль штанины было написано MAXIMUM, потому что это слово при вертикальном написании (буква под буквой) в обычном и отзеркаленном виде выглядит одинаково. Если бы там было, допустим, слово FIGHTING, некоторые буквы перевернулись бы задом наперёд, и художникам пришлось бы рисовать набор зеркальных кадров, где изменены только эти буквы, что совершенно неэкономно с точки зрения места.

Вы скажете: "Ну, это бьло в старых играх... как насчёт нашего времени, когда нет ограничений на количество спрайтов в игре?" Хотите верьте, хотите нет, но этот подход до сих пор практикуется... Я интересовался и добыл скриншоты игры Guilty Gear X (один из новых и невероятных файтингов, если не превосходящий, то равный Капкомовским вещам в плане графики), там я увидел парня с мечом, он его носит на левом плече и вытаскивает правой рукой... А когда он смотрит в другую сторону? Меч оказывается на другом плече и вытаскивается левой рукой! Обычно люди этого не замечают, потому что действия разворачиваются быстро и их голова занята мыслями, какую кнопку нажимать, чтобы этим мечом ударить.

Я думаю, игры до сих пор зеркалят спрайты как раз потому, что в них используется гораздо БОЛЬШЕ кадров, чем в старых играх... Там атака занимала 3 фрейма, сегодня это 8 фреймов. Вам придётся рисовать по 8 кадров для левой стойки и для правой, при этом придётся вносить много изменений. Там, где меч при ударе будет идти к экрану (и от него в перевёрнутой ситуации), вам придётся рисовать этот удар с другой стороны корпуса, это потребует много работы, и есть ненулевая вероятность, что этого никто даже не заметит. И ещё вопрос, понравится ли это игроку... Это может несколько сбивать с толку: одна и та же атака выглядит иначе в различных стойках, люди начнут раздумывать: "Будет урон больше, если я смотрю вправо? Или я бью быстрее, когда смотрю влево?" В общем, переворачивание спрайтов (флиппинг) - это нормально... Все это делают. Именно поэтому у большинства персонажей симметричный дизайн.

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

animating basic attack

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

Вы можете поинтересоваться: "Почему бы не использовать прежние кадры? Зачем тратить время на полный ретрейсинг, когда на этих рисунках и так получены тонкие и аккуратные линии?" Для начала, у них неправильный размер... но уменьшить-то их я могу хоть сейчас, так что это не проблема. Главная причина - это анти-алиасинг (сглаживание)... На этом этапе - это самый опасный враг... Смотрите...

animating basic attack

Anti-aliasing - это способ сглаживания рисунка... Если там присутствует чёрная линия на белом фоне, то внутри и вокруг неё добавляются пикселы серого, и издалека линия кажется более "гладкой", ровной. Это, безусловно, хорошо для плакатов и т.п., но для спрайтов это не подходит. Из-за того, что пикселы при этом смешиваются, получаются оттенки светло-серого (вместо белого) по краям контура спрайта, как видно на рисунке выше. В играх не используется анти-алиасинг (за исключением новейших трёхмерных), потому что процесс расчёта новых оттенков для всего подряд довольно медлителен. Если спрайт перемещается на фоне радуги, то алгоритм должен рассчитать новые цвета для каждого пиксела фона... это не подходит для сегодняшних игр. В приставочных играх всё выглядит чуть более сглаженно, из-за того, что экран телевизора даёт небольшой эффект анти-алиасинга... причина в их способе показа изображения. Играя на компьютере (на эмуляторе, например), вы видите все пикселы до единого, так как экран монитора более точен. В общем, анти-алиасинг может испортить ваш спрайт. Вы, конечно, можете уменьшить спрайт, а потом убрать эти лишние пикселы, но, как оказалось, этот процесс занимает столько же времени, сколько повторный ретрейсинг, поэтому обычно я делаю последнее. Ещё один довод против анти-алиасинга: пальцы и ногти слились в одно целое и их трудно различить. Делая ретрейсинг пикселами, я могу выделить эти детали и сделать их чётче. Последний камень в огород - спрайт после анти-алиасинга состоит аж из 37 цветов. Если вы работаете с палитрой из 256 цветов (стандартный размер для палитры VGA, а также для приставок SNES и Genesis), то вы, считай, влипли. 37 цветов только для "чёрного и белого". А если бы у вас были разные цвета для куртки, штанов, кожи и т.д.? Смешавшись с чёрными контурами, они дали бы, допустим, 120 цветов, а это уже почти половина палитры... А вы ещё хотели 3 персонажа на экране и фон впридачу, ага, щаз... Ну а делая рейтресинг вручную, вы можете контролировать конечное число цветов. Даже в игре Capcom VS SNK, это самый новый и красивый файтинг, для каждого спрайта используется только 16 цветов.

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

attacking sprite

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

Также я увеличил длину ноги при ударе, чтобы он покрывал большее расстояние. Частая ошибка новичков: их изображения атаки выглядят скучными из-за еле поднятой ноги или руки. Обычно атаки направлены прямо вперёд перед бойцом. В игре появляется элемент стратегии, если атаки имеют различные эффективные расстояния, так что убедитесь, что есть причина именно для такого удара. Если существуют ограничения на размер спрайтов (64х64, например), вы должны будете обеспечить удары только вперёд (никаких движений назад, как отведённая рука у нашей девушки... руку пришлось бы прижать к корпусу, и задней точкой спрайта были бы спина и волосы), то есть сможете изображать дальнобойные атаки лишь в пределах заданного размера, а уж игровой движок будет всё смещать и выравнивать, как полагается. Представьте, что вы заключены в невидимый куб (как мим, хех): сделав стойку в середине свободного пространства, во время удара ногой вы попадёте по стене. И для того, чтобы ваша нога распрямилась полностью, вам придётся отойти назад, но тогда спина упрётся в противоположную стену. Другой способ (которым можно показать действительно длинные атаки... как удар рукой Дхалсима в Street Fighter) - продолжение атаки заходит в следующий спрайтовый квадрат, который рисуется рядом с обычным боксом персонажа. Наиболее простой метод, конечно же, - это упросить вашего программиста сделать движок, который поддерживает спрайты любого размера, хех...

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

ДРУГАЯ важная деталь - это оттенки и тени цветов, шейдинг. Шейдинг - это изменение основных цветов спрайта с учётом расположения источника света, в данном случае он находится впереди нашей героини. "Но когда мы переворачиваем спрайт, так, что она смотрит в другую сторону, то получается, что источник света также двигается! И что будет, если она дерётся против самой себя? Будет похоже, будто источник находится между персонажами! Это не будет странно?" В теории да... но как в случае с переворачиванием оружия и тому подобных вещей, вам придётся жертвовать кое-какими принципами. Можно продублировать каждый кадр и изменить освещение в них, но это займёт кучу времени и кадров, и всё ради эффекта, который, скорее всего, останется незамеченным. Даже создатели последних файтингов придерживаются такого мнения... Можно источник света расположить между спрайтом и экраном игрока, чтобы тени возникали у контура персонажа. Правда, это выглядит странновато, к тому же, нельзя показать объём в самом персонаже: например, уже не положишь тень на дальнюю ногу, а этот простой приём помогает игроку представить персонажей трёхмерными, а не плоскими картонками.

Теперь соединим все эти кадры и получим анимированный гиф:

animating basic attack

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

Содержание:

Автор этого сайта получил разрешение на размещение этого урока здесь. Чтобы разместить этот урок на своем сайте, вы должны получить разрешение автора.

  урок Photoshop пиксельное меню
Пиксельное меню
Урок пикселарт
anti aliasing
Antialiasing
Урок пикселарт
 
  изометрия
Изометрия
Урок пикселарт
so you want to be a pixel artist
So you want to...
Урок пикселарт
 
  пиксельное лицо
Пиксельное лицо
Урок пикселарт
урок пиксельной графики анимация водных поверхностей
Анимация воды
Урок пикселарт
 
  изометрический бассейн
Бассейн
Урок пикселарт
Урок рисования
Урок рисования
Урок Photoshop
 
  Урок фотошоп рисунок по фотографии
Рисунок по фото
Урок Photoshop
рисуем волосы Урок фотошоп
Рисуем волосы
Урок Photoshop
 
  рисуем волосы Урок фотошоп
Рисуем волосы
Урок Photoshop
Урок Photoshop рисуем глаза
Рисуем глаз
Урок Photoshop
 

(c) 1997-2016 Алексей Гаркушин