Урок 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 это тоже возможно, но пока ограничимся первым способом.

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

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

 

sfml вывод нужного прямоугольника из изображения
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) цвет, который вы не хотите показывать. таким образом можно будет убрать цвет, не принадлежащий персонажу.

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

 

 

Буду благодарен, если поделитесь:
SFML вопросы, прошу, задавайте на форуме.

Добавить комментарий