Урок 4 SFML. Вывод главного героя из картинки

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

Видеоверсия: http://www.youtube.com/watch?v=RE0HDuYHx5U

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

Будем работать с координатами изображения. Смотрите – в отличие от привычной нам системы координат, здесь нет отрицательного X и Y, а координата (0,0), то есть начало системы – левый верхний угол. Соответственно чем правее вы идёте – тем больше X, чем ниже – тем больше Y.

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

В паинте показывать проще, я так и сделаю. Откройте картинку с помощью паинта. Нажмите вид и активируйте: “линейки”, “линия сетки”, “строка состояния”.

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

Итак, можно методом тыка – курсором наводя и узнавая координаты вбивать их в нашу программу С++ и потом смотреть, что попали правильно. Кстати, если попадем не правильно, то изображение при анимации и движении в разные направления будет немного скакать и придётся долго и нудно это подгонять, смотря каждый пиксель. Я с этим сталкивался ))

Предлагаю не методом тыка, а простыми расчетами разобраться. У нас 3 кота по горизонту и 4 по вертикали. Изображение имеет размер 288 на 384 , значит, если мы разделим 288 на 3, то получим, что в горизонталь (по иксу) нам на одного кота отводится 96 пикселей, а по вертикали (по игреку) 384/4=тоже 96. Кот квадратен

Итак, давайте получим кота, который идёт вправо (это первый кот третьей строки). Для начала нам надо  иметь точку старта – левый верхний угол изображения, которое мы хотим вывести. В нашем случае это X=0,Y=192. Второй, что нам надо – это количество координат по X и Y, на которое мы сместимся от нашей начальной точки вправо и вниз. Так как кот в ширину 96 и высоту 96, то мы сместимся на 96 по иксу и 96 по игреку соответственно. Представьте, что вы рисуете прямоугольник в паинте. Та точка, в которой вы нажали левую клавишу, и есть начало, от которого вы строите размер этого прямоугольника. Вы можете строить прямоугольник в четыре различные стороны от этой точки, в SFML это тоже возможно, но пока ограничимся первым способом.

Нам этого достаточно, чтобы реализовать кот код:

(новая строка помечена комментарием)

Итак, в нашем случае точка, от которой мы двигались – (0, 192). чтобы получить кота, нам нужно было идти вправо на 96 (заполнить картинку по X) и вниз на 96 (заполнить картинку по Y).

.setTextureRect(IntRect(0,192,96,96));  – задаёт прямоугольник текущему спрайту, где 0,192 – левый верхний угол, 96,96 – ширина и высота изображения. Если вы напишете отрицательные 96, то с точки старта (0,192) программа начнет рисовать в левую сторону по X и вверх по Y. В нашем случае ничего на экран тогда не выведется, т.к рисовать влево нам просто некуда.

Наш кот прозрачен, поэтому на черном фоне не было белых пятен ) Если же у вас не прозрачная картинка – вы можете использовать функцию createMaskFromColor(Color(0, 0, 0));     где (0,0,0) цвет, который вы не хотите показывать. таким образом можно будет убрать цвет, не принадлежащий персонажу.

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