Qt 6.8 Beta 3 がリリースされました。このブログ記事では、その1つであるQtクイックエフェクトメーカーで利用できる新しいエフェクトノードを紹介します。これらのエフェクトを使用したサンプルも紹介していきます。
まずは、新しいノードを簡単に見てみよう:
このノードは、Qt Graphical Effectsの Glow に似た Glow エフェクトを作成します。ぼかしを必要とする他のノードと同じ BlurHelper ノードを使用します。実行時にグローの外観を微調整するために、さまざまなグローモードやその他のプロパティがあります。
ユーザーから要望の多かったもう一つのカスタマイズ可能なぼかし効果は、新しいノードのMaskedBlurノードです。Qt Graphical Effects の MaskedBlur と比較して、このノードには、ぼかしのマスキング画像だけでなく、位置と半径の値でぼかし量を調整できる代替モードも含まれています。これにより、ぼかしをアニメーション化するのがより簡単になり、パフォーマンスも向上しました。
アニメーションについて言えば、SpriteAnimationという新しいノードもあります。このノードでは、Qt Quick AnimatedSprite 要素に似た、スプライトシートを使用するエフェクトを使用できます。フレーム補間プロパティはスムーズなアニメーションを実現します、その半面テクスチャのルックアップが1回ではなく2回必要とします。このため若干のオーバーヘッドが発生します。フレーム計算は、最適なパフォーマンスを得るために、ほとんどが頂点シェーダ側で行われます。
Barsエフェクト・ノードは、なんと!アニメーション・バーをレンダリングします。バーは色、幅、角度、アニメーションスピードをカスタマイズできます。このエフェクトノードは、ライブシェーダーコーディングチュートリアルで実装されたものに似ています。QQEMを使って独自のカスタムシェーダーエフェクトを作成することに興味があるなら、このビデオをチェックすることをお勧めします。
最後に、QQEMにはCircleBendエフェクトノードも含まれるようになりました。このノードは、ソースアイテムを円形/円弧に曲げるもので、円形のUI要素を実装するときに便利です。曲げは頂点シェーダーで行われるため、変更されたピクセル量を減らすことができます。
この新しいエフェクトのパワーを使って何ができるだろうか?アイデアを出すために、上記のエフェクトをすべて利用するとこのようなアプリケーションのサンプルができます:
サンプルのソースコードはhttps://git.qt.io/kagronho/circlebarsui。ここでの解説はありませんが、エフェクトの使い方を簡単に説明します。
まずバックグラウンドでMaskedBlurがフォーカス位置をアニメーションしています。
左のゲージは、Barsエフェクトを使ってバーをレンダリングしています。Glowエフェクトがバーに適用され、CircleBendがこのバーとグローの組み合わせ作成します。これを円形のゲージにまでています。ゲージの中のハートはSpriteAnimationを使用しアニメーションさせます。いくつかのエフェクトはそのまま使用され、いくつかのエフェクトはUIのニーズに合わせてカスタマイズ、追加されています。
ブルーベリーパイとアイスクリームのようにシンプルでなめらか。おいしそうですね!
このコンポーネントがカスタマイズ可能でいかに高性能であるかを見ていただくために、こちらのサンプルを用意しました。ランダムにテーマ設定された50の円形バーがありアニメーションも含まれています:
今回は以上となります!Qt 6.8 の最新版(ベータ版)をインストールして、問題があれば報告していただけると幸いです。