Как нарисовать спрайты для игры программа. Adobe Photoshop: Рисуем и анимируем персонажа в технике Pixel Art

Часть 9: Создание спрайтов для игр-сражений

Итак, мы поработали над созданием маленьких 16х16 спрайтов: Они просты, милы и традициональны для консольных RPG-игр. "Но я хочу сделать экшн-игру: что-нибудь с большими спрайтами! Ну вы знаете, что-то вроде файтинга от Capcom (компания Capcom прославилась своими играми для игровых автоматов - прим. пер.)". Быть может, из-за настоятельного желания рисовать классные, большие спрайты, вы пропустили предыдущие секции туториала и не занимались созданием маленьких изящных спрайтиков. Если я прав, то вернитесь и прочтите пропущенное. Хоть размер спрайтов изменился, все же базовые принципы, описанные ранее, остаются в силе. Окей, предполагаем что вы читали предыдущие главы и теперь по-настоящему готовы к созданию спрайта, который будет "драться".

Для начала, разрешите мне отметить что техника, которую я сейчас опишу, подходит не только для файтинга (файтинг - игровой жанр, обычно на экране симулируется схватка двух бойцов - прим.пер). Я использую данный термин повсеместно, потому что позы и положения для учебных спрайтов представляют собой различные боевые стойки. Но сама по себе техника и концепции могут быть применены в различных типах игр: Игра Earthworm Jim, вероятно была сделана с помощью такого же подхода. Учитесь на всём, на чём только можно и адаптируйте изученное под свои нужды. Но мы отвлеклись, теперь давайте взглянем на пару примеров из игры Street Fighter Alpha 3.

Вот это действительно нарисовано со знанием дела. Каждый персонаж обладает своим собственным неповторимым видом. Например, Зангриф - это большая гора мускулов, а Сакура в сравнении с ним маленькая тонкая худышка. Также отметьте существенную разницу в ширине спрайтов этих двоих. Значит, художники не были ограничены некоторыми максимальными размерами спрайтов. Сакура - это спрайт 76х87, Зангриф - 116х111. Но помните, что обычно стандартным размером считается 100 пикселей в высоту. Ширина обычно будет меньше.

Метод, который использует компания Capcom, неизвестен. У них нет туториалов, либо других разъяснений, касающихся процесса создания спрайтов, что не удивительно, ведь у них и так полно других забот. Всё же я добыл кое-какую информацию, путём анализа их спрайтов и собирая отрывки полезных сведений то тут то там. Давайте рассмотрим картинки Чун-Ли из Street Fighter 3:

(нажми, чтобы увеличить)

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

Самая важная часть картины, это большая Чун-Ли в верхнем правом углу. Отметьте малое наличии деталей в ней. Когда делаешь спрайт, требуется показать какое-то определенное количество характерных черт. При рисовании маленького 8х8 лица, не будет возможности отобразить, например, ноздри, так зачем тратить на них время при рисовании на бумаге? Эти изогнутые линии на ёё одежде, в спрайте будут представлены однопиксельными жёлтыми линиями. Появится небольшая жёлтая свисающая отделка на одежде: но добавиться она только на стадии пиксельной работы. Поэтому, стоит еще в начале, выбрать упрощённый стиль для использования при рисовании кадров анимации на бумаге.

Мне стоит отвлечься, и объяснить, что на самом деле существуют различные способы создания спрайтов. Выбор метода, зависит только от уровня ваших навыков, мастерства и размера создаваемых спрайтов. Если вы делаете спрайты для RPG размером 16х16, нет резона сперва рисовать их на бумаге, сканировать и т.д. Работайте сразу в пикселях. При отсутствии навыка рисования на бумаге, разумнее сразу перейти к рисованию пикселями. Два других метода, применимых при отсутствии сканера или навыка рисования от руки:

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

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

В этом туториале, я буду использовать Photoshop 4.0, но постараюсь использовать его простейшие возможности. Разговаривая об анти-алиасинге и ему подобных вещах, я подразумеваю что они реализованы и в других программах для рисования. И думаю, вы умеете пользоваться одной из них. Всё же, надо отметить, что Photoshop в целом не годится для создания спрайтов. Причина в том, что Photoshop особым образом изменяет и организует палитру, что не годится для создания игр, с заданной палитрой. Это потому, что подобного типа приложения созданы для обработки фотографий и иллюстраций. Манипуляции с палитрой в этих случаях не играют какой-либо важной роли, в отличии от случая со спрайтами. Если вы делаете игру, не использующую палитру (а это большинство PC игр, в отличии от консольных собратьев), и вам незачем заботиться о количестве используемых цветов, тогда Photoshop может вам подойти. Я же люблю его использовать для практики рисования спрайтов, т.к. не приходится заморачиваться по поводу подбора и выбора цветов, что имело бы место в редакторе, использующем палитру. Ну что, давайте сделаем спрайт. Для начала, я использую картинку нарисованную от руки, т.е. пойду путём компании Capcom:

