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

Виды анимаций:

1) Стандартное положение юнита, так он будет выглядеть, если для выполняемого действия не приписана другая анимация. 

2) Анимация атаки юнита. Сюда входят как дальние так и ближние атаки. Количество анимаций зависит только от создаваемого юнита. 

3) Анимация защиты. Здесь обычно рисуется одна картинка в защитной позе.

4) Анимация смерти. Не обязательная анимация, но ее наличие будет приятно радовать глаз геймера.

5) Анимация ожидания. Эта анимация периодически запускается пока юнит не выбран. Анимация зависит только от вашего юнита. Он может пить пиво, а может и крутить мечом над головой. Анимация является не обязательной.

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

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

Теперь рассмотрим анимации более подробно:

1) Для этой статьи я нарисовал юнита — Донателло. Юниты в Битве за Веснот обычно слегка повернуты в право. В первой обучающей статье я подробно описывал как рисуется обычное положе юнита. Надо всегда следитьчтобы первый и последний кадр других анимаций не сильно отличался от стандартного перехода, чтобы в игре не было резких переходов. 

2) Я решил сделать 3 анимации атаки.

а) Анимация атаки сверху. 

Для начала я подготовлю юнита для рисования анимаций — инструментом лассо  

разделю его на составляющие. 

 

Каждую часть помещаем на отдельный слой. В случае надобности дорисовываем какие либо недочеты. 

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

Далее повернем левую руку. После поворота она немного деформировалась, поэтому подправляем контуры, стираем ластиком ненужные пиксели. 

 

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

А слой с первоначальной правой рукой удалил. На этом первая часть анимации этой атаки закончена. Сохраняем в формате .PNG. Обычно название — unit-attack1-1.png. Хотя вы можете написать любое, так как это ни на что не влияет. 

Теперь сделаем второй кадр. Поворачиваем оружие и правим контуры. 

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

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

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

 

Все, теперь можно сохранять, первая анимация атаки закончена. 

б) Вторая анимация атаки у нас будет точечная. 

Для этого мы нарисуем 3 варианта изображения юнита в этой анимации. В Битве за Веснот можно указать анимацию юнита в зависимости от расположения атакуемого врага. Мы сделаем варианты для атаки на север, юг и восток(веснот сам отразит зеркально в случае если враг будет на западе). Атака на восток будет при расположении врага или на северо-восточной клетке или на юго-восточной клетке (хотя можно было сделать для них разные изображения).

 

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

-n(север), 

-s(юг), 

-e(восток).

в) Анимация дальней атаки. Мой юнит будет бросать сюрикены.  

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

Затем удалим слой с правой рукой 

 

и нарисуем заново руку в согнутом положении

и держащую сюрикен. 

 

Это первая картинка дальней атаки. Теперь удалим слой с правой рукой и нарисуем ее прямой, направленной немного вниз, 

 

также дорисуем сюрикен вылетевший из нее.

 

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

3) Анимация защиты обычно состоит из одной картинки, в которой юнит занимает оборонительную позицию. 

Для этого я повернул оружие вертикально и перерисовал руки. 

 

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

4) Анимацию смерти я решил изобразить в виде падения назад на спину. 

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

 

Потом полностью перерисовал правую ногу, подняв ее над землей. 

На этом первый кадр закончен. На втором я сначала скопировал правую ногу и вставил ее на новый слой, на место левой ноги, слой с первоначальной левой ногой удалил. Теперь повернул примерно на 60 градусов

 

и подправил границы у тела, головы, рук и ног.

 

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

 

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

 

На этом анимация смерти закончена.

5) В этой анимации обычно изображается что делает юнит когда заскучает. 

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

 

Затем удалил слой с правой рукой и нарисовал ее заного в согнутом положении. 

 Этот слой я передвинул за слой с туловищем и головой. Первый  кадр закончен, на втором я повернул и подправил контур у правой руки. 

Затем скопировал первый и второй кадр по разу и обозначил их индексами -3 и -4. С анимацией ожидания закончено.