Evgenii Legotckoi
Evgenii LegotckoiOct. 8, 2017, 2:46 a.m.

SFML - Tutorial 001. Connecting the SFML library to a project on Qt

SFML is an object-oriented analog SDL. The library provides easy access to the systems of input-output, audio, data network, as well as to OpenGL functionality.

And what if, in addition, to add to this library also the Qt functionality, get into control the powerful capabilities of signals and slots, Qt resource files? What is required for this?

  1. Download the latest version of SFML source code from GitHub.
  2. Compile sources into the library
  3. Create a Qt project
  4. Connect the library to the project
  5. Write a widget that will be rendered directly through the SFML functionality

Build SFML

In general, you can download precompiled SFML libraries, but if you have a compiler that is different from the one that these libraries were assembled, then nothing will work. Therefore, we will not experiment, but immediately we will assemble a library with that compiler, which we will build the project.

SFML is represented by a project using the CMAKE build system, which is easily opened in Qt Creator.

When the project is open, we launch CMAKE, and then build the library itself, both in Debug mode and in Release mode, in order to have two sets of library libraries.

In the assembly directory there will be a lib directory, which will contain libraries of interest to us. We will add them to the project on Qt, in which SFML will be used.

The following libraries will be collected:

  • smfl-audio
  • sfml-graphics
  • sfml-network
  • sfml-window
  • sfml-system

Qt project

Next, create a new Qt project. Create a project using QWidget as the main application window. After the project is created, add the SFML directory to the project root, which will contain two directories: lib and include .

In the lib directory, you need to put all the compiled SFML libraries, both for the debug version and for the release version. And in the include directory, you need to put the files from the same include directory that is in the source project of the SFML library.

As a result, the structure of this directory in your Qt project will look like this.

After the library is prepared, it must be connected to the Qt project via a pro file.

To do this, we will write the following lines in the pro file:

win32:CONFIG(release, debug|release): LIBS += -L$$PWD/SFML/lib/ -lsfml-audio -lsfml-graphics -lsfml-network -lsfml-window -lsfml-system
else:win32:CONFIG(debug, debug|release): LIBS += -L$$PWD/SFML/lib/ -lsfml-audio-d -lsfml-graphics-d -lsfml-network-d -lsfml-window-d -lsfml-system-d
else:unix: LIBS += -L$$PWD/SFML/lib/ -lsfml-audio -lsfml-graphics -lsfml-network -lsfml-window -lsfml-system

INCLUDEPATH += $$PWD/SFML/include
DEPENDPATH += $$PWD/SFML/include

$$PWD - means the location of the pro project file, in which we register the project configuration and the connected files. That is, all the necessary library files will be searched relative to the project pro file.

Now let's start writing the project itself. Create an SFML widget that will fit inside the main widget of the application to show that you do not need to return the entire application window to use SFML.

The structure of the project will be as follows:

As you can see, there is a main widget of the Widget window, and there is also a qsqmlcanvas widget in which the SFML library will work. Also I added an image, through the resource file Qt ... Yes! It's possible! It is possible to use Qt resource files in the SFML library, you just need to write a few additional lines of code to properly extract images from the resource file.

Now let's start creating a project using Qt and SFML. It was decided to make an application in which the SFML widget will be twisted with the Qt logo.

Project profile and main.cpp

About connecting the library to the project was mentioned above, and the file main.cpp is not subject to any changes, so will not focus on them.

widget.h

In this project, I will not use the graphic designer, so manually write QGridLayout in the header file of the window where the SFML widget will be placed.

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QGridLayout>
#include "qsfmlcanvas.h" // Connecting the SFML widget

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget* parent = nullptr);
    ~Widget();

private:
    QSFMLCanvas* m_sfmlWidget;
    QGridLayout* m_gridLayout;
};

#endif // WIDGET_H

widget.cpp

And in the constructor, create a QSFMLCanvas widget and set its location in the application window.

#include "widget.h"

Widget::Widget(QWidget *parent) :
    QWidget(parent)
{
    resize(640, 480);
    m_sfmlWidget = new QSFMLCanvas(this);
    m_gridLayout = new QGridLayout(this);
    m_gridLayout->addWidget(m_sfmlWidget, 0, 0);
}

Widget::~Widget()
{

}

qsfmlcanvas.h

Let's take a look at the contents of the widget class SFML widget.

#ifndef QSFMLCANVAS_H
#define QSFMLCANVAS_H

#include <QWidget>
#include <QTimer>
#include <SFML/Graphics.hpp>

class QSFMLCanvas : public QWidget, public sf::RenderWindow
{
    Q_OBJECT
public:
    explicit QSFMLCanvas(QWidget* parent = nullptr, uint frameTime = 50);
    virtual ~QSFMLCanvas() {}

private :
    // The method of initializing the widget
    void onInit();
    // Widget Content Update Method
    void onUpdate();
    // The method that returns the Qt rendering engine
    virtual QPaintEngine* paintEngine() const override;
    // The method of opening and closing the widget will be required for initial initialization
    virtual void showEvent(QShowEvent*) override;
    // The method of drawing, we need to redraw the widget
    virtual void paintEvent(QPaintEvent*) override;

private slots:
    // The slot in which the redraw event will be called
    void onTimeout();

private:
    QTimer m_timer;
    bool   m_initialized;

