C

Qt Quick Ultralite traveo_t2g_effects の例

Infineon のTRAVEO T2GにおけるカスタムGraphical Effectsの実演です。

概要

このtraveo_t2g_effects のサンプルでは、Infineon のTRAVEO T2G上で、ペイント済みアイテムAPIを使用してカスタムGraphical Effectsを実現する方法を示しています。

注：この サンプルは、Infineon TRAVEO T2G プラットフォームでのみサポートされています。

Traveo T2Gのエフェクト例。4つのカスタムGraphical Effects（ニードルトレイル、ガウスぼかし、彩度低下、不透明度マスク）を並べて表示しています。

このサンプルでは、左から右の順に以下のエフェクトを実演しています：

ニードルトレイル
ガウスぼかし
彩度低下
不透明度マスク

プロジェクトの構成

このプロジェクトは、サンプルコード本体と、エフェクトモジュールのソースコードを含むサブディレクトリで構成されています。カスタムエフェクトを使用するには、モジュールのソースコードをアプリケーションのディレクトリにコピーしてください。

エフェクトモジュールを組み込むには、メインの QmlProject ファイルに、対応するモジュールを次のように追加します：

        ModuleFiles {
                files: [
                        "traveo_t2g_effects_speed_module.qmlproject",
                        "effects/traveo_t2g_effects_module.qmlproject"
                ]
        }

これにより、以下のインポートを追加することで、QMLソースにエフェクトモジュールを組み込むことができます：

import TviiEffects 1.0

ニードル・トレイル効果

ニードル・トレイル・エフェクトの使用方法は以下の通りです：

NeedleTrail {
    anchors.centerIn: parent
    width: 300
    height: 300
    mask: "images/needle-mask.png"
    rotation: root.angle
}

ガウスぼかしエフェクト

ガウスぼかしエフェクトの使用方法は以下の通りです：

GaussianBlur {
    anchors.verticalCenter: parent.verticalCenter
    width: 128
    height: 128
    source: "images/juno.png"
    blur: 2.5 * t
}

彩度低下

彩度を下げるエフェクトの使い方は以下の通りです：

Desaturation {
    anchors.verticalCenter: parent.verticalCenter
    width: 128
    height: 128
    source: "images/ak.png"
    saturation: 1 - t
}

不透明度マスク

不透明度マスクの使い方は以下の通りです：

Image {
    source: "images/cover.jpg"
}

ImageWithOpacityMask {
    source: "images/cover.jpg"
    mask: "images/opacity-mask.png"
    transform: [
        Scale {
            yScale: -1
        },
        Translate {
            y: 128
        }
    ]
}

この例では、不透明度マスクを使用して、画像の垂直反転した反射を作り出し、徐々にフェードアウトさせています。

画像アセットの要件

カスタムエフェクトを適用するため、以下の画像アセット固有の最適化は無効化されています。

qulrcc によって実行される画像分割の最適化。
needle-normal.png でのモノクロからアルファへの最適化（ARGB32 形式を維持するため）。

さらに、VRAMが不足するのを防ぐため、一部の画像ではキャッシュが無効になっています。

例では、次のように実装されています：

        ImageFiles {
                files: [
                        "images/needle-mask.png",
                        "images/ak.png",
                        "images/juno.png",
                        "images/cover.jpg",
                        "images/opacity-mask.png"
                ]
                MCU.Experimental.resourceSplitImageOptimization: false
                MCU.resourceCachePolicy: "NoCaching"
        }
        ImageFiles {
                files: [
                        "images/gauge-gauge-frame.png",
                ]
                MCU.resourceCachePolicy: "NoCaching"
        }

ファイル：

画像：

特定のQtライセンスの下で利用可能です。
詳細はこちら。