Я нарисовал персонаж от руки (на четвертинке обычной бумаги А4), раскрасил её, затем отсканировал (настройки - 300dpi, черно-белый режим):перед тем как уменьшить размер, следует изменить режим изображения на RGB или Grayscale, чтобы работал анти-аллиасинг). У меня получилось довольно большая картинка, и здесь я показываю уменьшенную версию. Есть маленькие недочёты, вроде странно изогнутой передней ноги и т.д:их надо будет поправить при работе с пикселями, это будет не трудно. Заметьте, что я сделал удвоенный контур для обводов куртки и майки. Это вышло случайно, стоп: подождите, я собирался показать к каким проблемам это привёдёт. Окей, мы не можем работать с такой большой картинкой, поэтому давайте уменьшим размер до100 пикселей. Она нарисована на белом фоне, в целом размер будет чуть меньше ста пикселей, так как я оставил вокруг фигуры немного пустого места, на тот случай, если я захочу удлинить её волосы. Ах да, при уменьшении я использовал билинеарный фильтр. Помимо него в Photoshop-е есть еще два фильтра, каждый из них действует по-разному:

(нажми, чтобы увеличить)

Фильтр "Ближайший сосед" ("Nearest Neighbor") полностью отключает anti-aliasing. Это особенно полезно, если нужно увеличить уже завершённый спрайт раза так в четыре, и показать его разбирающимся людям.

Фильтры "Билинейный" и "Бикубический" делают почти одно и тоже: бикубический похоже даёт больше анти-аллисинга. Наша картинка относительно мала, так что в этом случае большой разницы заметно не будет, но если уменьшать картинку высотой 800 пикселей, эффект будет значительный. Проблема бикубического фильтра - слишком много анти-аллиасинга. Сравните её правую голень на бикубической картинке и на билинейной. На первой она более размыта. То же самое произошло с рукой, и лицом. Это может мешать при рейтресинге, поэтому я обычно использую билинейный фильтр, чтобы получить меньше анти-аллисианга. Итак, мы получили наш спрайт (95 пикселей в высоту):

Приятная сторона Photoshop (и главная причина его использование в данной технике) это его возможность работать со слоями. Они необходимы при рэйтресинге, можно проводить линии, не трогая оригинальную отсканенную картинку. Если ваша программа, не поддерживает слои, можно сказать, что вы немного встряли. Можно сделать рэйтресинг в Photoshop, а потом перенести результат в ваше родное приложение.

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

Вот быстрый способ настроить Photoshop, что осуществить простой рэйтрейсинг. Исходная картинка будет фоном (убедитесь что вы в режиме RGB), поэтому создайте новый слой. Заполните его определенным цветом (например, синим). Установите для этого слоя режим "screen", и вы увидите спрайт, только черные линии станут синими. Затем совместите слои. Это нужно затем, чтобы вновь нарисованные линии были поверх слоя исходной картинки. Теперь создайте еще один слой и залейте его белым. Для него установите режим "multiply". Собственно, спрайт будет рисовать как раз в этом слое. Можно было бы просто сделать слой прозрачным, но тогда пришлось бы постоянно переключаться на инстумент "резинка" чтобы что-нибудь стереть, что конечно же неудобно. В нашем случае, фон будет белым, хоть вы то и его не видите. Можно будет легко переключаться с белого на чёрный цвет (пр учётё, что изначальная установка не менялась), нажимая кнопку X Если вы захотите очистить картинку, сделанную из синих линий, поменяйте режим последнего слоя на "normal" и белый фон, закроет исходную картинку.

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

Я закончил рэйтрейсинг линий чёрным цветом. Осталось добавить некоторые детали, и проработать лицо, особенно глаза, но это лучше делать уже при работе цветом. Давайте начнём раскрашивать спрайт, заполняя цветом его основные области, и не добавляя на данном этапе тени:

Итак, я добавил цвета: я предпочитаю работать не на белом фоне, лучше для него взять какой-нибудь мягкий цвет. Белый фон, делает цвета темнее (особенно её майку). Это фокус, который играют с нами наши глаза. Ладно, давайте добавим теней.