    sf::Texture  m_texture;
    sf::Sprite   m_sprite;
};

#endif // QSFMLCANVAS_H

The methods onInit() and onUpdate() are optional, and in fact you can call them whatever you want, it's important that you first need to add all the necessary objects and periodically update them.

But the paintEngine() method must be redefined necessarily, because we will not use the Qt rendering engine, then this method will have to return nullptr.

The showEvent() and paintEvent() methods will be used to initialize the SFML functional and initial rendering and update of object rendering. These are methods that are methods of the QWidget class from which the SFML class of the widget is inherited. Redrawing the SFML widget with these methods will be done within the Qt event infrastructure. What does it mean? The fact is that the paintEvent() method can be called by calling the repaint() method, repaint() calls the redraw event within the Qt application stack, so do not be surprised that the paintEvent() method does not directly call for a redraw.

You could also notice that this class uses multiple inheritance from two classes: QWidget and sf::RenderWindow .

We need inheritance from QWidget to get the ability to implement an SFML widget anywhere in the application interface, and also access the Qt signal functionality and slots, while inheritance from sf::RenderWindow is necessary to gain access to the functionality of this library, plus which is That it works directly with OpenGL .

qsqmlcanvas.cpp

#include "qsfmlcanvas.h"

#include <string>

#include <QPixmap>
#include <QByteArray>
#include <QBuffer>

QSFMLCanvas::QSFMLCanvas(QWidget *parent, uint frameTime) :
    QWidget(parent),
    // Initialize the base constructor of the SFML drawing window
    sf::RenderWindow(sf::VideoMode(800, 600), "OpenGL", sf::Style::Default, sf::ContextSettings(24)),
    m_initialized(false)
{
    // Make the settings to directly draw the image into the widget
    setAttribute(Qt::WA_PaintOnScreen);
    setAttribute(Qt::WA_OpaquePaintEvent);
    setAttribute(Qt::WA_NoSystemBackground);

    // Set strong focus to keyboard events
    setFocusPolicy(Qt::StrongFocus);

    // Set the time period for the redraw timer
    m_timer.setInterval(frameTime);
}

void QSFMLCanvas::onInit()
{
    // Loading images from Qt resource files
    // Quite an interesting point in the sense that 
    // SFML can not load an image from resources, like QPixmap or QImage
    QPixmap pixmap(":/QtCreator.png");  // But if you create a QPixmap object
    QByteArray bArray;                  // Create a byte array object
    QBuffer buffer(&bArray);            // Put it in the buffer
    buffer.open(QIODevice::WriteOnly);  // Save the image to this buffer, that is, to memory
    pixmap.save(&buffer, "PNG");     

    // And then pick up the raw data from the buffer, indicating the amount of data to be retrieved
    m_texture.loadFromMemory(buffer.data().data(), buffer.data().size());
    // This procedure will need to be done once when creating an SFML texture

    // Next, install the images in sprite
    m_sprite.setTexture(m_texture);
    float xScale = 200. / m_sprite.getTextureRect().width;
    float yScale = 200. / m_sprite.getTextureRect().height;
    m_sprite.setScale(xScale, yScale);     // Scale an image
    m_sprite.setOrigin(m_sprite.getTextureRect().width / 2, m_sprite.getTextureRect().height / 2); // Set the center of the image
    m_sprite.setPosition(200, 200);        // Set the image position
}

void QSFMLCanvas::onUpdate()
{
    // Clean the screen
    clear(sf::Color(128, 0, 0));

    // Rotate the image
    m_sprite.rotate(1);

    // Draw this image
    draw(m_sprite);
}

QPaintEngine* QSFMLCanvas::paintEngine() const
{
    // Return nullptr instead of the Qt rendering engine, so that Qt does not try to draw anything
    return nullptr;
}

void QSFMLCanvas::showEvent(QShowEvent*)
{
    // Initial initialization of the SFML widget
    if (!m_initialized)
    {
        // Create an SFML window for rendering with the id of the window in which the drawing will be done
        RenderWindow::create(winId());

        // Initializing drawing objects
        onInit();

        // Setting the timer to restart the widget's rendering
        connect(&m_timer, &QTimer::timeout, this, &QSFMLCanvas::onTimeout);
        m_timer.start();

        m_initialized = true;
    }
}

void QSFMLCanvas::paintEvent(QPaintEvent*)
{
    // Updating object rendering
    onUpdate();

    // Display the rendered window
    display();
}

void QSFMLCanvas::onTimeout()
{
    // Run the redrawing
    repaint();
}

Download project

ATTENTION: The project was created under KDE NEON 5.8.2 and is a sample, the correct start of which is not guaranteed under other OS, in particular you will need to build the SFML library under your target platform and with your compiler.

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Do you like it? Share on social networks!

F
  • Oct. 10, 2017, 9:41 p.m.

