Petals for Harmattan - A pure Qt4/Qt5 JS/QML puzzle game

Next up in my list of things I did in the last weeks/months and never blogged about is Petals (Nokia Store link), a "beautiful, brain-teasing puzzle game for 1-4 players" if the game's website is to be believed (I would like to think it is...). As always, there's some technical details about the porting and creation of this game. While another recent game (Tetrepetete) has been done on a low level (C++ using no frameworks, and interfacing with multiple front-ends directly, including an OpenGL ES frontend, a console-based ncurses frontend(!) as well as a server-sent events/XHR/Canvas2D-based HTML5 frontend(!!)), this one is approaching things from a very high level: JavaScript.

Petals: A puzzle game written in pure JavaScript and QML

The gameplay logic of the game is implemented in pure JavaScript (without any QML dependencies), so it could easily be ported to, say, HTML5, but for integration reasons, QML seemed like the better choice for a release on the N9/Harmattan. Also, writing things in JavaScript wouldn't preclude a console-based frontend using nodejs and node-ncurses from happening should the need arise (making the flowers look good in ASCII art would be the challenge there - or cheating by using libcaca). Ok, ok - stop cursing, I'll stop talking about curses (cue laugh track).

Writing pure QML applications has the advantage of easing porting to Qt 5. While QtQuick 1.1 still exists on Qt 5 (and is the only QML option at the moment if you are also targetting iOS), QtQuick 2.0 is usually the better choice for performance reasons.

In my case, the changes necessary to port from QtQuick 1.1 to QtQuick 2.0 were:

• Change "import QtQuick 1.1" to "import QtQuick 2.0" (sed(1) helps here)
• Instead of assigning a JavaScript function to a property to create a dynamic property binding (item.someprop = function() { return otheritem.otherprop * 3.0; }), this function has to be wrapped in a call to Qt.binding() in Qt 5 (see "Creating Property Bindings from JavaScript" in the Qt 5 docs)
• Instead of using SQL Local Storage directly as in QtQuick 1.1, use QtQuick.LocalStorage 2.0, which you can still do in your .js files - use ".import" as described in this blog post
• In your C++ launcher (in case you need one), QApplication becomes QGuiApplication, and QDeclarativeView becomes QQuickView
• Use "QT += quick qml" instead of "QT += declarative" in your qmake project file

And that's basically it. Of course, as this is a full-screen game with custom UI, no platform-specific components (such as Harmattan Components or Sailfish Silica) are used, so porting is a bit easier there (no need to "wait" for specific components to be compatible with QtQuick 2.0, which might realistically not happen at all for Harmattan Components). More screenshots of Petals and download links for multiple platforms can be found on the Petals Website.

Games (and their backstory) for your N9, N900 and N950

I've recently been asked again about the games I wrote for mobile devices, so here it is: The post with an overview of the games, with some not-so-well-known backstories and information on where to get them for different devices. Plus a little teaser hidden somewhere.

Gaberln (N950, N9 (+Symbian): Ovi Store, N900: Maemo Talk)
This game is a simple soccer ball juggling game - developed using QML, in collaboration with Tim Samoff, who did the great artwork (and who also did the Mong artwork) - we still have to add some more features, and Tim has already done the graphics for a special hacky sack mode, let's hope we get around to finishing it at some point :)

qw The Game (N950, N9 (+Symbian): Ovi Store, N900: .deb on request, @qwgame)
This game is similar to Qix, but has its own style, and the enemies are a bit different from Qix - but it basically is an area filling game. The reason why the game is called "qw" is because it started out as a small Python hack (qw.py) during the Super Gamedev Weekend 2010, and qw were the first two letters on my keyboard. A nicer explanation is that it can be spelt (in German) like Cuvée and a reference to the different blend of different photos (flowers, places, animals) that you have to play through. The photos have been done by vogelvau, the menu structure is done using QML and the gameplay itself uses a QGraphicsView-based drawing engine.

That Rabbit Game (N950, N9, N900 (+Symbian): Ovi Store, @thatrabbitgame)
This is my first game to be published in Ovi Store; it's a "inverse duck hunt"-style game where you control the flying rabbit head, and have to get yourself shot by approaching the crosshairs and keeping steady. Flapping the wings is done by touching (the strength depends on the duration of the touch) and moving left and right is done using the accelerometer. The initial version of this game was developed in Java as an Android game for an OpenGL ES course at our University (PDF). The game for Maemo, MeeGo and Symbian is a complete rewrite in C++/Qt with the artwork taken from the original game, which I did myself in Inkscape. There is also a webOS port using OpenGL ES.

