Qbik-club
Дата публикации:29.06.22 19:09;Автор:Евгений;Категория: программирование;Теги:, ;

SFML. Основы рисования фигур

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

SFML. Основы рисования фигур

И так, напомню, что в прошлой публикации мы остановились на таком варианте. Мы тут создаём окно и рисуем в нём кружок. Если вам что то тут — непонятно пожалуйста, вернитесь к публикации по ссылке в заголовке и там сможете узнать непонятные моменты.

int main(){
  sf::RenderWindow window(sf::VideoMode(200, 200), "SFML works!"); // Создаём объект
  sf::CircleShape shape(100.f); // Создаём кружок
  shape.setFillColor(sf::Color::Green); // Заливаем его зелёным

  while (window.isOpen()){ // Цикл работает до тех пор, пока окно открыто
   sf::Event event; // Получаем события, произошедшие на текущей итерации цикла
   while (window.pollEvent(event)){ // Разбираем эти события
   WindowEvent(event, window); // В функции
 }

  window.clear(); // Очищаем окно после прошлой итерации
  window.draw(shape); // Рисуем кружок
  window.display(); // Выводим новый кадр в окно
 }

 return 0;
}

Теперь, чтоб дать вам понять, как тут на самом деле всё просто, давайте кружок заменим на треугольник. Для этого оставьте всё как есть, но строку:

sf::CircleShape shape(100.f);

Замените на:

sf::CircleShape shape(100.f, 3);

После чего скомпелируйте код заново. И ву а ля! Кружок превратился в трёхугольник! :)

Превращаем круг в равносторонний трёхугольник

Рисуем первый квадрат

И так, теперь давайте разбираться, как мы что рисуем. Как мы уже знаем из предыдущих публикаций, для начала мы создаём фигуру. Для этого мы создаём экземпляр класса, к примеру CircleShape. И передаём ему радиус и количество вершин. По умолчанию наша фигура будет иметь 30 вершин. Для простых фигур этого достаточно, по этому ранее мы этот параметр не трогали. Но достаточно указать другое количество вершил, к примеру три, и мы уже получаем не круг, а треугольник. Как сделать квадрат? Думаю самые догадливые уже могли догадаться! :)

sf::CircleShape shape(100.f, 4);

Ромб в SFML

Но подождите, вам не кажется, что с нашим квадратом что то не так? Да, не так, давайте поставим его «на ноги». Что для этого случая нужно сделать? Просто его повернуть. По этому давайте ниже добавим ещё одну строку. В итоге у нас получится вот такой код:

sf::CircleShape shape(100.f, 4);
shape.setRotation(45);

Иии... Что то пошло не по плану...

Вращаем квадрат

Получилось что то, что просит: «Убей меня, я не знаю, что я такое», не так ли? Но не пугайтесь, всё верно. Ведь не забывайте, что изначально мы рисовали круг, которому прикрутили всего четыре угла и повернули. По этому точка, вокруг которой всё вращается — находится за границей самого квадрата. А поскольку мы её ещё не меняли — она находится в верхнем левом углу. на изображении ниже я схематически попытался дорисовать границы самого квадрата и точку, вокруг которой мы вращаем фигуру.

вигтуральные границы нашей фигуры и точка, вокруг которой всё вращаем

В итоге, чтоб нарисовать квадрат нам понадобится три строки:

sf::CircleShape shape(100.f, 4);
shape.setRotation(45);
shape.setPosition(100, -40);

На первой строке мы как всегда, создаём новую фигуру. Далее поворачиваем фигуру на 45 градусов, чтоб «поставить на ноги» наш квадрат. И в конце — мы указываем, что хотим нарисовать фигуру не в верхнем левом углу, а чуть сметить её, чтоб вписать в наше окно.

На случай, если вы к данному моменту немного запутались, весь код будет выглядеть так:

int main(){
    sf::RenderWindow window(sf::VideoMode(200, 200), "SFML works!");
    sf::CircleShape shape(100.f, 4);
    shape.setFillColor(sf::Color::Green);
    shape.setRotation(45);
    shape.setPosition(100, -40);

    while (window.isOpen()){
        sf::Event event;
        while (window.pollEvent(event)){
            WindowEvent(event, window);
        }

        window.clear();
        window.draw(shape);
        window.display();
    }

    return 0;
}

Рисуем квадрат и рядом треугольник

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

И перед тем, как мы продолжим, давайте ещё раз закрепим пройденный материал. Чтоб нарисовать любую фигуру нам надо сделать следующее:

И в качестве закрепления материала — давайте попробуем разместить в одном окне квадрат и рядом с ним — треугольник.

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

Далее в основном цикле нам нужно вывести нашу новую фигуру на экран. Для этого мы просто после вызова window.draw с аргументом в виде shape, вызываем свойство класса ещё раз, но уже с аргументом в виде нашей второй фигуры. в общем и целом наш код уже будет выглядеть так:

int main(){
    sf::RenderWindow window(sf::VideoMode(500, 350), "SFML works!"); // Создаём объект
    sf::CircleShape shape(100.f, 4); // Создаём квадрат
    shape.setFillColor(sf::Color::Green); // Заливаем его зелёным
    shape.setRotation(45);
    shape.setPosition(100, -40);

    sf::CircleShape triangle(100.f, 3); // Создаём треугольник
    triangle.setFillColor(sf::Color::Blue); // Заливаем его синим
    triangle.setPosition(200, 25); // И размещаем его чуть в стороне от квадрата

    while (window.isOpen()){ // Цикл работает до тех пор, пока окно открыто
        sf::Event event; // Получаем события, произошедшие на текущей итерации цикла
        while (window.pollEvent(event)){ // Разбираем эти события
            WindowEvent(event, window); // В функции
        }

        window.clear(); // Очищаем окно после прошлой итерации
        window.draw(shape); // Рисуем квадрат
        window.draw(triangle); // И треугольник
        window.display(); // Выводим новый кадр в окно

        sf::sleep(sf::milliseconds(6));
    }

    return 0;
}

И да, обратите внимание, что само окно мы немного расширили, чтоб уместить все фигуры. Как видим — в этом нет ничего сложного.

И в конце, давайте вы попробуете сами создавать и размещать фигуры? Сможете нарисовать кот такое окно?

Задание по рисованию в окне SFML

А на этом у меня сегодня всё. Надеюсь смог изложить всю информацию максимально доступно и вы освоили азы работы с фигурами. Но конечно же, это далеко не всё, что нужно знать о рисовании фигур. В следующей публикации вы узнаете подробнее о свойствах фигур, поговорим подробнее о цветах, как заливать своим цветом, как делать фигуры полупрозрачными и ещё много другого интересного! Так что до скорых встреч в следующих публикациях сайте Qbik.club! ;)

Публикация относится к тематической подборке: «Библиотека SFML»

Цикл публикаций посвящённый библиотеке SFML. Разбираемся с работой этой библиотеки от самых первых шагов до создания простых игр.

Понравилась публикация? Поделись ей с друзьями!

Понравился сайт? Подпишьсь на нас в соцсетях!

Мы в TelegramМы ВконтактеМы в ТвиттерМы на фейсбукМы в одноклассниках
Опубликовать
Загрузка рекомендуемых публикаций