Game Development

Arrow defense game
alt text
Source code: https://github.com/Przemekkkth/arrow-defense-qt-game

@Joshika_Namani Which version of Qt do you use? I think that using Qt6 is a better option but here is a doc for Qt5 https://doc.qt.io/qt-5/qopenglwidget.html if you want to see.

Thanks for the cleanup!

Good luck with your game!

Your speedWalk is not just dependent of the frameTime, but also of the pixelDensity. So far, this seems to be correct to include both of these. However, you might have a higher resolution monitor now instead of just having a faster one. Are you using a scaling factor (its a setting of your operating system)? You should also include Screen.devicePixelRatio. Not sure, if this is the actual problem.

Hello,
To combine Qt3D and QtGui effectively, create separate components for 3D and 2D elements. Use Qt3D's input system for 3D interactions and Qt's event handling for GUI elements. Prioritize input based on focus. Communicate between components using signals and slots. Consider performance implications and thorough testing.

I have found two solutions how I can make the first person movement in the browser. Qt doesn't allow it because it is impossible to call emscripten_request_pointerlock() from Qt application: https://bugreports.qt.io/browse/QTBUG-126513

The first solution is to use pure WebGL and Ammo.js: Click to run a demo in the browser

The second solution is to use SDL3, Emscripten, and Bullet Physics: Click to run a demo in the browser

The demo allows to move with first person and third person view:

image.png

Baked shadows and textures using SDL3, Emscripten, OpenGL ES 2.0, Bullet Physics, and C++

Demo in the browser

5f457ae3-d03b-492f-b513-f540abaec581-image.png

I found also a great solution. You can add as class member:
QSet<int> pressedKeys;
And you can catch the key events in an event filter:

bool MyWidget::eventFilter(QObject * obj, QEvent * event) { if(event->type()==QEvent::KeyPress) { pressedKeys += ((QKeyEvent*)event)->key(); if( pressedKeys.contains(Qt::Key_Up) && pressedKeys.contains(Qt::Key_Left) ) { // up and left is pressed } } else if(event->type()==QEvent::KeyRelease) { pressedKeys -= ((QKeyEvent*)event)->key(); } return false; }

and install the event filter in the constructor:
this->installEventFilter(this);
Reference: https://stackoverflow.com/questions/23816380/using-multiple-keys-in-qt-c
Project where I use it:
https://youtu.be/YuSc8oCXHxk

@jsulm the sleep call was just to simulate work. Was just messing around to see what would happen. My primary concern is if theres an operation in there that takes some time it will end up taking 3x longer since there are 3 vulkan windows and the update is done in serial rather than parallel.

But before I go off trying to prematurely optimize was wondering if the approach I'm taking is even the right way to go about things.

It does seem to work for the toy example I'm using (just loading an image from disk to display) but that image load operation takes 10ms, and since its done 3 times it ends up taking 30ms per update which will actually start impacting framerates and kind of
concerns me. In reality the app will use a camera stream which will be faster with a set framerate so might not be as big of an issue though.

Another thing too is most examples I've seen have just used a single QVulkanWindow, but for my case it seems like using multiple would make things much easier since each window has its own independently managed swap chain and I'd be able to use a QSplitter to make one window larger than the other.

@arlyn123 did you find any solution?

My following Qt 6.6.3 example works on Android, Desktop, and Web (with Qt WebAssembly). It prints data received from the server. The server contains the Box2D-WASM library. It sends the gravity value in JSON format when a client is connected. It is useful example to make multiplayer games with physics on the server side. I have deployed the example on free Glitch hosting: https://glitch.com/edit/#!/merciful-regal-soursop from the GitHub repository: send-gravity-from-server-to-client-box2d-wasm-js The client contains only one main.cpp file. It outputs the following information to the console:

connected "{\"action\":\"scGravity\",\"data\":\"{\\\"x\\\":0,\\\"y\\\":-3}\"}"

You should download OpenSSL to run the following example on Android. Open the following window in Qt Creator (Edit > Preferences... > Devices > Android):

image.png

Add the following path to your pro-file:

QT += core gui websockets widgets android: include(C:/Qt/Tools/OpenSSL-1.1.1j/Win_x64/bin/openssl.pri) CONFIG += c++17 SOURCES += \ main.cpp

Read how to add OpenSSL to your CMake project if you use CMake instead of QMake in the Qt documentaion: Adding OpenSSL Support for Android

Build the following example for Android, Desktop, and WebAssembly (I have tested it):

main.cpp

#include <QtNetwork/QNetworkRequest> #include <QtWebSockets/QWebSocket> #include <QtWidgets/QApplication> #include <QtWidgets/QWidget> class Widget : public QWidget { Q_OBJECT public: Widget() { setWindowTitle("Show gravity from server with Box2D-WASM"); resize(420, 200); connect(&m_webSocket, &QWebSocket::connected, this, &Widget::onConnected); connect(&m_webSocket, &QWebSocket::textMessageReceived, this, &Widget::onMessageReceived); connect(&m_webSocket, &QWebSocket::errorOccurred, this, &Widget::onErrorOccurred); QUrl url("wss://merciful-regal-soursop.glitch.me"); QNetworkRequest request; request.setUrl(url); request.setRawHeader(QByteArray("User-Agent"), QByteArray("Mozilla/5.0 " "(Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) " "Chrome/124.0.0.0 Safari/537.36")); m_webSocket.open(request); } ~Widget() {} private slots: void onConnected() { qDebug() << "connected"; } void onMessageReceived(const QString &message) { qDebug() << message; } void onErrorOccurred(QAbstractSocket::SocketError error) { qDebug() << "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"; qDebug() << "Error:" << error; qDebug() << "Device supports OpenSSL:" << QSslSocket::supportsSsl(); qDebug() << "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"; } private: QWebSocket m_webSocket; }; #include "main.moc" int main(int argc, char *argv[]) { QApplication app(argc, argv); Widget w; w.show(); return app.exec(); }

@slymas glad you found out and thanks for sharing ! :-)

I added the next comment to the bug report: https://bugreports.qt.io/browse/QTBUG-123862

Try to run my example on macOS and Linux. Maybe it is a Windows issue. But requestAnimationFrame works perfectly smoothly on Windows: https://plnkr.co/edit/DebSXYMQ6TlgC7KT?preview It has a fixed 60 FPS, which means that the load on the processor is minimal.

The worst result was with swapInterval=1, which I had at the beginning (I had not tried other values before). swapInterval with 0 and 10 is better, but not as good as requestAnimationFrame in JavaScript: https://plnkr.co/edit/B5t34XdK3MVi1WNb?preview (it is just a translation animation). I attached a source code "simple-translation-animation" (without rotation and scale animations). I attached EXE files for swapInterval = 0, swapInterval = 1, and swapInterval = 10:

swapInterval = 0 - simple-translation-animation-opengles2-qt6-cpp-win10x64-exe-swap-interval-0.zip swapInterval = 1 - simple-translation-animation-opengles2-qt6-cpp-win10x64-exe-swap-interval-1.zip swapInterval = 10 - simple-translation-animation-opengles2-qt6-cpp-win10x64-exe-swap-interval-10.zip

4623e1c6-0872-494d-881f-3b9677f8c17c-image.png

I opened a source code of getScaling and saw how scaling is calculated there: https://glmatrix.net/docs/mat4.js.html#line1197

export function getScaling(out, mat) { let m11 = mat[0]; let m12 = mat[1]; let m13 = mat[2]; let m21 = mat[4]; let m22 = mat[5]; let m23 = mat[6]; let m31 = mat[8]; let m32 = mat[9]; let m33 = mat[10]; out[0] = Math.hypot(m11, m12, m13); out[1] = Math.hypot(m21, m22, m23); out[2] = Math.hypot(m31, m32, m33); return out; }

I made the same with qHypot

#include <QtGui/QMatrix3x3> #include <QtGui/QMatrix4x4> #include <QtGui/QOpenGLFunctions> #include <QtGui/QQuaternion> #include <QtMath> #include <QtOpenGL/QOpenGLWindow> #include <QtWidgets/QApplication> #include <QtWidgets/QWidget> class OpenGLWindow : public QOpenGLWindow, private QOpenGLFunctions { public: OpenGLWindow() { setTitle("OpenGL ES 2.0, Qt6, C++"); resize(350, 350); QMatrix4x4 matrix; matrix.translate(20.f, 80.f, 0.f); matrix.rotate(-90.f, QVector3D(0.f, 0.f, 1.f)); matrix.scale(20.f, 20.f); qDebug() << "Transformation matrix: " << matrix; // Output: 0, 20, 0, 20, // -20, 0, 0, 80, // 0, 0, 1, 0, // 0, 0, 0, 1 // "QMatrix4x4" has a row-major order // Get scaling float sx = qHypot(matrix.row(0)[0], matrix.row(1)[0], matrix.row(2)[0]); float sy = qHypot(matrix.row(0)[1], matrix.row(1)[1], matrix.row(2)[1]); float sz = qHypot(matrix.row(0)[2], matrix.row(1)[2], matrix.row(2)[2]); QVector3D scaling(sx, sy, sz); qDebug() << "Scaling:" << scaling; // Output: QVector3D(20, 20, 1) // Get rotation QMatrix3x3 rotationMatrix; rotationMatrix.data()[0] = matrix.column(0)[0] / sx; rotationMatrix.data()[1] = matrix.column(0)[1] / sy; rotationMatrix.data()[2] = matrix.column(0)[2] / sz; rotationMatrix.data()[3] = matrix.column(1)[0] / sx; rotationMatrix.data()[4] = matrix.column(1)[1] / sy; rotationMatrix.data()[5] = matrix.column(1)[2] / sz; rotationMatrix.data()[6] = matrix.column(2)[0] / sx; rotationMatrix.data()[7] = matrix.column(2)[1] / sy; rotationMatrix.data()[8] = matrix.column(2)[2] / sz; QQuaternion rotation = QQuaternion::fromRotationMatrix(rotationMatrix); qDebug() << "Rotation:" << rotation; // Output: QQuaternion(scalar:0.707107, vector:(0, 0, -0.707107)) // Get translation float tx = matrix.row(0)[3]; float ty = matrix.row(1)[3]; float tz = matrix.row(2)[3]; QVector3D translation(tx, ty, tz); qDebug() << "Translation:" << translation; // Output: QVector3D(20, 80, 0) } void initializeGL() override { initializeOpenGLFunctions(); glClearColor(0.2f, 0.2f, 0.2f, 1.f); } void paintGL() override { glClear(GL_COLOR_BUFFER_BIT); } }; int main(int argc, char *argv[]) { QApplication::setAttribute(Qt::ApplicationAttribute::AA_UseDesktopOpenGL); QApplication app(argc, argv); OpenGLWindow w; w.show(); return app.exec(); } QT += core gui opengl widgets win32: LIBS += -lopengl32 CONFIG += c++17 SOURCES += \ main.cpp

P.S. The QMatrix4x4 constructor uses row-major order. The glMatrix fromValues method uses column-major order.

I solved the problem with the relative paths to the library! I just added -L before $$PWD like this:

INCLUDEPATH += $$PWD/libs/fmod-2.2.21-mingw-64-bit/include LIBS += -L$$PWD/libs/fmod-2.2.21-mingw-64-bit/lib/x64 LIBS += -lfmod

Now you can download the next example and run it in Qt Creator (with MinGW 64) without necessary to set up FMOD or changing the paths in pro-file: play-audio-from-resources-fmod-qt6-cpp.zip (2.51 MB)

I have the same question for WebAssembly: https://forum.qt.io/topic/155454/dealing-with-keyboard-layout-for-input-on-qt-webassembly

@Michele-Rossi Hi. I see that this thread is extensive, but I would also like to express my opinion. When it comes to Qt and 3D, I can recommend you one chapter of the book Mastering Qt. Chapter 6 describes how to create a snake 3D game using QtQuick components and uses shaders and models. I think this is a good basis for writing something better later. Fortunately, there is a repository for this book and you can download and test the code. Link to the example: https://github.com/PacktPublishing/Mastering-Qt-5/tree/master/Chapter_06

Pro tip,

always and I mean always be very specific with your Context attributes and with your OpenGL state.

With ES2/ES3 the context state is manageable it gets bigger with the desktop GL unfortunately but I really recommend to always be very explicit with your state setting in the beginning.

So for every draw you make, make sure you enable/disable set every state your current draw requires. that means your blending, your stencil, depth test, face culling etc.

When everything works and you've encoded all this in your rendering code then you can very carefully start omitting redundant state sets.

Incorrect state is a major source of OpenGL bugs.

And to make everything what I said above easier, if you're writing your own engine type of thing you really want to accumulate as much state as possible, associate all that with your draw so that your draw takes your geometry, program, state objects and then does as much as possible to make sure the state is exactly what you need and the state that isn't mentioned in your application state is set to a known OpenGL state. For example if your draw doesn't use depth testing then you really want to mention in your code that your depth testing is disabled instead of relying on any implied "default" state in the driver.

Example

https://github.com/ensisoft/detonator/blob/master/device/opengles.cpp#L732