Что такое SFML
SFML (Simple and Fast Multimedia Library) — это библиотека для представления мультимедийных данных. SFML обеспечивает простой интерфейс для разработки игр и прочих мультимедийных приложений. Состоит она из пяти модулей: system, window, graphics, audio и network. Об особенностях всех этих компонент и будет рассказано в уроках.
SFML является кроссплатформенной библиотекой, а это значит, что ваши приложения будут работать на большинстве операционных систем (Windows, Linux, Mac OS X, позже будет добавлена поддержка Android и iOS). Скачать SFML можно с оф.сайта тут.
SFML поддерживает большое число языков программирования (официально Си и .Net подобные языки, а благодаря различным сообществам ещё и такие как Java, Ruby, Python, Go, и другие). На этой странице можно узнать более подробный список.
Share the post «Что такое SFML»
Что такое sfml
SFML (Simple Fast Multimedia Library) — это C++ библиотека для мультимедиа. В статье мы воспользуемся SFML для рисования фигур в окне.
Создайте каталог с названием sfml.1 . Откройте каталог в Visual Studio Code. Откройте терминал и убедитесь, что вы находитесь в этом каталоге:
Все упражнения и задания вы будете выполнять в подкаталогах каталога sfml.1 : sfml.1\00 , sfml.1\01 и так далее.
Следуйте инструкциям. Также выполните задания, указанные в тексте. Если при компиляции у вас возникнут ошибки, внимательно читайте текст ошибок в терминале.
Простая программа со сборкой через CMake
CMake — это система сборки. Нам она позволит не печатать каждый раз команды компиляции с нуля, тем более что команды будут становиться всё сложнее и сложнее.
- Создайте в каталоге sfml.1 файл с именем CMakeLists.txt
- Скопируйте следующий текст в файл и сохраните в этом файле:
# Минимальная версия CMake: 3.8 cmake_minimum_required(VERSION 3.8 FATAL_ERROR) # Имя проекта: sfml-lab-1 project(sfml-lab-1) # Подкаталог 00 содержит ещё один CMakeLists.txt add_subdirectory(00) Теперь создайте в каталоге sfml.1 подкаталог 00 , в каталоге 00 создайте ещё один файл с именем CMakeLists.txt . Сохраните в нём другой текст:
# Добавляем исполняемый файл 00 # Он собирается из 1 файла исходного кода: main.cpp add_executable(00 main.cpp) Затем создайте файл main.cpp в каталоге 00 и напишите в нём любую простую программу, например:
#include int main() int a = 0; int b = 0; std::cout <"enter two numbers:" <std::endl; std::cin >> a >> b; std::cout <"sum: " <(a + b) <std::endl; > Сейчас каталог должен выглядеть так:
Далее следуйте шагам:
- Откройте терминал и введите команду g++ 00/main.cpp -o 00.exe . Убедитесь, что компиляция прошла успешно, затем выполните команду 00.exe .
- Удалите программу командой del 00.exe
- Затем соберите программу с помощью CMake. Эта операция выполняется в два шага: конфигурирование + сборка.
Внимание: в обеих командах ниже есть точка “.”, она означает “использовать текущий каталог”
cmake -G "MinGW Makefiles" . cmake --build . Вывод первой команды будет примерно таким:
D:\Projects\CppDistro\workspace>cmake -G "MinGW Makefiles" . -- The C compiler identification is GNU 7.2.0 -- The CXX compiler identification is GNU 7.2.0 . -- Configuring done -- Generating done -- Build files have been written to: D:/Projects/CppDistro/workspace Вывод второй команды будет выглядеть так:
D:\Projects\CppDistro\workspace>cmake --build . Scanning dependencies of target 00 [ 50%] Building CXX object 00/CMakeFiles/00.dir/main.cpp.obj [100%] Linking CXX executable 00.exe [100%] Built target 00 Если сборка была успешной, запустите 00\00.exe , чтобы проверить, что программа доступна и работоспособна.
Поздравляем, теперь вы умеете собирать проекты с помощью CMake!
Закрепим результат с помощью git
Чтобы ваши достижения не потерялись, вам надо использовать систему контроля версий Git. В консоли введите следующие команды
git init git add CMakeLists.txt git add 00/CMakeLists.txt git add 00/main.cpp Ни одна из команд git add не должна выводить сообщений. Если где-то было сообщение, значит, у вас возникла ошибка. В этом случае проверьте команду и введите её снова.
Теперь введите команду git status и посмотрите на её вывод. Зелёным цветом помечены файлы, добавленные под контроль версий, красным помечены остальные файлы. Если вывод команды у вас совпадает со скриншотом, можно продолжить.
Пришло время зафиксировать свою первую версию! Введите команду git commit -m «Added A+B program» . Git зафиксирует версию и выведет краткий отчёт:
D:\Projects\CppDistro\workspace>git commit -m "Added A+B program" [master (root-commit) 340778e] Added A+B program 3 files changed, 16 insertions(+) create mode 100644 00/CMakeLists.txt create mode 100644 00/main.cpp create mode 100644 CMakeLists.txt Возможно, git откажется выполнять фиксацию и предложит ввести свой email и имя. Ему нужны эти данные, чтобы у каждой версии был указан автор изменений. Вы можете ввести данные двумя командами, заменив «ваш.email» и «ваше.имя» на ваши email и имя, например «admin@localhost.ru» и «Lavrentiy Pavlovich»
git config --global user.email "ваш.email" git config --global user.name "ваше.имя" Теперь введите команду git clean -fd . О чудо! Все посторонние файлы, кроме исходного кода, теперь исчезли. Команда убрала всё, что не занесено под контроль версий.
Простая программа с библиотекой SFML
Создать графическую программу немногим сложнее, чем консольную, благодаря SFML. SFML состоит из множества модулей, и нам нужны три модуля:
- SFML system, потому что его используют остальные два модуля
- SFML window, чтобы создать окно программы
- SFML graphics, чтобы нарисовать хотя бы что-то в этом окне
Для начала создайте каталог 01 , и в нём создайте файл CMakeLists.txt , сохраните в нём текст:
add_executable(01 main.cpp) set(SFML_STATIC_LIBRARIES TRUE) find_package(Freetype) find_package(JPEG) find_package(SFML 2 COMPONENTS window graphics system) target_compile_features(01 PUBLIC cxx_std_17) target_compile_definitions(01 PRIVATE SFML_STATIC) target_link_libraries(01 $ $) Этот текст — скрипт сборки на языке CMake. В этом скрипте мы подключаем три модуля SFML (window, graphics, system), устанавливаем версию языка (C++2017), настраиваем зависимости SFML (библиотеки libjpeg и freetype). Если бы мы напрямую вызывали g++, нам бы пришлось писать очень длинные команды — скрипт позволяет такого избежать.
Теперь создайте в каталоге 01 файл main.cpp , и аккуратно перепишите в него код:
Теперь вернитесь к основному файлу CMakeLists.txt и добавьте строку add_subdirectory(01) , чтобы он выглядел так:
cmake_minimum_required(VERSION 3.8 FATAL_ERROR) project(cpp-samples) add_subdirectory(00) add_subdirectory(01) После этого снова запустите CMake:
cmake -G "MinGW Makefiles" cmake --build . Если сборка была успешной, запустите программу 01\01.exe . На 5 секунд появится окно, а затем оно исчезнет.
Окно показывается, пока выполняется инструкция sf::sleep(sf::seconds(5)); , а затем программа заканчивается и окно скрывается. В будущем мы научимся показывать окно столько, сколько захотим, и закрывать по нажатию на кнопку в верхнем правом углу окна.
Давайте разберём, что выполняет код:
- Инструкция sf::RenderWindow window(sf::VideoMode(), «title») объявляет переменную window, которая имеет тип “графическое окно”, размеры 800×600 px и незамысловатый заголовок “title”.
- Вызов метода window.clear() очищает окно, а вызов window.display() выводит на экран то, что было нарисовано после очистки.
- подробнее о методах sf::RenderWindow вы узнаете в документации SFML (sfml-dev.org).
- Инструкция sf::CircleShape shape1(40) объявляет переменную shape1 — круг размером 40px.
- Вызовы shape1.setPosition и shape1.setFillColor задают позицию круга в пикселях и цвет в виде RGB-компонентов (Red, Green, Blue).
- подробнее о методах CircleShape вы узнаете на странице документации (sfml-dev.org)
Теперь добавьте больше фигур:
Запустите CMake, а затем программу:
cmake --build . 01\01.exe У вас должно получиться что-то такое:
Освоим прямоугольники (rectangles) и повороты (rotation)
SFML позволяет рисовать разные типы фигур, в том числе прямоугольники. Прямоугольным фигурам соответствует класс sf::RectangleShape.
Создайте каталог 02 , и в нём создайте файл CMakeLists.txt и сохраните текст:
add_executable(02 main.cpp) set(SFML_STATIC_LIBRARIES TRUE) find_package(Freetype) find_package(JPEG) find_package(SFML 2 COMPONENTS window graphics system) target_compile_features(02 PUBLIC cxx_std_17) target_compile_definitions(02 PRIVATE SFML_STATIC) target_link_libraries(02 $SFML_LIBRARIES> $SFML_DEPENDENCIES>) Теперь создайте в каталоге 02 файл main.cpp , и аккуратно перепишите в него код. Посмотрите на код: определите, где создаются два прямоугольника (rectangle) и где устанавливается поворот в градусах (rotation).
По умолчанию фигуры поворачиваются относительно своего центра, но вы можете изменить это поведение с помощью метода setOrigin , доступного для любой фигуры. Подробнее об этом методе вы узнаете из документации SFML.
Теперь вернитесь к основному файлу CMakeLists.txt и добавьте строку add_subdirectory(02) , чтобы он выглядел так:
cmake_minimum_required(VERSION 3.8 FATAL_ERROR) project(cpp-samples) add_subdirectory(00) add_subdirectory(01) add_subdirectory(02) Соберите через CMake и запустите 02\02.exe . Результат будет таким:
Теперь вам надо зафиксировать успех! В терминале выполните команды:
git init git add CMakeLists.txt git add 01/CMakeLists.txt git add 01/main.cpp git add 02/CMakeLists.txt git add 02/main.cpp git status git commit -m "Added rectangles example" Введите команду git log . Она покажет вам журнал изменений; этот журнал показывает все ранее зафиксированные версии. Выйти из просмотра лога можно с помощью горячей клавиши Q .
Задание sfml1.1
Нарисуйте с помощью кругов и прямоугольников светофор такого вида:
- Перед тем, как написать код, нарисуйте светофор на клетчатой бумаге — так вы сможете измерить координаты, на которых должны располагаться фигуры.
- Светофор должен быть нарисован ровно, без явных искажений.
- Размер окна должен быть немного больше размера светофора (отступ 10-20px)
- Когда вы сделаете задание, зафиксируйте его с помощью git.
Задание sfml1.2
Нарисуйте фигурами свои инициалы в английской транскрипции.
- Например, если вас зовут “Fadeev Victor Andreevich”, напишите фигурами три буквы: FVA .
- Перед тем, как написать код, нарисуйте эти буквы на клетчатой бумаге — так вы сможете измерить координаты, на которых должны располагаться буквы, и примерно оценить углы поворота.
- Нарисованные инициалы должны быть читаемые и аккуратные.
- Когда вы сделаете задание, зафиксируйте его с помощью git.
Освоим выпуклые многоугольники (convex shapes)
SFML позволяет рисовать выпуклые многоугольники — то есть трапеции, треугольники, некоторые пятиугольники и так далее. Таким фигурам соответствует класс sf::ConvexShape.
Создайте каталог 03 , и в нём создайте файл CMakeLists.txt , сохраните текст:
add_executable(03 main.cpp) set(SFML_STATIC_LIBRARIES TRUE) find_package(Freetype) find_package(JPEG) find_package(SFML 2 COMPONENTS window graphics system) target_compile_features(03 PUBLIC cxx_std_17) target_compile_definitions(03 PRIVATE SFML_STATIC) target_link_libraries(03 $SFML_LIBRARIES> $SFML_DEPENDENCIES>) Теперь создайте в каталоге 03 файл main.cpp , и аккуратно перепишите в него код. Посмотрите на код: определите, где создаются два прямоугольника (rectangle) и где устанавливается поворот в градусах (rotation):
Теперь вернитесь к основному файлу CMakeLists.txt и добавьте строку add_subdirectory(03) , чтобы он выглядел так:
cmake_minimum_required(VERSION 3.8 FATAL_ERROR) project(cpp-samples) add_subdirectory(00) add_subdirectory(01) add_subdirectory(02) add_subdirectory(03) Соберите через CMake и запустите 03\03.exe . Результат будет таким:
Если всё в порядке, зафиксируйте код с помощью Git (добавьте файлы и сделайте commit).
Введите команду git log , проверьте, что commit сделан. Выйти из просмотра лога можно с помощью горячей клавиши Q .
Задание sfml1.3
Нарисуйте с помощью ConvexShape, RectangleShape и CircleShape домик такого вида:
- Перед тем, как написать код, нарисуйте домик на клетчатой бумаге — так вы сможете измерить координаты, на которых должны располагаться фигуры, и определить координаты точек для выпуклых многоугольников.
- Домик должен быть нарисован ровно, без явных искажений.
- Когда вы сделаете задание, зафиксируйте его с помощью git.
PS-Group
- PS-Group
- sshambir@gmail.com
- ps-group
- image/svg+xml sshambir
Материалы для курсов в Институте Программных Систем и в Волгатехе
Подключение библиотеки SFML к Visual Studio
В этом уроке я хотел бы показать, как подключить библиотеку SFML к среде разработки Visual Studio.
SFML содержит ряд модулей для простого программирования игр и мультимедиа приложений.
Перед тем как начать. Нужно пройти по ссылке: http://www.sfml-dev.org/download/sfml/2.3.2/ (это официальный сайт) и скачать библиотеку. Выбирайте версию для своей VS.
Распаковываем куда вам угодно, на всякий случай старайтесь избегать русских букв в папках пути.
Запускаем Visual Studio, файл->создать->проект->пустой проект. (Имя проекта, решений и путь выбирайте сами).
Добавляем исходный код – для этого слева в обозревателе решений находим вкладку «Файлы исходного кода»->правый клик->добавить->создать элемент->файл C++ (имя main.cpp)->добавить.
Далее вставляем вот этот тестовый код в файл main.cpp
#include int main() { sf::RenderWindow window(sf::VideoMode(200, 200), "SFMLworks"); sf::CircleShape shape(100.f); shape.setFillColor(sf::Color::Green); while (window.isOpen()) { sf::Event event; while (window.pollEvent(event)) { if (event.type == sf::Event::Closed) window.close(); } window.clear(); window.draw(shape); window.display(); } return 0; }
После попытки запуска мы сталкиваемся с подобной проблемой:
Для того, чтобы всё это работало – необходимо подключить библиотеку SFML.
Для начала, все действия мы делаем для конфигурации Debug.
Заходим вверху «проект»->свойства “имя проекта”->свойства конфигурации->C++->общие
В пункте «дополнительные каталоги включаемых файлов прописываем путь до раннее распакованного архива с библиотекой (+ \include.)
Например: C:\Program Files\SFML-2.3.2\include
Затем идем в компоновщик->общие и в пункте «дополнительные каталоги библиотек» прописываем путь к папке lib;
Далее идем в компоновщике во вкладку ввод и в первой строке «дополнительные зависимости» вписываем перед всеми библиотеками следующую строчку:
sfml-graphics-d.lib;sfml-window-d.lib;sfml-system-d.lib;sfml-audio-d.lib;
Только что подключили основные необходимые для работы библиотеки.
Последний штрих – идем во вкладку C++->препроцессор и в первой строке «определение препроцессора» в самом начале дописываем: SFML_DYNAMIC;
Напоминаю, все действия мы делали для конфигурации Debug. Все тоже самое нужно проделать для конфигурации Release.
Заходим вверху «проект»->свойства “имя проекта”->свойства конфигурации. В левом верхнем углу находим Конфигурация, нажимаем на слайдер и выбираем Release.
И повторяем несколько предыдущих пунктов.
Запустим и словим ошибку. Зато соберется проект и появится папка debug.
Теперь идем в папку бинарников “bin”, которую вы скачали и распаковали с библиотекой (мой вариант D:\SFML-2.2\bin\) и копируем всё содержимое этой папки (dll файлы типа sfml-graphics-2.dll) в папку с вашим проектом в папку debug (после сборки появилась эта папка), но не в тот debug, где лежит файл с исходным кодом “main.cpp”, а тот, где появляется exe файл.
В эту же папку копируем и вот эти файлы :
Все эти файлы можно скачать в zip архиве, который я прикрепил снизу.
Теперь проект можно запустить и если вы всё сделали правильно, то увидите зелёный круг как на скриншоте ниже:
Если возникла вот такая проблема:
Советую воспользоваться программой: Dll-Files Fixer.
| Прикрепленный файл | Размер |
|---|---|
| msvcp.zip | 550.93 кб |
| msvcr.zip | 1.61 Мб |
CS332. Компьютерная графика
Существует довольно много библиотек, которые способны отображать окна для Opengl — SDL, Glut (freeglut), QT, SFML, можно даже использовать нативные API операционной системы (вроде Winapi для Windows). Но SFML имеет ряд важных преимуществ, это мультимедийная библиотека, представляющая из себя объектно ориентированный аналог SDL, что делает её гораздо удобнее последней, но при этом более многофункциональной чем, например, Glut. В частности, SFML имеет интерфейс для управления текстурами, тогда как при использовании glut пришлось бы подключать дополнительные библиотеки, такие как SOIL2. Помимо этого, у SFML очень хорошая и удобная документация на официальном сайте.
Установка
Установить SFML и Opengl можно разными способами, но удобно воспользоваться для этого пакетными менеджерами. Для работы в Visual Studio можно воспользоваться nuget, но мне для c++ проектов показался удобнее vcpkg, относительно недавно появившийся мультиплатформенный пакетный менеджер от Microsoft.
Установка vcpkg производится слегка необычным образом, для этого необходимо клонировать репозиторий vcpkg (желательно чтобы в путях установки не было кириллицы, иначе могут возникнуть проблемы)
git clone https://github.com/Microsoft/vcpkg.git И затем вызвать скрипт загрузки
.\vcpkg\bootstrap-vcpkg.bat После этого можно устанавливать библиотеки
vcpkg install sfml vcpkg install opengl vcpkg install glew Установка занимает довольно продолжительное время
Чтобы установленные пакеты были видны из Visual Studio, надо написать следующее
vcpkg integrate install Обратите внимание, что по умолчанию устанавливаются пакеты 32-битной разрядности, для установки 64-битной версии пакета необходимо явно задать версию.
vcpkg install sfml:x64-windows vcpkg install opengl:x64-windows vcpkg install glew:x64-windows Работа с SFML и OpenGL
Простая программа на SFMl выглядит следующим образом
#include int main() < // Создаём окно sf::RenderWindow window(sf::VideoMode(200, 200), "SFML window"); // Главный цикл while (window.isOpen()) < sf::Event event; // Цикл обработки событий while (window.pollEvent(event)) < // Событие закрытия окна, if (event.type == sf::Event::Closed) window.close(); > // Перерисовка окна window.display(); > return 0; > Здесь просто создаётся окно, и до тех пор, пока оно открыто, происходит перерисовка.
Теперь запустим простую программу для работы с OpenGL, которая выводит на экран окно с разноцветным крутящимся квадратом.
ВАЖНО. СЛЕДУЮЩИЙ КОД НАПИСАН С ИСПОЛЬЗОВАНИЕМ УСТАРЕВШЕГО API OPENGL И СЛУЖИТ ИСКЛЮЧИТЕЛЬНО ДЛЯ ПРОВЕРКИ РАБОТОСПОСОБНОСТИ OPENGL И SFML. ОН НЕ ЯВЛЯЕТСЯ ПРИМЕРОМ ИЛИ ЗАГОТОВКОЙ ДЛЯ ВЫПОЛНЕНИЯ ЛАБОРАТОРНЫХ РАБОТ!
#include #include #include void SetIcon(sf::Window& wnd); void Init(); void Draw(); int main() < // Создаём окно sf::Window window(sf::VideoMode(600, 600), "My OpenGL window", sf::Style::Default, sf::ContextSettings(32)); // Ставим иконку (окна с дефолтной картинкой это некрасиво) SetIcon(window); // Включаем вертикальную синхронизацию (синхронизация частоты отрисовки с частотой кадров монитора, чтобы картинка не фризила, делать это не обязательно) window.setVerticalSyncEnabled(true); // Активируем окно window.setActive(true); // Инициализация Init(); // Главный цикл окна while (window.isOpen()) < sf::Event event; // Цикл обработки событий окна, тут можно ловить нажатия клавиш, движения мышки и всякое такое while (window.pollEvent(event)) < if (event.type == sf::Event::Closed) < // Окно закрыто, выходим из цикла window.close(); > else if (event.type == sf::Event::Resized) < // Изменён размер окна, надо поменять и размер области Opengl отрисовки glViewport(0, 0, event.size.width, event.size.height); > > // Очистка буферов glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // Рисуем сцену Draw(); // Отрисовывает кадр - меняет передний и задний буфер местами window.display(); > return 0; > // В момент инициализации разумно произвести загрузку текстур, моделей и других вещей void Init() < // Очистка буфера тёмно жёлтым цветом glClearColor(0.5f, 0.5f, 0.0f, 1.0f); > // Глобальные переменные это плохо, тут это сделано просто для примера GLfloat rotate_z = 0; // Функция непосредственно отрисовки сцены void Draw() < rotate_z += 0.5; // Используем устаревшую функциональность установки единичной матрицы преобразования glLoadIdentity(); // С использованием устаревшей функции glRotate домножаем на матрицу поворота glRotatef(rotate_z, 0.0, 0.0, 1.0); // Используем устаревшую конструкцию glBegin-glEnd для рисования квадрата glBegin(GL_QUADS); glColor3f(1.0, 0.0, 0.0); glVertex2f(-0.5f, -0.5f); glColor3f(0.0, 1.0, 0.0); glVertex2f(-0.5f, 0.5f); glColor3f(0.0, 0.0, 1.0); glVertex2f(0.5f, 0.5f); glColor3f(1.0, 1.0, 1.0); glVertex2f(0.5f, -0.5f); glEnd(); // Отправляем набор команд отрисовываться glFlush(); > void SetIcon(sf::Window& wnd) < sf::Image image; // Вместо рисования пикселей, можно загрузить иконку из файла (image.loadFromFile("icon.png")) image.create(16, 16); for (int i = 0; i < 16; ++i) for (int j = 0; j < 16; ++j) image.setPixel(i, j, < (sf::Uint8) (i * 16), (sf::Uint8)(j * 16), 0 >); wnd.setIcon(image.getSize().x, image.getSize().y, image.getPixelsPtr()); >