Tennix (N900, N8x0: Extras)
This one is quite old, and is actually based on a really, really old codebase of a school project from 2003. In 2007, I decided to port it to SDL for Desktop Linux, Mac OS X and Windows, and since SDL is available on Maemo as well, I then ported it to Maemo 4 in January 2008. A special "2009 Edition" was created for the N900, with updated controls and a Python-based AI enemy (using the CPython API / libpython). What about Harmattan you ask? Well..

Some of these games are just free and closed source for now. I do, however, definitely plan to release them as open source in the future. The problem is having used non-free artwork in the early prototyping stages (i.e. getting "something" visible in the engine) before replacing them with my own artwork, so I'll have to make sure to remove these things from the repository history before publishing the source. Also, code cleanups need to be done ;)

Download and enjoy the games - I'd be grateful if you could leave some feedback (either via Ovi Store, Maemo Talk, comments here or e-mail).

qw 0.1 is now available for Maemo 5

My second new game this year - qw - has been released for Maemo 5 today. Version 0.1 (a tech demo, not a proper final release) gives you a sneak peek on the gameplay with 9 different levels and four-player support (if you hook up an external USB keyboard or get together really close for some N900 keyboard multiplayer action). The gameplay is simple: You need to control your player cursor (either via touchscreen gestures or keyboard) and enclose areas of the game with lines in order to fill them with a colored image. Beware of the enemies, as they will destroy your lines and split your points in half. If you enclose one or more small enemies, your points are multiplied.

A .deb for Maemo 5 is available from the qw homepage and packages for Symbian are also available. Try it out and send some feedback :) Enjoy!

Qt: Write once, #ifdef everywhere?

Despite what the title of this post might suggest, I really like Qt. But as a developer, I also know that "write once, run everywhere" isn't realistic without writing some special-cased platform-specific code. Qt does take care of many platform-specific things, and I think it's the closest you can get to "write once, run everywhere" right now.

This post should serve two purposes: To provide a real-world example of what needs to be done in the code for the app to work on both Maemo 5 and Symbian^3 (with example code), and to get suggestions on what parts I could rewrite in a more platform-agnostic manner with existing APIs (so please comment if you are in the know!).

Here's the story: In early September, I've rewritten my game "That Rabbit Game" to use QGraphicsView on the N900, and in the last weeks, I've ported it to Symbian^3. I use the macro Q_OS_SYMBIAN to check for Symbian and Q_WS_MAEMO_5 to check for Fremantle. Here's the current main menu on a N900 and N8 (different screen resolutions and aspect ratios):

Qt modules: In the qmake project file, I can use linux-g++-maemo5 to add Maemo-specific configuration, and symbian for Symbian-specific settings. I use D-Bus module on Maemo, but obviously not on Symbian, so my project file contains something like this:

linux-g++-maemo5 {
    QT += dbus
}

This is nice, because I only have to maintain one project file, and the block structure is very readable (and I can even use different Qt submodules for each platform).

Screen orientation: Symbian has auto-rotation for Qt apps by default, and Maemo 5 has landscape-only mode by default. For my game, portrait mode does not make sense, so I have to request landscape-only on Symbian (similarly, if I want auto-rotation everywhere, I have to request it on Maemo 5 and do nothing in Symbian). For this specific case, I need some libs in Symbian, so I add this to the project file:

symbian {
    LIBS += -lcone -leikcore -lavkon
}

I also need to add this to the top of my main source file:

#ifdef Q_OS_SYMBIAN
#include <AknAppUi.h>
#endif

And finally, I have to copy'n'paste a code block into my main() function before I create the first window:

#ifdef Q_OS_SYMBIAN
CAknAppUi* appUi = dynamic_cast<CAknAppUi*> (CEikonEnv::Static()->AppUi());
TRAPD(error,
if (appUi) {
    // Lock application orientation into landscape
    appUi->SetOrientationL(CAknAppUi::EAppUiOrientationLandscape);
}
);
#endif

It would be nice if Qt (or Qt Mobility?) has some generic API for this, where I just need to do something along the lines of QRotation::setMode(QRotation::LandscapeOnly); and let it take care of the platform-specific stuff.