В этом уроке вы научитесь рисовать и анимировать персонажей в технике Pixel Art. Для этого вам понадобится только программа Adobe Photoshop. В итоге получится GIF с бегущим космонавтом.

Программа: Adobe Photoshop Сложность: новички, средний уровень Понадобится времени: 30 мин – час

I. Настройка документа и инструментов

Шаг 1

Выберите Pencil (карандаш) на панели инструментов – это будет основной инструмент для нашего урока. В настройках выберите тип Hard Round brush, и установите остальные значения так же как на картинке. Наша цель – сделать перо карандаша максимально резким.

Шаг 2

В настройках Eraser Tool (ластик) выберите режим Pencil Mode, и установите остальные значения как показано на картинке.

Шаг 3

Включите пиксельную сетку Pixel Grid (View > Show > Pixel Grid). Если в меню нет такого пункта, то зайдите в настройки и включите графическое ускорение Preferences > Performance > Graphic acceleration.

Обратите внимание: Сетка будет видна только на вновь созданном холсте при увеличении масштаба 600% и более.

Шаг 4

В настройках Preferences > General (Control-K) поменяйте режим интерполяции изображения на режим Nearest Neighbor (по соседним пикселам). Это позволит границам объектов оставаться максимально четкими.

В настройках единиц измерения и линеек установите единицы измерения линеек в пикселах Preferences > Units & Rulers > Pixels.

II. Создание персонажа

Шаг 1

И вот теперь, когда все настроено, мы можем приступить непосредственно к рисованию персонажа.

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

Шаг 2

Уменьшите масштаб эскиза до 60 пикселей в высоту, используя комбинацию клавиш Control+T, или команду Edit > Free Transform.

Размер объекта отображается на информационной панели. Обратите внимание, чтобы настройки интерполяции были такими же, как мы делали в шаге 4.

Шаг 3

Приблизьте эскиз на 300-400%, чтобы было легче работать, и уменьшите прозрачность слоя. Затем создайте новый слой и обрисуйте контуры эскиза, используя Pencil Tool. Если персонаж симметричный, как в нашем случае, можно обрисовать только половину, а затем продублировать и отразить нарисованное зеркально (Edit > Transform > Flip Horizontal).

Ритм: Чтобы нарисовать сложные элементы разбивайте их на части. Когда пикселы (точки) в линии образуют «ритм», например, 1-2-3, или 1-1-2-2-3-3, набросок выглядит более гладко для человеческого глаза. Но, если того требует форма, этот ритм может быть нарушен.

Шаг 4

Когда контур будет готов, можно выбрать основные цвета и раскрасить большие формы. Делайте это на отдельном слое под контуром.

Шаг 5

Сгладьте контур, дорисовывая тень по внутреннему краю.

Продолжайте добавлять тени. Как вы могли заметить по ходу рисования некоторые формы можно подправить.

Шаг 6

Создайте новый слой для бликов.

Выберите режим наложения Overlay из выпадающего списка на панели слоев. Нарисуйте светлым цветом над теми областями, которые хотите подсветить. Затем сгладьте блик, применив фильтр Filter > Blur > Blur.

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

Шаг 7

Теперь космонавту нужно добавить контрастности. С помощью настроек уровней (Image > Adjustments > Levels) сделайте его ярче, а затем отрегулируйте оттенок с помощью опции Color Balance (Image > Adjustments > Color Balance).

Теперь персонаж готов к анимации.

III. Анимирование персонажа

Шаг 1

Создайте копию слоя (Layer > New > Layer Via Copy) и сдвиньте ее на 1 вверх и на 2 пиксела правее. Это ключевой пункт в анимации персонажа.

Снизьте прозрачность оригинального слоя на 50% чтобы видеть предыдущий кадр. Это называется “Onion Skinning”(режим плюра).

Шаг 2

Теперь согните руки и ноги персонажа так, как будто он бежит.

● Выделите левую руку инструментом Lasso
● Используя FreeTransformTool (Edit > FreeTransform) и удерживая клавишу Control, передвиньте границы контейнера так, чтобы рука отодвинулась назад.
● Выделите сначала одну ногу, и немного растяните ее. Затем вторую ногу наоборот сожмите так, чтобы создалось ощущение, что персонаж шагает.
● С помощью карандаша и ластика подправьте часть правой руки ниже локтя.

Шаг 3

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

Шаг 4

Сделайте копию второго слоя и отразите ее по горизонтали. Теперь у вас есть 1 базовая поза и 2 в движении. Восстановите непрозрачность всех слоев до 100%.

