Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Креатив » Создание в фотошопе анимированного пиксельного спрайта. Часть II.

Создание в фотошопе анимированного пиксельного спрайта. Часть II.

Автор: sondar | Категория: Уроки Photoshop » Креатив | 18-02-2016, 17:55
Шаг 7
Работа над ногой еще не окончена, но на данном этапе нужно воспроизвести для верхней части туловища кролика что-то вроде эффекта подпрыгивания. Это необходимо для корректного завершения работы над анимацией ноги.

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

На изображении ниже кадры с “подпрыгиванием” обозначены пурпурной линией. Линии в остальных кадрах – черные с 20% непрозрачностью, и прекрасно могут послужить в качестве тени. В играх, возможно, данная тень и не нужна, но в данном случае, она способна сделать нашу анимацию заметно более привлекательной.

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


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

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

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 9
Теперь, когда одна из ног у нас готова, нам нужно просто скопировать ее.

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

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

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


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

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

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

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


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

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


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

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 12
Настало время добавить руки!

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

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 13
Расположите слой с руками поверх слоя с туловищем. Придайте им соответствующий цвет и контуры, точно таким же способом как мы сделали это в случае с ногами.

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 14
Придайте рукам определенную объемность.

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 15
Наконец, подчеркните объемность рук за счет затенения.

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 16
Скопируйте этот слой с рукой и расположите дубликат под слоем с туловищем.

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


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

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

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Вот как выглядит движение рук.

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 18
Давайте придадим некоторое движение и голове, так как на данный момент она неестественно малоподвижна.

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

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 19
В кадрах, следующих за подпрыгиванием, я сделал уши чуть менее изогнутыми, сместив их кончики вперед.

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 20
Наконец, я придал некоторое движение и меху на щеках. Как и в случае с ушами, я сместил пиксели щеки вниз в момент толчка вверх, и немного вверх, в момент движения туловища вниз.

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Вот как это должно выглядеть:

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


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

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

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 22
Мы не нарисовали хвост в исходном положении кролика, но сейчас, когда он бежит, стало совершенно очевидно, что пририсовать хвостик, все же, следует.

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

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 23
Теперь окрасим хвост, затеним его и обведем контуром.

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 24
Дополнительное усовершенствование хвоста: сделаем так, чтобы он частично скрывался под нижней частью туловища кролика.

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 25
В завершение работы над хвостом, сместите его слой под остальные слои, и проведите его окончательное тонирование/уточнение.

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


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

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


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

4. Создание анимации

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

Шаг 1
Скопируйте кадры на новый слой.

Копировать следует по каждый кадр по отдельности, в порядке слева направо. Чтобы скопировать все слои за один раз нужно воспользоваться меню Редактирование > Копировать совмещенные данные (Edit > Copy Merged). И помните, что фоновый цвет при копировании не нужен.

Теперь нужно изменить размер документа так, чтобы он был лишь незначительно больше самого кролика.

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

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


В результате у вас должен получиться документ с шестью слоями: по одному слою для каждого кадра. Без фонового слоя.

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 2
Чтобы создать в фотошопе анимацию, вам понадобится шкала времени. Если она не отображена, пройдите в меню Окно > Шкала времени (Window > Timeline). На этой шкале имеется кнопка Создания покадровой анимации (Create Frame Animation), только если она не установлена в режим создания видеоряда. Эти режимы выбираются из выпадающего списка здесь же.

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 3
Нажмите кнопку Создания покадровой анимации (Create Frame Animation) и раскройте список опций шкалы времени, кликнув по специальной иконке в правом верхнем углу шкалы.

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Выберите здесь пункт Кадры из слоев (Make Frames From Layers).

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Шаг 4
Наконец, выделите все кадры, и настройте Задержку (Delay). Я задал значение 0.1 секунды, и установил воспроизведение цикла в положение Беспрерывно (Forever).

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


И ваш анимационный цикл бега кролика готов!

Создание в фотошопе анимированного пиксельного спрайта. Часть II.


Вы можете использовать этот спрайт в игре, либо экспортировать файл в формат GIF.

Прекрасная работа!

Мои поздравления! Ваш кролик действительно бежит! Он готов к спасению принцессы-крольчихи, или же к разрушению любых препятствий, которые вы для него придумаете!

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


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

Другие новости по теме:


Просмотров: 1279 | Напечатать | Комментарии (0)

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Легкое тонирование при помощи режимов наложения
Легкое тонирование при помощи режимов наложения


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

Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Мы в соц сетях

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.