Saturday, December 31, 2011

Games for the Next Billion

Catchy title right? Don't worry, content partly matches to that description... ;)

It seems that I quite often include videos in my blog posts. There is no reason to stray away from that habit now, so here's a video showing a beta version of "Smoke the Bugs!" game on N950 & N8:



By looking at the graphics, effects, dynamic lights etc. what you saw was a pretty average OpenGL (ES 2.0) game, right? Well yes and no... Yes, GLSL shaders have been used for the effects. But no, there is zero lines of OpenGL and in fact also zero lines of C/C++ in the game. It's all QML + GLSL + JavaScript.

To work on current Harmattan & Symbian devices, game uses Qt 4.7 with the shaders plugin. This is an okay-ish platform, as you see from the video: N8@680MHz runs at smooth ~60fps. But I have also smelled, tasted and floated in the sweet velvet of Qt5 and can tell you as a fact that it will be much better. With Qt5 & QtQuick 2.0, applications will get a healthy boost of performance, smoothness and possibility for even better effects.

Here is a short list of improvements QtQuick-based games will gain from Qt5:
- Performance: QML Scene Graph will render everything faster than Qt4 QGraphicsView-based renderer, especially when the amount and complexity of (animated) items rises.
- Performance2: New V8 JavaScript engine performs much better than the JavaScriptCore engine in Qt4. Also thanks to this integration work, there is deeper co-operation between QML and JavaScript.
- Smoothness: Qt5 moves rendering into a separate thread which makes UI feel much smoother.
- Effects: QtQuick 2.0 supports shader effects to make QML UI's much more dynamic. Using shaders with Qt4 is possible with the shader plugin as shown above, but Qt5 native support will be more complete.
- Particles: QtQuick 1.0 contains particles plugin but it's very basic when compared to QtQuick 2.0 particles. No game can survive without particles!
- QML features: There are additions in QML which will suit games very well like SpriteImage for sprite animations and PathAnimation & PathInterpolator to animate along a custom path instead of linear path.
- QtCreator: Had to mention this one still as the work done in QtCreator Qt5 integration, QML debugger & analyzer etc. will improve the developer (that's me) productivity.

Now look at the video again to see what the old 2011 QML looked like, add all the above improvements to it and use your imagination... For me it feels like Qt5 & QtQuick 2.0 can offer a great platform not just for applications but also for games. Billion or two, I don't really care... ;) Happy New Year 2012 Everyone!

Friday, October 28, 2011

5inarow @ N9

Hey! Qt Developer Days '11 are over and I want to thank all organizers & attendees, what a great event again!!

For fresh owners of N9 (congratulations!), I'll say that 5inarow game is now available through Nokia Store. Here's how to get beaten by medium level:



Symbian version may follow later, but for now game is only available on N9/N950. It's free and contains no ads so if you feel like it, go grab it from here.

PS. If this tickles your "How to implement a Qt game like that?" or "I could do much better than that!" -nerves, source codes and Qt Quick Game Programming tutorial are still available from here. These are for the older N900 version, without e.g. sounds and computer AI. But an idea of updating the document for Qt5 & shader effects is floating in my mind, we'll see, we'll see...

Sunday, August 21, 2011

Qt5 + Distance Field Effects

Yoann Lopes blogged recently about Text Rendering in the QML Scene Graph using distance field alpha testing. This technique brings smoothly scalable fonts with fast OpenGL rendering to Qt5.

Distance field is of course not limited for just fonts (although they are the most usual use-case), same technique can be used also with suitable images. Here is a video of an example application running on PC and N950 which demonstrates the effect:



As you can see, the original image becomes quite pixelated when zooming in, which is expected as image is only 256x160 pixels (smiley 64x64 pixels). But enabling smoothing with distance field shader makes it very scalable with nice anti-aliasing, outline and transparency. As the pixmap required for this is so small, GPU / fragment shader has less to process leading to better performance. Like with fonts, adding effects such as outline, smoothing, glow and shadow can be implemented very effectively.

This application is under 300 lines of QML with a GLSL shader, including slider and toggle button components. So if you have Qt5 built up and want to give it a try, source codes are available from here. Creative usage ideas and astonishing shaders are welcomed!

Monday, June 13, 2011

Qt Contributors' Summit



I will be mostly interested in discussions about Qt5 graphics stack, qml-box2d, QtQuick 2.0 and of course QML Scene Graph. So whenever something related to these is going on, please grab me in!

Friday, May 6, 2011

QML Metaballs

Kimi, the man with excellent genes, blogged few days ago in here about QML extension plugin that provides shader effects for QGraphicsView based Qt Quick 1.x. What makes this magnificent, is the fact that API matches to what QML Scene Graph (at least currently) has, making it a perfect solution to start experimenting with the future. Also, as it is a separate plugin sitting on top of standard Qt 4.7.x, it turns "Qt everywhere" to "shaders everywhere" right now while waiting for the full Scene Graph glory.

All you need is 1) Qt 4.7 installed in suitable environment (Linux, Windows, Symbian etc.) 2) the qml1-shadersplugin and 3) imagination for writing QML & GLSL.

What I came up with using the plugin is something they call metaballs:



Source codes are available in here, go wild! And kudos to Nokia/Qt team for providing this plugin!

Monday, February 21, 2011

Superior technology

I decided not to blog anything right after Nokia & Microsoft deal was published. And I'm glad about that, because I have now reached the state where I'm actually excited again! Volker Hilsheimer made a very good summary about the situation from Qt perspective.

Instead of going deep into politics and sales speeches, I decided to approach this from a technical perspective. Keeping things simple and concrete, here's one example UI implemented in few hours with Qt Quick & QML Scene Graph:



Please spend a bit time looking at what is really happening in there: wave, colorize, fading, water, text highlight... This is ~300 lines of QML + GLSL, performing smoothly on good ol' N900 hardware. Same can not be done using WP7 Silverlight & XAML, period.

Qt is still the best platform for "mobile phones" and we have also here good ingredients for the "future disruption" like Nokia management has outlined. But technology is nothing without a community (a.k.a. "ecosystem"), so question is that are we going to continue the work and do it? While you think about that, I'll continue hacking with my superior technology! =)

Sunday, January 16, 2011

QML Scene Graph demo

Here is a small demo of QML animations combined with OpenGL shader effects, running on QML Scene Graph:



At first, everything is gray and plain. But once you enable QUIt mode, the whole world feels a lot more colorful and dynamic. Some call this feeling velvet, I call it.. exciting 2011!