Qt Graphical Effects プロジェクト

この記事は Qt Blog の "Qt Graphical Effects in Qt Labs" を翻訳したものです。
執筆: Sami Lehtonen, 2012年2月2日

はじめに

Qt Graphical Effects プロジェクトは Qt Quick 2.0 向けの特定のデザインに依存しないビジュアルエフェクトのセットを提供するために進められています。

現在は２０種類以上の QML のグラフィックエフェクト要素が利用可能です。このエフェクトにはブレンド、マスク、ぼかし、色付けをはじめ、様々なコードが含まれています。まだまだ改善や拡張の余地があり、アイデア、フィードバック、提案や、より具体的な貢献はどんなものでも大歓迎です！

エフェクトの一覧

エフェクトの使用方法

Qt Quick/QML の基本的な知識さえあればグラフィックエフェクト要素を使用することができます。開発者やコードを書けるデザイナであれば特に問題ないはずです。

任意の QML のアイテムがエフェクトのソースとして利用できます。以下のコードで画像に Drop Shadow のエフェクトを追加することができます。

import QtQuick 2.0

import QtGraphicalEffects 1.0
Item {

    width: 300

    height: 300
    Rectangle {

        id: background

        anchors.fill: parent

    }
    Image {

        id: butterfly

        source: "images/butterfly.png"

        sourceSize: Qt.size(parent.width, parent.height)

        smooth: true

        visible: false

    }
    DropShadow {

        anchors.fill: butterfly

        horizontalOffset: 3

        verticalOffset: 3

        radius: 8.0

        samples: 16

        color: "#80000000"

        source: butterfly

    }

}

つかってみよう

まずはじめに、http://qt-project.org/wiki/Building_Qt_5_from_Git を参考に Qt 5 のソースコードを取得し、ビルドします。

qtbase/bin がパスに含まれることと QTDIR が /qtbase に設定されていることに注意してください。

次に Qt Graphical Effects モジュールを取得し、ビルドします: https://qt.gitorious.org/qt-labs/qtgraphicaleffects

git clone git://gitorious.org/qt-labs/qtgraphicaleffects.git

cd qtgraphicaleffects

qmake

make install

doc/src/snippets フォルダにあるサンプルコードを実行することでエフェクトの動作の確認ができます。

qmlscene doc/src/snippets/DropShadow-example.qml

もしくは Testbed アプリケーションを起動します。

qmlscene tests/manual/testbed/testBed.qml

Testbed アプリケーションはエフェクトの効果や各プロパティの設定を視覚的に確認することができる便利なツールです。左側でエフェクトを選択し、右側でプロパティを調整します。結果は真ん中に表示され、リアルタイムに更新されます。

API とドキュメント

各エフェクトの API は QML のプロパティのセットです。エフェクトのプロパティは通常の QML のプロパティと同様にアニメーションさせることができます。ドキュメントにはプロパティの解説と基本的な使用方法のサンプルが記載されています。ドキュメントの生成は、qtgraphicaleffects プロジェクトのフォルダで以下のコマンドを実行します。

qmake

make docs

ブラウザで、生成された doc/html/qml-graphicaleffects-index.html を開いてドキュメントを参照してください。

実装の詳細

QML の ShaderEffect は Qt Quick 2.0 で提供される要素です。この強力な QML の要素により OpenGL のシェーダー言語(GLSL) と QML を組み合わせた、インパクトのある視覚効果を簡単に実装することができます。このプロジェクトの内部では、すべてのエフェクトが ShaderEffect 要素を使用して実装されています。すべてが QML と GLSL だけで実装されているため、C++ の API はありません。GLSL を知っている方であれば、これらのエフェクトの実装を学ぶことは難しくないでしょう。そして、これらの基本的なエフェクトを変更したり組み合わせることでカスタムエフェクトを作成することも可能です。