Accelerated QGraphicsView: On Symbian^3, QGraphicsView is automatically accelerated via OpenVG (I think), but on Maemo 5, it can use OpenGL for this (but does not by default), so in the code where I create my QGraphicsView, I have to have this at the top:

#ifdef Q_WS_MAEMO_5
#   include <QGLWidget>
#endif

And then somewhere down that file where I create the QGraphicsView, this code goes there:

#ifdef Q_WS_MAEMO_5
    QGLWidget *glw = new QGLWidget(QGLFormat(QGL::DoubleBuffer));
    view->setViewport(glw);
#endif

It's not that difficult, and is already cross-platform (on platforms where OpenGL is available), but maybe QGraphicsView can be OpenGL-accelerated on Maemo 5 by default. Maybe there is some non-obvious side effect that using an OpenGL viewport has that I'm not aware of, and that's why one has to do it manually.

Accelerometer readings: This might actually be a bug in Qt Mobility. For my game, I have to read the accelerometer's Y axis on Symbian, and its X axis on Maemo to determine the rotation for the same holding position of the device, so there's another platform-specific #ifdef there. Again, this will hopefully be fixed in a future release of Qt Mobility, and will most likely be fixed for MeeGo as well.

Task switcher: It's customary on Maemo to have a task switcher button in the upper left corner. There's no platform-agnostic way of going to the task switcher, so I needed to special-case it for Maemo 5, and have not bothered implementing it on Symbian^3 (suggestions welcome!). First, I need to include D-Bus headers for this (I've already mentioned how to request the D-Bus module in the qmake project file above) :

#if defined(Q_WS_MAEMO_5)
#   include <QDBusConnection>
#   include <QDBusMessage>
#endif

When I'm in the handler code where I need to do the actual task switching, I can utilize it to activate Maemo 5's task switcher:

#if defined(Q_WS_MAEMO_5)
        QDBusConnection c = QDBusConnection::sessionBus();
        QDBusMessage m = QDBusMessage::createSignal("/", "com.nokia.hildon_desktop", "exit_app_view");
        c.send(m);
#endif

This is very much Maemo 5-specific, and will very likely not work on MeeGo Harmattan. Again, here it would be nice to have a cross-platform way of doing window management (in Qt or Qt Mobility?). I can imagine this being useful not only on handsets, but also on netbooks and tablets (from a MeeGo PoV). Again, trying to come up with pseudo-APIs here, QWindowManager::showTaskSwitcher(); could be a nice way to handle this in a cross-platform way, hiding platform-specific implementations. From what I've seen of MeeGo Touch, activating the task switcher there simply iconifies the window on the Desktop, so maybe if I would iconify my main window, it should activate the task switcher on Maemo 5 and Symbian. It does not work on Maemo 5 right now, though, and I haven't tested it on Symbian.

Screen resolution: This was (thanks to QGraphicsView) less of a problem than I thought it would be. Symbian^3 (or at least the N8) uses 640x360 as its resolution, and Maemo 5 uses 800x480. Maybe the MeeGo Harmattan device will use yet another resolution. I still configure my QGraphicsScene object manually via #ifdefs to get a good resolution, but the code could just measure the resolution and configure the scene as well. Here's what I use:

#if defined(Q_WS_MAEMO_5)
    setSceneRect(0, 0, 800, 480);
#elif defined(Q_OS_SYMBIAN)
    setSceneRect(0, 0, 640, 360);
#endif

I then use the sceneRect() of my scene to calculate a scale factor for all contents and call setScale() on all root items of the scene to scale the contents to the current screen size. You might have to take care of different aspect ratios on different devices, too - but it was unproblematic for my use case (the game) this time.

Optimizing Tennix for Maemo

As I promised some weeks ago, here are the results of our take on optimizing a SDL game (Tennix) for the Maemo devices. All other platforms on which Tennix runs obviously also profit from these optimizations. The presentation with all the details is available here: Optimizing an open source game for mobile devices (PDF). I also have two videos for you: Tennix running on a tablet before and after the optimizations.

Conclusions: Do profile (using oprofile or gprof) your applications to find bottlenecks. Look at callgraphs (using graphviz) to determine function usage. Most of the time, small code changes result in big performance boosts. Some Maemo-specific hints for SDL development are available in Game development in the Maemo Wiki.

The optimized release of Tennix (0.7.0) is available in Maemo Extras already. Go get it! :)