https://www.kdab.com/3d-block-building-game/ Skip to content x How can we help you? Thanks for your interest in KDAB. Please write your message here and we'll get back to you as soon as possible. Name: * [ ] E-Mail: * [ ] Company: [ ] Phone: [ ] [ ] [ ] [ ] [ ] Message: * [ ] KDAB is committed to ensuring that your privacy is protected. * Only the above data is collected about you when you fill out this form. * The data will be stored securely. * The data will only be used to contact you about possible business together. * If we do not engage in business within 3 years, your personal data will be erased from our systems. * If you wish for us to erase it earlier, email us at info@kdab.com For more information about our Privacy Policy, please read https://www.kdab.com/about/kdab-privacy-policy/ [ ]* I have read and agree to the terms above. [ ] Yes, sign me up for the KDAB newsletter [Send] x Contact us Germany - KDAB (Deutschland) GmbH Reuchlinstrasse 10-11, 10553 Berlin +49 30 5213 254 70 +49 30 5213 254 99 info-de@kdab.com Other countries US: +1.866.777.5322 FR: +33 4 90 84 08 53 UK: +44 1625 809908 JP: +81 70 4001 0910 Full list all countries x Contact us Name[ ] E-Mail[ ] Company[ ] E-Mail[ ] [ ] [ ] [ ] Message[ ] Please attach your CV (PDF only) [ ] captcha [ ] [Send request] * Services + Projects o Code Migration o Modernization o Development o Consulting & Architecture o Mentoring & Support + Workshops o Code Migration & Modernization o Architecture o Profiling & Performance o Testing & Refactoring o Agile Development + Design Services + Qt Automotive Suite o Why Use Qt Automotive Suite? o Qt Automotive Suite In-depth + Training: On-Site o Qt Training # Qt Widgets for the Desktop # Qt/QML Training # Qt/QML for Embedded Training # Advanced QML Training # Advanced Qt Widgets Training o C++ Training # Modern C++: Introduction # Modern C++: C++11 / C++14 / C++17 o Qt Automotive # Qt Automotive Suite training # Qt for Automotive Development o Modern OpenGL # Modern OpenGL: Introduction # Modern OpenGL: Advanced Rendering and Effects # Modern OpenGL: Advanced Pipeline and Performance o Qt 3D Training o Debugging and Profiling # Debugging and Profiling Qt apps on Windows # Debugging and Profiling Qt apps on Linux # Debugging and Profiling C++ apps on Windows # Debugging and Profiling C++ apps on Linux o Other On-site Courses # Introduction to CMake # Git Training # Qt with Squish Training # Qt 3D Studio training o Training Facilities o KDAB Trainers o Testimonials o Terms/Conditions + Training: Scheduled o Qt Training # Qt Widgets for the Desktop # Qt/QML Training # QML for Embedded Training # Advanced QML Training # Advanced Qt Widgets Training # Model/View o Modern C++ # Modern C++: C++11 / C++14 / C++17 # Modern C++: Introduction o Qt Automotive # Qt Automotive Suite Training # Qt for Automotive Development Training o Modern OpenGL # Modern OpenGL: Introduction # Modern OpenGL: Advanced Rendering & Effects # Modern OpenGL: Advanced Pipeline & Performance o Qt 3D Training o Debugging and Profiling Courses # Debugging and Profiling Qt apps on Windows # Debugging and Profiling Qt apps on Linux # Debugging and Profiling C++ apps on Windows # Debugging and Profiling C++ apps on Linux o Introduction to CMake o Testing Qt with Squish o Qt 3D Studio training o Training Schedule o Training Facilities o KDAB Trainers o Testimonials o Terms/Conditions * Expertise + Qt / QML o Qt Automotive o Qt 3D o Qt on Android o Qt on QNX Neutrino RTOS o Qt on Windows Embedded CE o Qt Tools o Is Qt Right for Your Project? + C++ o C++ Latest Standards o C++ Tools o C++ Training # Modern C++: Introduction # Modern C++: C++11 / C++14 / C++17 + 3D / OpenGL o OpenGL o KUESA 3D Studio o KUESA glTF Library o Qt 3D o Vulkan * Platforms + Android + Linux + Web integration + QNX + Windows Embedded + Mobile iOS/Android + Windows + macOS + Unix / X11 (Motif) * Resources + Blogs + KDAB TV o News o Academy # Introduction to Qt/QML # Qt Widgets and more... # Kuesa 3D # GammaRay # Presentations o Showcases o Events # Demos o Archive + KDAB Monthly Digest + Content Library Search + Whitepapers, Brochures & Articles + Success Stories + Qt Desktop Days '20 + Qt World Summit o Qt World Summit '20 o Qt World Summit '19 o Qt World Summit '18 o Qt World Summit '17 o Qt World Summit '16 o Qt World Summit '15 + QtCon 2016 + Qt Developer Days o Qt Developer Days 2014 o Qt Developer Days 2013 o Qt Developer Days 2012 + Newsletter + Events + Qt Tools + Qt and CMake resources + Qt Creator Card * [ ] * * * About us + Contact + Customers & Industries + ISO 9001 Certified + Partners + Mission + Working at KDAB + KDAB France + KDAB Japan + Terms and Conditions + Privacy Policy & Cookies Qt/QML C++ 3D/OpenGL Qt/QML C++ 3D/OpenGL A 3D Block Building Game in QML # 24.02.2021 # Christoph Sterz # 2 comments FacebookTwitterLinkedInEmail Qt Quick Rendering Engine Here, at KDAB, we get to spend 10% of our time on learning what we don't know or practicing and improving what we already know. Recently, I decided to use that time to learn more about the Qt Quick Rendering Engine. The best way to do so, I found, is to use it in a way it wasn't intended to be used: for making simple 3D graphics -- creating my own little 3D paintings, as one would in Minecraft, starting with a ground plane. I'd like to take this time to share with you how to play. How to play My mini voxel-editor should be using Isometric Perspective to display colorful cubes, which can be placed in a world. Therefore, I create a QML Rectangle that contains the transformations necessary for isometric perspective. By combining three transforms, I create my ground plane: ground plane * 0 -- Starting with a normal rectangle * 1 -- Rotating 45 degrees (around transform origin) * 2 -- Downscaling of the original y-component * 3 -- Flipping of the coordinate system towards the viewer These actions can be achieved by combining three 4-by-4 matrices for each of the transformations, via multiplication. Note that, although QML comes with predefined Transform Items, I use raw matrices for each transform, to keep the code consistent. //The ISO perspective transform: transform: Matrix4x4 { id: isometric_perspective property real rotationZ: 45/360 * Math.PI * 2 property matrix4x4 flipMatrix: Qt.matrix4x4(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) property matrix4x4 rotationZMatrix: Qt.matrix4x4(Math.cos(rotationZ), -Math.sin(rotationZ), 0, 0, Math.sin(rotationZ), Math.cos(rotationZ), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) property real flatness: 0.5 property matrix4x4 scaleYMatrix: Qt.matrix4x4(1, 0, 0, 0, 0, flatness, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) matrix: flipMatrix.times(scaleYMatrix).times(rotationZMatrix) } Because all transforms originate in the top-right of my window, I position my world-origin to the bottom-center of my window, to reveal the full world inside of it. Since QML's scene graph is hierarchical, all of its child Items (Rectangles, Circles, ...) are inherently in the right perspective and appear as lying on the ground of my iso-world. Both the empty world and the world filled with Rectangle, Circle, and a star Image can be seen here: ground plane Next would be the cubes. I already have the top faces, since they would be simple squares in my iso-world (just like the red rectangle in the image above). To "elevate" them to the cubes height (32px), I apply an offset of 32 in x, as well as in y, as a transform. Going up in the iso-world means adding the same value to x and y, thus moving straight out of the corner pointing towards you. Sometimes, this additional axis combined out of x and y is called the w axis, for the isometric perspectives. There is a certain ambiguity, still, since the viewer does not know if a shape was moved on the ground plane (a), or elevated (b). Small tricks in lighting, such as adding a shadow, can help here: scene graph For the side faces, I also would need an upwards-effect to make them rise from the bottom to the top of my cubes. This, I achieve with a transform matrix, increasing x as well as y. For the right side, this happens in the first row of the transform matrix. Conversely, the left side has this double increase in its second row. scene graph For the colors, I decided to simply make the top Qt.lighter (cubeColor), the left normal cubeColor, and the right Qt.darker (cubeColor). So, overall, it looks like light is coming from top left. I found out that all MouseAreas are transformed, together with the visible Item (as they behave as transformed Rectangles). So, just by filling a MouseArea to each of the sides, I could make them clickable, individually, also working with all the transforms. To reuse the MouseArea, I refactored out a universal FaceArea, which allows you to create a cube at an arbitrarily chosen vector offset. So, to give an example, I instantiate it with the vector Qt.vector3D (0, 0, 1), for the top face to create the new cube on top, when clicking. //FaceArea.qml MouseArea{ property var creationOffset: Qt.vector3d(0, 0, 1) anchors.fill: parent acceptedButtons: Qt.AllButtons onWheel: {isoCube.color = Qt.hsla(Math.random(),0.8, 0.5, 1)} onClicked: { if (mouse.button & Qt.LeftButton) { isoWorld.createCubeAt(isoCube.xpos + creationOffset.x, isoCube.ypos + creationOffset.y, isoCube.level + creationOffset.z); } else { isoCube.destroy() } } } There are 3 possibilities of interaction: * Wheel randomly changes the color * Normal left click adds a new cube on that face, using QML's Dynamic Item Creation. * Right click deletes the cube. Bonus: To make the whole thing a bit more vivid, I made it wobble up and down. I also added an indicator where new cubes are placed on the ground plane. Here is the final result in a video: Tip: To make the Cubes stack well, Z-ordering has to be done right. There are 3 simple rules: 1. If it's above, it is in front. 2. If it has a lower x or y, it is in front (because it's more towards the viewer) 3. But "above" is way more important. So, I simply set the z to 1000 * stacklevel - x - y, and it worked well. Summary Although QML is intended to be used with 2D graphics, mainly 2.5D, including interaction is well possible through Item-specific transforms. The QML Scene Graph implicitly allows nested transforms and makes perspective drawings an easy task. I had lots of fun while playing and learning through this small example. Maybe it's useful to you, or maybe it just makes you as happy as it made me. The code for this mini Minecraft can be found and played with at: https://github.com/chsterz/isoworld KDAB offers unique Qt expert services. Develop unique Qt and QML applications with KDAB's expertise. For more information on our services surrounding Qt and QML, click here. About KDAB If you like this blog and want to read similar articles, consider subscribing via our RSS feed. Subscribe to KDAB TV for similar informative short video content. KDAB provides market leading software consulting and development services and training in Qt, C++ and 3D/OpenGL. Contact us. FacebookTwitterLinkedInEmail Categories: How to / KDAB Blogs / KDAB on Qt / QML / Qt / QtDevelopment / Technical Tags: 3D / QML 2 thoughts on "A 3D Block Building Game in QML" 1. [87f6] # Dave # 24.02.2021 # 2:26 pm The entire scene moving up and down in the video looks disorientating and annoying for usability. Reply 1. [7696] # Christoph Sterz # 24.02.2021 # 2:38 pm For usability, I can agree. Still, a static world was quite boring to look at So In the end, I still put in a bit of "wobble". Reply Leave a Reply Cancel reply Your email address will not be published. Required fields are marked * [ ] [ ] [ ] [ ] [ ] [ ] [ ] Comment [ ] Name * [ ] E-Mail * [ ] [Post Comment] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] Improve your programming skills Book a scheduled KDAB training! Boost team productivity Book an on-site training! Access KDAB's expertise Book a workshop! More Qt Development blogs A 3D Block Building Game in QML KDSingleApplication: a class for single-instance policy applications Getting your 3D ready for Qt 6 Beware of Qt Module-wide Includes KDDockWidgets 1.2.0 released Subscribe to our newsletter The KDAB Group is the global No.1 software consultancy for Qt, C++ and OpenGL applications across desktop, embedded and mobile platforms * About us + Contact + Customers & Industries + ISO 9001 Certified + Partners + Mission + Working at KDAB + KDAB France + KDAB Japan + Terms and Conditions + Privacy Policy & Cookies * Services + Projects + Workshops + Design Services + Qt Automotive Suite + Training: On-Site + Training: Scheduled * Expertise + Qt / QML + C++ + 3D / OpenGL * Platforms + Android + Linux + Web integration + QNX + Windows Embedded + Mobile iOS/Android + Windows + macOS + Unix / X11 (Motif) * Resources + Blogs + KDAB TV + KDAB Monthly Digest + Content Library Search + Whitepapers, Brochures & Articles + Success Stories + Qt Desktop Days '20 + Qt World Summit + QtCon 2016 + Qt Developer Days + Newsletter + Events + Qt Tools + Qt and CMake resources + Qt Creator Card Contact us DE: +49 30 5213 254 70 US: +1.866.777.5322 FR: +33 4 90 84 08 53 UK: +44 1625 809908 JP: +81 70 4001 0910 Full list, all countries * * * [ ] * Services + Projects + Workshops * Training + Training: On-Site + Training: Scheduled * Expertise + Qt/QML + C++ + 3D / OpenGL * Platforms * Blogs * Videos + KDAB TV * About Us + Working at KDAB