Шаг 5

Перейдите Window > Timeline чтобы отобразилась Timeline панель, и нажмите Create Frame Animation.

На временной шкале сделайте следующее:

Установите задержку времени в 0,15 сек
Кликните на DuplicatesSelectedFrames, чтобы создать еще 3 копии
Установите цикл повтора Forever

Шаг 6

Чтобы выбрать нужный слой для каждого кадра нажмите иконку Eye возле названия слоя на панели слоев. Порядок должен быть такой:

Базовая позиция→Бег с правой ноги→Базовая позиция→Бег с левой ноги.

Related

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

1. Подготовка холста и инструментов

Шаг 1
Выберите инструмент Карандаш (Pencil Tool). Он станет основным вашим инструментом на этом уроке. Задайте жесткий круглый наконечник кисти и примените к кисти приведенные ниже установки. Линия, создаваемая карандашом должна получаться очень резкой.

Шаг 2
Задайте Режим (Mode): Карандаш (Pencil) и примените показанные ниже установки:

Шаг 3
Включите отображение пиксельной сетки: Просмотр > Показать > Пиксельная сетка (View > Show > Pixel Grid). Если данный пункт меню не отображается, пройдите в меню Редактирование > Установки > Производительность (Preferences > Performance), и поставьте галочку на пункте Использовать графический процессор (graphic acceleration).

Замечание: сетка будет видимой только на вновь созданном холсте, при приближении 600% и более.

Шаг 4
Теперь пройдите в меню Редактирование > Установки > Основные (Preferences > General), или просто нажмите Control-K. В выпадающем списке “Интерполяция изображения” (Image Interpolation) выберите пункт По соседним пикселям (Nearest Neighbor). Так вы сможете быть уверены, что края вашего объекта будут оставаться достаточно резкими.

Далее пройдите в меню Редактирование > Установки > Единицы измерения и линейки (Preferences > Units & Rulers), где в выпадающем списке Линейки (Rulers) выберите пункт Пиксели (Pixels), чтобы видеть все размеры в пикселях.

2. Создания Спрайта

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

Шаг 2
Активируйте Свободную трансформацию (Ctrl+T), и уменьшите высоту вашего персонажа до 60 пикселей.
Размер объекта отображается на панели Инфо (Info). Учтите, что настройки интерполяции должны быть точно такими же, какие мы использовали в шаге 4 предыдущего раздела. В данном случае это не столь критично, так как мы всего лишь преобразуем эскиз в пиксельный рисунок, но в будущем, работая над пикселизованными объектами, данные параметры следует контролировать.

Шаг 3
Приблизьте изображение примерно на 300-400%. Так будет нагляднее. Уменьшите Непрозрачность (Opacity) слоя с эскизом. Кликните по иконке создания нового слоя в нижней части палитры слоев. Создайте эскиз при помощи инструмента Карандаш (Pencil Tool).
Если ваш персонаж симметричен, как у меня, то достаточно нарисовать только его половинку, продублировать ее и отразить горизонтально: Редактирование > Трансформирование > Отразить горизонтально (Edit > Transform > Flip Horizontal).

Правило периодичности: старайтесь разбивать сложные фигуры на несколько простых элементов. Дело в том, что когда пиксели, образующие линию, наносятся по определенной “периодичной” системе, например: 1-2-3, или 1-1-2-2-3-3, такая линия, в отличие от беспорядочной, лучше воспринимается человеческим глазом. Однако данное правило выполнимо не всегда, и может быть нарушено, если этого требует форма создаваемой линии.

(две периодичные и одна беспорядочная линия)

Шаг 4
Когда эскиз будет готов, выберите основной цвет и окрасьте крупные элементы. Сделайте это на отдельном слое, созданном под слоем с эскизом.

Шаг 5
Смягчите внутреннюю часть эскиза, варьируя оттенки.

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

Шаг 6
Создайте новый слой и наложите на нем свет.
Установите этот слой в Режим наложения – Перекрытие (Overlay). Каким-нибудь светлым цветом прокрасьте поверхности, на которые хотите наложить свет. Размойте участки с наложенным светом пройдя в меню Фильтр > Размытие > Размытие (Filter > Blur > Blur).

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

Шаг 7
Нашему персонажу не хватает контрастности. Пройдите в меню Изображение > Коррекция > Уровни (Image > Adjustments > Levels), задайте настройки показанные ниже, чтобы подкорректировать полутона, после чего воспользуйтесь коррекцией цветового баланса: Изображение > Коррекция > Цветовой баланс (Image > Adjustments > Color Balance) создавая более холодные и более теплые варианты.

