10 secret Ninja weapons for Qt Quick QML developers

You might be asking yourself what has to do Qt Quick or QML and Ninjas. Well, let me introduce you the coding Ninja,  our cool mascot at Collabora. And as you know real ninjas are almost invisible and use very lethal weapons. But let’s go to the point and see what secret stuff are using coding Ninjas. Let me show you some useful tricks discovered while playing with Qt Quick and QML stuff at Collabora, which might not be secret really but there is little documentation about them anyway, so they could be missed easily.

1. QML Viewer scripts. This is really great tool for demos and as a testing aid, unfortunately there is no documentation on it yet except the (-help and -scriptopts help command line options). Basically when you record a script, it generates a QML file which contains the input commands (keys, mouse, …) and some frame output information (png and frame output hashes). You can record test scripts and replay them later. The tool automatically test if the recorded output images are still the same and check for errors during the script run. It is actually checking every frame. But don’t panic it will not store an image for every frame, it will just store a combination, roughly an image every second and a hash for every frame. When you test the images output, it will tell you which frames don’t match and even save a copy of the rejected frames if they don’t. Of course in most apps you are not guaranteed to have repeatable results among different runs of the program, due to animations, little differences in time, event happening at different times, using random functions, etc. Nevertheless a useful tool, it can be used for error reporting, automating tests, coverage tests, demo run of applications, etc.
2. Use F5 to reload in QML Viewer. You can have qmlviewer running your QML scripts and you can edit the source code at the same time, just use F5 to reload the script. Of course this restarts the application.
3. Use F3 to take snapshots in QML Viewer. Be careful with F3 since will overwrite existing snapshots.
4. Use F9 to start / stop video recording in QML Viewer. It is recommended to tweak the video format and other settings in the video settings dialog for better performance. You can also use the -recordfile option from the command line to be able to record from the application startup. You can record on multiple PNG files, on a animated GIF file or using any video format supported by your ffmpeg installation .
5. Slow down animations in QML Viewer. If you have not the sight and powers of a Ninja, you might need this to slow down animations, so you can see the bullets coming just like in Matrix. Unfortunately it does not work very well my Zij Lost tetris like game, specially in game mode. The reason is that the game update function checks the real elapsed time between ticks to provide a better simulation. The game update function is called from the Timer QML object, which is affected by the slow down animations feature (as well as any QML Animation object). This can be fixed by just assuming the time between game updates is fixed, but still it is not working properly. The Timer callback does not seem to get called at regular intervals. The slowdown looks like 5 times slower, but sometimes it stops working for a few seconds. By the way, I saw the QML viewer released with SDK and the one from Qt creator have some differences. But that is probably due to the fact I’m using  a Qt Creator snapshot.
6. Change orientation in QML Viewer with Ctrl-T or F10. You can change from portrait to landscape.
7. Check the command line of QML Viewer with -help. There are some useful features like -borderless, -fullscreen among others.
8. Check the warnings window in QML Viewer. There you can get your console.log, but there you can find also useful messages that might help you when there is something wrong in your application.
9. QML dump. qmldump is a tool included in the SDK Qt bin directory, which gives you information about properties and signals of the classes available in QML. The information is provided in XML format, which might be useful to create other tools or to see the guts of some QML classes which are not fully documented.
10. Press F1 for help text about debugging features in QML Viewer. It shows some interesting debug options like F2 save test script, F4 show time and state, F6 show object tree and F7 show timing. Although they don’t seem to work in my version. They are not fully implemented or broken in my Qt Creator snapshot version, but it is worth to know they might be implemented in next versions.

How to mingle QML, Tetrominos and Ninjas

Zij Lost is a simple tetris like game done entirely in QML and Javascript, written to learn Qt Quick technology.

While waiting for a new and exciting project to land on my table after finishing my assignments in last project, Collabora gave me the opportunity to start tinkering with the hot Qt Quick, recently released in Qt 4.7 by Trolltech people. I had already read a bit about it in the past, and even attended some talks and demos at Akademy 2010 in Tampere, Finland. So I spent first days mainly reading docs, running and reading examples. But to really learn something I have to get my hands dirty with it, so I decided to create a small tetris-like game with QML, just for learning purposes, just for fun. After a few days, I had a basic implementation of the game which I am using as a testbed to experiment with QML.

The QML Advanced Tutorial was really useful, since it also implements the game “Same Game” just using QML and Javascript. No C++ required. My goal was similar create a whole game logic just with QML and Javascript, without C++ involved. Note that this might not be the recommended design pattern for real world QML applications, but I just wanted to pursue the limits of this new technology, get used to it and see if I could reach some boundaries in my expression power with just QML and Javascript.

I started creating the tetrominos in QML. I did not use images for them, I just build them with rectangles. This way it is  easier to apply animations and special effects to them. At the moment I have  effects for piece rotation and line completed. Then added a Timer QML object which calls the game loop. All game logic is of course written in Javascript, things like checking collisions, movement, game loop, game rules, etc. So in the end it has been useful to refresh a bit my rusty Javascript skills. Afterwards, I added some states to the main.qml in order to add a start screen, game mode and game over screen. I found the QML State abstraction very useful and it helps to create more clean and maintainable code.

Well, it has been fun. QML is fun. I have enjoyed programming with it. Scripting languages are nice with good tools, and Qt Creator did not dissapoint me.

You can find the source code the git repository at:

git://git.collabora.co.uk/git/user/mbatle/zijlost.git

Also you can find a release in a zip file at:

http://people.collabora.co.uk/~mbatle/zijlost/zijlost.zip

Note: I named the game “Zij Lost“, just a mixing of all the tetromino letters, which happens to mean something in Dutch, even although it does not have much sense without a context.

New link: just found a guide to game creation in QML which is interesting.

Some images and videos.