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.