(законченный персонаж при приближении 400%)

3. Анимация Спрайта

Шаг 1
Создайте копию слоя: Слои > Новый > Скопировать на новый слой (Layer > New > Layer Via Copy), и сместит его на 1 пиксель вверх и на 2 вправо, используя для этого инструмент Перемещение (Move Tool (V)) и соответствующие клавиши со стрелками. Это ключевая фаза при анимации шагающего персонажа.
Уменьшите Непрозрачность (Opacity) оригинального слоя до 50%, чтобы получить возможность видеть предыдущий кадр анимации.

Шаг 2
Теперь изогнем ноги и руки Спрайта, так, как будто он шагает.
- выделите левую руку при помощи инструмента Лассо (Lasso Tool)
- при помощи Свободной трансформации (Ctrl+A), и удерживая клавишу Ctrl, сместите опорные точки контейнера трансформации так, чтобы рука оказалось немного ниже шеи
- выделите голень правой ноги и сместите ее вниз, как на первом кадре
- выделите левую ногу и подтяните ее вверх – она должна быть немного согнутой
- при помощи Карандаша (Pencil) и Ластика (Eraser Tool) перерисуйте локоть правой руки

Шаг 3
Далее нам предстоит нарисовать новое положение рук и ног, точно так же, как я показал в шаге 2. Дело в том, что трансформирование рук и нок изменяет положение пикселей, и линии утрачивают свою прежнюю четкость.

Шаг 4
Создайте копию второго слоя и отразите ее горизонтально. Так у вас получится в, общей сложности, три положения: два – в шагающей фазе, одно – в исходной. Снова увеличьте Непрозрачность (Opacity) всех слоев до 100%.

Шаг 5
Пройдите в меню Окно > Шкала времени (Window > Timeline), и нажмите по кнопке Создать анимацию кадра (Create Frame Animation).

Проделайте следующие шаги:
1. Задайте задержку кадра: 0.15 секунды
2. Кликните по кнопке создания копии выделенных кадров 3 раза (будут созданы 3 копии)
3. В выпадающем списке с параметрами цикла выберите вариант Постоянно (Forever)

Шаг 6
Чтобы правильно выбрать нужный слой для каждого кадра, кликните по пиктограмме в виде глаза рядом с названием слоя на палитре слоев.
Итак:
1 кадр: исходная позиция
2 кадр: второй слой
3 кадр: снова исходная позиция
4 кадр: третий слой

Нажмите на клавишу Пробел, чтобы воспроизвести анимацию.

(законченная анимация при 100% приближении)

Шаг 7
Сохраните результат своей работы. Пройдите в меню Файл > Сохранить для WEB (File > Save For Web), и выберите формат GIF. Увеличьте масштаб изображения до 300%, и нажмите Сохранить (Save).

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

Мне надоело тестировать процессы GameDev с помощью треугольников и прямоугольников. Это скучно и не интересно, поэтому настало время что-нибудь взорвать. Но с чего начать? - спросите Вы. А я отвечу, нужно нарисовать sprite взрыва, если быть точным, то нарисовать sprite sheet для взрыва, который будет представлять анимацию взрыва.

Но как это сделать? - этим вопросом озадачился я. После изучения нескольких форумов и видеоуроков, я решил собрать полученную информацию в один урок на своём сайте. Итак у нас следующее технической задание на этот урок:

Нарисовать несколько sprite картинок, из которых мы сделаем sprite sheet для анимации взрыва;
Собрать сам sprite sheet и сохранить его в PNG файл;
Сделать всё это, используя ПО Adove Illustrator .

Рисуем sprite картинки по шагам

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

Шаг первый

Создаём файл с полотном для sprite картинки с параметрами 20 на 20 пикселей. Именно такие картинки будем использовать в следующих уроках по GameDev в Qt для реализации взрывов от пуль. Будем рисовать взрывы.

Шаг второй

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

Шаг третий

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

Шаг четвертый

После того, как мы отрисуем все 15 sprite картинок, создадим новый проект в Adobe Illustrator. Который будет содержать все 15 sprite картинок и будет шириной на все 15 картинок и по высоте на одну картинку. То есть будем отрисовывать все картинки в один ряд. Также поместим прямоугольник на всё полотно. Не забудьте убрать обводку и сделать фон прозрачным.

Шаг пятый

Шаг шестой

А теперь, зайдя в пункт меню Файл, с помощью пункта "Поместить" добавляем в проект все подготовленные спрайты.