Урок 7 SFML принцип создания анимации

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

ненужный нам таймер телепортации героя – удалите строки с этой переменной и все, что с ней связано.

Видеоверсия sfml урок 7

Если вы не особо поняли как работать с координатами в том же паинте – посмотрите предыдущие уроки ( 3,4 ). Здесь координат будет не мало, вам надо научиться их правильно извлекать.

Вернемся к созданию анимации. Нам нужна переменная, которая будет передвигать кадры нашей анимации благодаря времени, она будет хранить в себе текущий кадр. Объявим еще в ф-ции main:

float CurrentFrame=0;//хранит текущий кадр

Для начала я распишу на примере кнопки влево и разделив всё построчно с комментариями.

Напомню – у меня персонаж лев:

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

В функции пока открыто окно, где у меня было управление персонажем, напишем вот такую строчку для клавиши “влево”, предварительно стерев предыдущую. Смотрим комментарии:

Аналогично поступаем для остальных клавиш:

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

В моем случае на картинке есть движение льва и влево и вправо. Но что делать, если есть только влево ? Можно в редакторе (хоть в паинте) добавить вручную вправо (путем “отразить по горизонтали” и получится как у меня). Но это не лучший вариант. Лучше всего отразить с помощью кода. Есть несколько способов.

setScale(-1, 1);

этой функцией можно менять размер спрайта. Если напишите setScale(2, 2);  то увидите какой большой лвёнок получился. Если бы у нас марио съел гриб – можно было бы использовать Так вот этой функцией можно отразить спрайт, задав отрицательную координату. По х – отразите по горизонтали, по у – по вертикали.

Еще один способ отразить изображение:

Итак – текущий кадр у нас +96 то есть правый край и координата -96 означает, что мы идем наоборот справа налево, таким образом рисуя наоборот. Получается, что мы делаем инверсию и отражаем по горизонтали. Аналогичным способом можно начудить по Y.

Или вот например. Если у вас танк в виде квадрата с палкой (дуло), то вам достаточно будет одного его изображения в одном состоянии и можете использовать повороты:

То есть не обязательно рисовать несколько состояний персонажа в редакторе. Можно обойти всё кодом и изображение будет меньше “весить”.

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

Листинг урока: