Qt 5 向けの新しい QML デモ

この記事は Qt Blog の "New QML demos for Qt 5" を翻訳したものです。
執筆: Alan Alpert, 2012年7月17日

ブリスベンの QML コアチームに、Qt 5 に向けて新しいメンバーが加わりました。やっとチームにデザイナーが加わったことで、QML を最もデザイナーにやさしい UI 言語にするという目標に近づくことができます。この記事ではチームで開発した最新のアプリやゲームのデモビデオを紹介したいと思います。ただ、ビデオで見せることがデモの一番の目的ではありません。これらのデモのソースコードが qt-project.org で BSD ライセンスで公開されています。新しいエキサイティングな機能の裏側にある実装を見て頂くために、ソースコードへのリンクも随所に入れていこうと思います。

まずは計算機アプリ Calqlatr の新しいデモをご覧ください。他のデモと同じようにデザインが一新されています。SameGame は最初はたった数百行のコードでしたが、こちらも本格的なアプリになってきました。新しい Particle エフェクトはさらに見栄えがよくなり、4つのゲームモードを選ぶことができます。プリセットレベルを読み込むモードも QML で書かれています。

QML のデモは実に簡単にカスタマイズして遊ぶことができます。SameGame はゲームモード毎に 新しいテーマを選ぶ ようになっているので、簡単に独自のデザインに変更することができます。Maroon in Trouble という新しいゲームも追加しました。グレートバリアリーフの素晴らしい自然にインスパイアされた、海をテーマにしたゲームです。このゲームも QML で 実装されたタワーを簡単にカスタマイズして、見た目やゲーム属性を変えることができます。

Maroon in Trouble のデモを見ると、QtQuick 2 の新しいビジュアルエフェクトを使っているのが分かるでしょう。泡 や 雲 を画面中に漂わせるのに Particle システムが使われています。また、新しい Sprite 要素によってキャラクターのアニメーションが簡単に実装できるようになりました。さらには QtMultimedia モジュールがインストールされていれば効果音が鳴ります。これは Qt 5 のモジュール化のおかげです。

新しいビジュアルエフェクトが使えるのはゲームだけではありません。Twitter 検索アプリ TweetSearch は一新されたシンプルなデザインに Sprite や Shader を使っています。中央のロゴはアニメーションすることによってメインスクリーンに動きを与えています。回転するバーは カスタマイズされた ShaderEffect を使って 3D 効果を実装しています(これは Qt3D でも実装できますが)。そして、よりなめらかに新しいデータを表示できるように Transition を使っています。

これらの新しいビジュアルエレメントを使っても目的とする美しい効果が得られない場合は、QtQuick 2 の Canvas エレメントを使ってより細かい描画処理をすることができます。これは特にグラフを描画する場合などに便利です。使い方は新しい 株式チャート表示アプリ StocQt をご覧ください。

QtQuick 2 がとてもよく仕上がってきていることを、QML コアチームは誇りに思っています。モジュール化の努力によって QtMultimedia のようなブリスベンのチームが主導しているモジュールが Qt に加わり、さらにその気持ちは強くなりました。私達のデモをきっかけに、他の開発者の皆さんがもっと素晴らしいゲームやアプリを作ってくれることを願っています。