Здравствуйте!

При сборке проекта выскакивает ошибка в файле qsfmlcanvas.cpp - строка  RenderWindow::create(winId());  метода showEvent пишет invalid conversion
Evgenii Legotckoi
  • Oct. 10, 2017, 10:14 p.m.
День добрый!
Под какой ОС собирали? Компилировали SFML библиотеки под свой компилятор?
F
  • Oct. 10, 2017, 10:16 p.m.

Собирал под Windows 7. Компилировал с тем же компилятором, с которым работает Qt

F
  • Oct. 10, 2017, 10:18 p.m.

Но если эту строку закомментировать, то приложение запускается и создается 2 окна(никакого изображения конечно же нет). OpenGl пустое, а второе с черными квадратными  областями

Evgenii Legotckoi
  • Oct. 10, 2017, 10:21 p.m.

Два окна из-за того, что хендлер не был передан для отрисовки.

Возможно, нужно поиграться со static_cast , чтобы получить правильное преобразование хендлера WId в то, что слопает метод RenderWindow::create().
Попробуйте так кастовать:
RenderWindow::create(static_cast<unsigned long>(winId()));
F
  • Oct. 10, 2017, 10:24 p.m.

Нет, так есть тож не хочет

Evgenii Legotckoi
  • Oct. 10, 2017, 10:26 p.m.

Более полный текст ошибки тогда давайте. Наверняка там есть более подробная информация. Пока у меня идей нет.

F
  • Oct. 10, 2017, 10:29 p.m.

Когда следую вашему методу с cast пишет "invalid conversion from long unsigned int to sf::WindowHandle {aka HWND__*}' [fpermissive]"

Evgenii Legotckoi
  • Oct. 10, 2017, 10:32 p.m.

Ну тогда такой каст

RenderWindow::create(static_cast<sf::WindowHandle>(winId()));
F
  • Oct. 10, 2017, 10:35 p.m.

Теперь пишет тоже самое просто вместо unsigned long int - "WId{aka unsigned int} "


F
  • Oct. 10, 2017, 10:36 p.m.

а вот так все работает  RenderWindow::create(sf::WindowHandle(winId()));

Evgenii Legotckoi
  • Oct. 10, 2017, 10:38 p.m.

Забавно. Какой компилятор использовали?

F
  • Oct. 10, 2017, 10:38 p.m.

открывается только 1 окно но картинка не грузится

хотя в ресурсах проекта она есть или тип PNG обязателен
F
  • Oct. 10, 2017, 10:39 p.m.

mingw


F
  • Oct. 10, 2017, 10:43 p.m.

А нет все отлично работает и с jpg просто это из-за размеров картинки была проблема

float xScale = 800. / m_sprite.getTextureRect().width;
float yScale = 800. / m_sprite.getTextureRect().height;
Здесь подставил свои и все норм
F
  • Oct. 10, 2017, 10:43 p.m.

Спасибо за советы

Comments

Only authorized users can post comments.
Please, Log in or Sign up
МВ

Qt - Test 001. Signals and slots

  • Result:68points,
  • Rating points-1
ЛС

C++ - Test 001. The first program and data types

  • Result:53points,
  • Rating points-4
АА

C++ - Test 001. The first program and data types

  • Result:60points,
  • Rating points-1
Last comments
ИМ
Игорь МаксимовOct. 5, 2024, 7:51 p.m.
Django - Lesson 064. How to write a Python Markdown extension Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
d
dblas5July 5, 2024, 11:02 p.m.
QML - Lesson 016. SQLite database and the working with it in QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
k
kmssrFeb. 9, 2024, 7:43 a.m.
Qt Linux - Lesson 001. Autorun Qt application under Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
Qt WinAPI - Lesson 007. Working with ICMP Ping in Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
EVA
EVADec. 25, 2023, 11:30 p.m.
Boost - static linking in CMake project under Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
Now discuss on the forum
MM
MichaelsusixQY MichaelsusixQYOct. 8, 2024, 5:57 a.m.
добавить qlineseries в функции Creating a healthier and healthier atmosphere is crucial for factories and factories. High-pressure washing can help remove contaminants, dust, and impurities that gather on floors, making sure …
JW
Jhon WickOct. 2, 2024, 3:52 a.m.
Indian Food Restaurant In Columbus OH| Layla’s Kitchen Indian Restaurant If you're looking for a truly authentic https://www.laylaskitchenrestaurantohio.com/ , Layla’s Kitchen Indian Restaurant is your go-to destination. Located at 6152 Cleveland Ave, Colu…
КГ
Кирилл ГусаревSept. 27, 2024, 9:09 p.m.
Не запускается программа на Qt: точка входа в процедуру не найдена в библиотеке DLL Написал программу на C++ Qt в Qt Creator, сбилдил Release с помощью MinGW 64-bit, бинарнику напихал dll-ки с помощью windeployqt.exe. При попытке запуска моей сбилженной программы выдаёт три оши…
F
FynjyJuly 22, 2024, 4:15 p.m.
при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …

Follow us in social networks