на
форуме можно задать вопрос, посмотреть ответы на часто задаваемые вопросы
Здравствуйте!
Вы попали на информационно-образовательный сайт посвященный информатике,
информационным технологиям и компьютерным играм. Подробнее о целях и задачах
сайта в разделе Главная. [English
version of this page here...]
Создаем
анимацию хотьбы волка в Photoshop и ImageReady
Анимацию
будем создавать на основе волка нарисованного в предыдущем уроке - рисуем
волка
В
этом уроке мы познакомимся с тем, как выполнить анимирование персонажа
на примере хотьбы волка.
Мы
создадим два варианта анимации - в формате gif для использования в интернет-публикациях
и тестовых целях и в формате tga для использования в компьютерной игре
Сохраните
созданный файл. Теперь удалите все лишние слои, кроме показанных на рисунке
-
сохраните
файл под именем anim_walked_wolf.psd
Теперь
подготовим анимационную цепочку. Мы уже упоминали, что она будет включать
всего 8 кадров. Следовательно нам нужно иметь 8 наборов показанных на рисунке
слоев. Для этого удобнее сгруппировать слои и каждой группе дать соответствующее
имя -
создаем
новую группу -
щелкаем
по названию созданной группы Set 1 и называем Frame0
все
слои переносим во внутрь созданной группы -
иногда
потребуется сначала перетащить слой на начало группы, а уже внутри нее расставить
слои в нужном порядке
далее
сверните созданную группу
и
дублируйте ее еще 7 раз, называя каждую новую группу Frame1, Frame2 и т.д.
до Frame7. Для этого щелкните по группе правой кнопкой мыши -
Переходим
к процессу создания анимации
Наша
анимация будет заключаться в том, что волк должен идти -
на
данном рисунке показаны все 8 кадров анимации анимационной цепочки справа
налево. Крайний правый кадр - начальное положение волка (кадр помеченный
цифрой 0).
внимательно
посмотрев на данную анимационную цепочку вы увидите что 0 и 4 кадр абсолютно
одинаковы и представляют собой начальную позицию анимации волка. Кадры
с 1 по 3 представляют первую фазу шага волка, 4 - возврат в исходную позицию
для обеспечения непрерывности. Кадры с 5 по 7 вторая фаза шага. Поскольку
данная анимация является цикличной, то она должна непрерывно воспроизводиться
с кадра 0 до кадра 7, а по достижении 7 кадра снова возвращаться к кадру
0. Поэтому 9 кадр с номером 8 не требуется и его роль исполняет 0 кадр
к которому происходит возврат при проигрывании анимации.
Иными
словами кадры 3-0 первая половина цикла анимации, 7-4 - вторая.
Далее
проследите за анимацией каждой из конечностей. Например посмотрите на анимацию
левой ноги (с такой точки зрения, когда стоим спиной к волку): в кадре 0
она находится в исходной позиции, в кадре 1 слегка поднята вперед, в кадре
2 достигла крайней точки движения, в кадре 3 вернулась примерно к положению
подобному кадру 1. 4 кадр является исходной позицией, далее в 5 кадре нога
отводится чуть назад, в 6 кадре достигает крайней точки движения назад,
в 7 кадре возвращается в позицию аналогичную кадру 5.
Правая
нога осуществляет подобные движения, но в противоположную сторону, руки
движутся аналогично, с той разницей, что левая рука повторяет движения правой
ноги, а правая - левой.
Исходя
из сказанного выполним создание анимационной цепочки. Лучше это сделать
в развернутом виде как на рисунке с шагающим волком.
Сначала
нам нужно увеличить холст изображения до 128*8 пиксель в длину, т.к. нам
потребуется 8 кадров -
для
более точного размещения кадров анимационной цепочки по своим местам настраиваем
размер ячеек сетки и включаем ее отображение
теперь
выбираем нужный кадр представленный наборами слоев Frame0 - Frame7 и размещаем
его в нужном месте анимационной цепочки, т.е. Frame0 - краний справа, Frame1
чуть левее и т.д. до Frame7 - крайний левый.
обратите
внимание! для перемещений используем инструмент Move Tool, при этом в панели
свойств этого инструмента галочку Auto Select Layer нужно отключить, чтобы
нечаянно не выделялся автоматически слой под курсором.
Создав
такую анимационную цепочку проверьте чтобы все кадры стояли одинаково ровно.
