Урок 3 sfml. Загрузка текстуры, вывод картинки на экран. | kychka-pc

На этом уроке мы рассмотрим работу с текстурой на примере создания главного персонажа игры.

Приступим:)

Для начала нарисуйте персонажа сами, или скачайте на просторах интернета готового (png формат). Для себя я нашел такого вот

котика, можете поступить так же:

Картинку с персонажем поместите в папку с проектом в директорию, где находится ваш файл исходного кода – main.cpp. Но лучше, если вы создадите папку images и поместите картинку туда. В больших проектах вам так будет удобнее. Я помещу картинку в папку images и мой путь , где лежит картинка, выглядит так : C:\Users\Павел\Documents\Visual Studio 2013\Projects\sfmltest\sfmltest\images\

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

Бесплатно поблагодарить автора

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

давайте выведем всю картинку на экран:

Первый способ – создать объект изображения, загрузить в него файл, создать объект текстуры, передать в неё объект изображения, создать объект спрайт, передать в него объект текстуры.

(Советую код не копировать, а писать вручную)

Код выглядит следующим образом:

#include <SFML/Graphics.hpp>
using namespace sf;//включаем пространство имен sf, чтобы постоянно не писать sf::
int main()
{
RenderWindow window(sf::VideoMode(640, 480), "Lesson 3. kychka-pc.ru"); //увеличили для удобства размер окна
Image heroimage; //создаем объект Image (изображение)
heroimage.loadFromFile("images/hero.png");//загружаем в него файл
Texture herotexture;//создаем объект Texture (текстура)
herotexture.loadFromImage(heroimage);//передаем в него объект Image (изображения)
Sprite herosprite;//создаем объект Sprite(спрайт)
herosprite.setTexture(herotexture);//передаём в него объект Texture (текстуры)
herosprite.setPosition(50, 25);//задаем начальные координаты появления спрайта
while (window.isOpen())	
{
sf::Event event;
while (window.pollEvent(event))
{
if (event.type == sf::Event::Closed)
window.close();
}
window.clear();
window.draw(herosprite);//выводим спрайт на экран
window.display();
}
return 0;
}

#include <SFML/Graphics.hpp>

using namespace sf;//включаем пространство имен sf, чтобы постоянно не писать sf::

int main()

{

RenderWindow window(sf::VideoMode(640, 480), "Lesson 3. kychka-pc.ru"); //увеличили для удобства размер окна

Image heroimage; //создаем объект Image (изображение)

heroimage.loadFromFile("images/hero.png");//загружаем в него файл

Texture herotexture;//создаем объект Texture (текстура)

herotexture.loadFromImage(heroimage);//передаем в него объект Image (изображения)

Sprite herosprite;//создаем объект Sprite(спрайт)

herosprite.setTexture(herotexture);//передаём в него объект Texture (текстуры)

herosprite.setPosition(50, 25);//задаем начальные координаты появления спрайта

while (window.isOpen())

{

sf::Event event;

while (window.pollEvent(event))

{

if (event.type == sf::Event::Closed)

window.close();

}

window.clear();

window.draw(herosprite);//выводим спрайт на экран

window.display();

}

return 0;

}

Всё новое (или обновленное) имеет комментарии, всё остальное осталось не тронутым (почему не тронутым? см. предыдущий урок )

Второй вариант – напрямую загрузить в текстуру. Функция загрузки “loadFromFile(“изображение”)” имеется и у объектов Текстур.

#include <SFML/Graphics.hpp>
using namespace sf;
int main()
{
RenderWindow window(sf::VideoMode(640, 480), "Lesson 3. kychka-pc.ru"); //увеличили для удобства размер окна
Texture herotexture;//создаем объект Texture (текстура)
herotexture.loadFromFile("images/hero.png");//загружаем картинку
Sprite herosprite;//создаем объект Sprite(спрайт)
herosprite.setTexture(herotexture);//передаём в него объект Texture (текстуры)
herosprite.setPosition(50, 25);//задаем начальные координаты появления спрайта
while (window.isOpen())	
{
sf::Event event;
while (window.pollEvent(event))
{
if (event.type == sf::Event::Closed)
window.close();
}
window.clear();
window.draw(herosprite);//выводим спрайт на экран
window.display();
}
return 0;
}

#include <SFML/Graphics.hpp>

using namespace sf;

int main()

{

RenderWindow window(sf::VideoMode(640, 480), "Lesson 3. kychka-pc.ru"); //увеличили для удобства размер окна

Texture herotexture;//создаем объект Texture (текстура)

herotexture.loadFromFile("images/hero.png");//загружаем картинку

Sprite herosprite;//создаем объект Sprite(спрайт)

herosprite.setTexture(herotexture);//передаём в него объект Texture (текстуры)

herosprite.setPosition(50, 25);//задаем начальные координаты появления спрайта

while (window.isOpen())

{

sf::Event event;

while (window.pollEvent(event))

{

if (event.type == sf::Event::Closed)

window.close();

}

window.clear();

window.draw(herosprite);//выводим спрайт на экран

window.display();

}

return 0;

}

Каким из способов пользоваться? Зависит от задач. В первом случае у объекта Image есть функции, которых нет у Texture. Ну, например –

.createMaskFromColor(Color(0, 0, 0)); // Делает прозрачным, то есть убирает, нужный вам цвет в вашем изображении. Если бы кот был на синем фоне, а не прозрачном, как в нашем случае, то мы бы писали

createMaskFromColor(Color(0, 0, 255));

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

На этом уроке мы вывели картинку на экран, но в играх выводится по одному котику. Как вывести одного кота? Смотрите следующий урок

Для начала спасибо за уроки, начинаю постигать SFML.

По поводу урока хотел бы посоветовать сразу правильно учить работать с файлами и экономить память (я понимаю что на современных машинах её в избытке, но зачем зря тратить ресурсы?)

Чтобы на загрузке файла не вылазила ошибка, лучше сразу отлавливать неудачную попытку загрузки файла. т.е. вместо

heroImage.loadFromFile("images/hero.png")

1	heroImage.loadFromFile("images/hero.png")

лучше писать

...
if (!heroImage.loadFromFile("images/hero.png")) //если не получится загрузить файл
{
heroImage.create(50,50,Color(100,100,100)); // тут обработчик ошибки, 
//можно вывести сообщение, а можно как я - создать пустое серое изображение
}
...

...

if (!heroImage.loadFromFile("images/hero.png")) //если не получится загрузить файл

{

heroImage.create(50,50,Color(100,100,100)); // тут обработчик ошибки,

//можно вывести сообщение, а можно как я - создать пустое серое изображение

}

...

ну и про экономию памяти – после создания текстуры из картинки картинка становится ненужной и её вполне можно удалить.

heroImage.~Image();

1	heroImage.~Image();

Но текстуру удалять нельзя, т.к. она используется дальше.

В данном случае картинка, размером 16,5 килобайт съедает почти мегабайт памяти.

Пойду читать дальше.

Урок 3. Загрузка текстуры, вывод картинки на экран. на примере создания персонажа. SFML

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

Авторизация | Регистрация