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

SFML. Рисование фигур, часть 2

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

SFML.  Рисование фигур, часть 2

И так, ещё раз напомню, что эта публикация — продолжение. По этому опустим лирические подробности и приступим сразу к делу.

Изменяем цвета

И так, базовое создание и закрашивание фигуры у нас выглядело так.

sf::CircleShape triangleOne(30.f);
triangleOne.setFillColor(sf::Color::Blue);

В данной ситуации мы создаём фигуру и выбираем нужный цвет из заранее заготовленного списка. Но на самом деле, метод может принимать и другие значения. Это может быть:

И так, давайте проверим это на практике. Давайте выберем цвет в формате RGBA. Таким образом мы укажем не только цвет, но ещё и прозрачность, можем сделать фигуру, к примеру, полупрозрачной. Для этого мы обращаемся всё к тому же классу sf::Color, но теперь передаём ему значения.

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

sf::CircleShape triangleOne(70.f); // Создаём первую фигуру
triangleOne.setFillColor(sf::Color(10, 40, 200); // Задаём цвет (фигура непрозрачная, по этому альфа канал не указываем)
triangleOne.setPosition(50, 30); // И смещаем

sf::CircleShape triangleTwo(70.f); // Созджаём вторую фигуру
triangleTwo.setFillColor(sf::Color(200, 10, 20, 100)); //Задаём цвет с указанием прозрачности
triangleTwo.setPosition(150, 30); // И так же немного смещаем в сторону внутри окна

SFML. Пример частичного перекрытия фигур

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

Вращаем фигуры

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

sf::CircleShape shape(200.f, 4); // Создаём квадрат
shape.setFillColor(sf::Color::Green); // Заливаем его зелёным
shape.setOrigin(200, 200); // Задаём центр вращения по центру квадрата
shape.setRotation(30.f); // Поворачиваем на 30 градусов (по часовой стрелке)
shape.setPosition(200, 200); // Смещаем фигуру, чтоб она не вылезла за пределы окна

Пример вращения фигуры SFML

Контур

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

sf::CircleShape triangleOne(70.f); // Первый круг
triangleOne.setFillColor(sf::Color(10, 40, 200)); // Задаём ему цвет, не указывая прозрачность
triangleOne.setOutlineThickness(5); // И обводку в пять пикселей (цвет не указываем, цвет будет по умолчанию)
triangleOne.setPosition(50, 30); // Смещаем чуть в сторону

sf::CircleShape triangleTwo(70.f); // Второй круг
triangleTwo.setFillColor(sf::Color(200, 10, 20, 100)); // задаём другой цвет, указывая прозрачность
triangleTwo.setOutlineThickness(5); // Такая же обводка в пять пикселей
triangleTwo.setOutlineColor(sf::Color(200, 10, 20)); // Но в этот раз обводке указываем цвет
triangleTwo.setPosition(150, 30); // и смещаем фигуру немного в сторону

Частичное наложение фигур с указанием контуров

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

Рисуем прямоугольник

Я не просто так именно круг взял в качестве примера во всех публикациях. Именно используя эту фигуру вы можете менять количество вершин и рисовать практически любые правильные многоугольники. По этому фактически, вы на данном этапе уже можете рисовать приличное количеств фигур. Но увы, не все. По этому давайте узнаем, как же нарисовать прямоугольник? Для этого есть класс sf::RectangleShape.

sf::RectangleShape rectangle(sf::Vector2f(120, 50)); // определяем прямоугольник размером 120x50
rectangle.setFillColor(sf::Color(10, 40, 200)); // Прикручиваем ему цвет
rectangle.setPosition(50, 30); // Смещаем чуть в сторону

Прмиер рисования прямоугольника в SFML

Для примера создан прямоугольник, ему прикручен цвет и смещение. Не стоит забывать о том, что данной фигуре можно придать ровно все те же самые свойства, что и кругу. Можем сделать больше, меньше, сместить, повернуть, добавить контур и всё остальное, что мы уже знаем и ещё узнаем в будущем! :)

Линия

Для линий нет отдельного класса. Причина очень простая: если у линии есть толщина — используется фигура прямоугольник. Проще говоря, делаете низкий и длинный прямоугольник. Если же вам нужна линия без толщины — можете воспользоваться примитив линией.

sf::Vertex line[] = {
 sf::Vertex(sf::Vector2f(10, 10)),
 sf::Vertex(sf::Vector2f(150, 150))
};

Однако стоит зметить, что это мы уже забегаем немного наперёд. О примитивах будет отдельная публикация! Это немного другое! ;)

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

А на сегодня у меня всё. Не забывайте, если вам понравилась публикация — расскажите о ней друзьям через кнопки социальных сетей ниже, а так же оставьте своё мнение в комментариях. Это лучшая благодарность за проделанную работу! ;)

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

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

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

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

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