Qt For 2D Games

A game is one of the most complicated piece of software to make, because it touches almost all the areas of programming. And having the right tool-set is critical to the success of the project. Qt is a excellent fit because it is a cross-platform solution for the most common issues of game development, letting the developer focus on the game instead of messing with the subsystems. But you don't need to trust me on this, as it seems that even Google is using Qt for Games with the project called: VoltAir. Here's a short list of features that Qt gives you in a concise and intuitive API:

• Resource Management
• Multimedia Classes: Audio, Video, Radio, Camera…
• Networking, Bluetooth and Sensors
• XML, JSON and Database drivers
• Scripting Language: QML
• GUI Controls: Button, Sliders, Combo-box, etc
• IDE & Tools
• Localization
• Particle System and Shaders

Most of the framework are separated in modules and the user can choose to link against only the ones in need. The IDE, Qt Creator, is excellent and provide tools like a Debugger, QML profiler, integration with valgrind and facilitates the deployment on mobile platforms.

Focusing on the Graphics part, Qt uses the scene-graph renderer, to manipulate and draw all the graphics elements into the graphics card, using OpenGL ES for mobile devices and OpenGL for Desktop. To increase the performance of most user cases, the renderer uses state-of-the-art techniques like batching draw calls and global texture atlas, so most of the time one should not worry about the internals of the graphics engine. The renderer resides on the QtQuick module which is the package that contains all the graphics elements needed to make a game.

To start making games in Qt the developer have three options: pure c++; mixed C++ and QML; Pure QML. Using QML is a huge advantage because the language was designed focusing on ease of use for developers and designers, while still keep a high performance profile since most of the objects in QML will be translated to C++ Objects. The best approach for designing games in Qt that i found is to write everything you can in QML, leaving C++ only for code that performance is critical or hardware access, if needed.

QML Language For Games

QML is a young programming language, created around 2009 with the purpose of facilitate the UI development of software. It’s a very modern multi-paradigm language, intended to let the programmer focus in describe objects and how they interact instead of worry about managing the control flow. We will describe in this section the features that make QML appealing for game development.

Familiarity With Other Languages

First thing is Familiarity. QML look like CSS + Javascript on steroids, in fact, QML and Javascript are brothers in a way that you can create and use Javascript files and import it inside QML source files. This is an huge advantage for web game developers that already had adventured in HTML5, but want native speed and better access to hardware. Another interesting characteristic of QML is that you declare objects in similar way you declare styles and page properties in CSS. This declarative approach make the source clear to read and understand , improving the communication between developers and designers. For instance, when you declare a Text item such as this:

It's pretty clear the intent of the developer to create a bold red text using the exquisite Comic Sans font. The designer that read this code will understand that immediately and the collaboration will be easier.

Hierarchical Structure

When you are programming in QML you are bound to the Tree object hierarchy. This is interesting because every transformation, animation, property change of an Object reflects on its children, making easy to create compound objects.

For example, you can create a Car Item like this beautiful one below:

Using this code:

And apply a 90 degree rotation “rotation = 90" on the Item with id car and all the children of the this item will rotate also. Looking like this:

From the memory management perspective, if the car object is deleted, all the children will be deleted too. Nothing to worry about retained or leaked memory.

Property Binding

This functionality is not commonly found in many language, but is one of the most interesting ones. Objects (or Items) have properties such as height, width, color and many others. This properties defines the behavior and appearance of the Items and can be represented as different data types, such as: integers, floats, lists, strings and so on. Property Binding is the ability of the language to declare a property value as an dynamic expression of another property, so when this property changes its value, any other property bound to it will be re-evaluated to hold a new value. For instance, to declare two Rectangles, say, one black and other blue, in which one is half the size of the other, to declare those two Rectangles is just as easy as it could be.

By declaring the width and the height of the blue Rectangle as an mathematical expression of the properties of the black Rectangle, it will take half the size of the black regardless how many times the geometry of the black Rectangle changes. The same happens to the position, x and y.

Animation

QML have built-in animation types that can be used to change values of a target property or properties over time. Supose we want to move a red ball over the x axys, we can describe the ball and the animated movement with the code below:

The PropertyAnimation with id moveAnimation will accept the Rectangle redBall as it's target and will change the property "x" of redBall until it reaches 520 during 600 miliseconds. To start the animation the call method moveAnimation.start() and this will happen:

One may think "it cannot get easier than that", but actually it can. Another way to declare a animation is using the keyword Behavior. It will allow to trigger the animation every time the property is modified. So the above example can be written as this:

There is a lot of Animation types built-in in QML: NumberAnimation, ColorAnimation, ParallelAnimation, SequentialAnimation and many more.

State Machine

QML Items have a built-in state machine implementation which is very useful for many game entities. For instance, suppose you have a red ball that when touched must turn into green. You can implement this behavior by creating two states for the ball, "red" state and "yellow" state. During the transition between states you can change properties of the ball or run an animation. In QML this is easily done by the code below:

There we declared two states: "red" and "yellow" and we set the initial state to "red". You can transit to the state “yellow” by assigning the property state, like this: ball.state = "yellow". After that the color of the ball will change to "yellow" and the animation will be trigger as we can see below:

During a transition, any property or set of property can be changed, animated and you can choose different targets for each PropertyChanges.

Qt Quick Features

Another important feature that is hard to find in game engines is components for HUD, Menus and general UI. Qt/QML give this to you for free, and can be styled to fit your need. There are many controls, such as: Sliders, ProgressBar, Tabs, Buttons, LineEdits and so on.

What's Next?

We just scratched the surface of the features and what can be accomplished with Qt for developing Games, but we are still missing many important game specific components, such: Sprites, Parallax Images, Entity, Physics, AI, Scene Management. Bacon2D implement all those features and many more. The second part of this article will focus on Bacon2D and how we can start developing games in Bacon2D.

Further Reading:

Bacon2D landing page: http://bacon2d.com/

To know more about qml: http://qmlbook.org/

Qt SDK installer: http://qt-project.org/downloads