.webp)
As the Qt 6.8 Beta 3 was released last week, it is a good time to start talking about what's new in the Qt 6.8 release. This blog post introduces one of those things, the new effect nodes available in Qt Quick Effect Maker. Also included is an example application using all of these effects.
Let's start by going briefly through all the new nodes:
Glow
This node creates a Glow effect, similar to the Glow in the Qt Graphical Effects. It uses the same BlurHelper node as other nodes which require blurring. There are different glowing modes and other properties to tweak the glow appearance at runtime.
MaskedBlur
Another customizable blurring effect that has been requested by users is the new MaskedBlur node. Compared to Qt Graphical Effects MaskedBlur, this one contains also an alternative mode where the blur amount can be adjusted with position and radius values instead of just the blur masking image. This makes it easier and more performant to animate the blurring.
SpriteAnimation
Talking about animations, there is also a new node called SpriteAnimation. This node allows effects that use a sprite sheet, similar to the Qt Quick AnimatedSprite element. Frame interpolation property gives smoother animations with some overhead due to the need for two texture lookups instead of just one. Frame calculations are mostly done on the vertex shader side for optimal performance.
Bars
The Bars effect node renders - surprise surprise - animated bars. Bars have customizable colors, widths, angles and animation speed. This effect node is similar to the one that was implemented in the live shader coding tutorial and I recommend checking this video if you are interested in creating your own custom shader effects using QQEM.
CircleBend
Last but not least, QQEM now also contains the CircleBend effect node. This node bends the source item into a circle/arc and is useful when implementing circular UI elements. As the bending is done in the vertex shader, altered pixel amounts can be reduced which is of course good for the performance.
Example usage
So what could be done with all this new effects power? To give some ideas, I decided to implement an example application that would utilize ALL the above effects. It looks like this:
The source code of the example is available at https://git.qt.io/kagronho/circlebarsui. I am not going to go through them here, but will explain the effects usage briefly. The background shows MaskedBlur animating the focused position. The gauge on the left uses the Bars effect to render the bars, which allows it to be fully scalable. The Glow effect is applied to the bars and CircleBend then to bend this bars+glow combination into the circular-shaped gauge. The hearts inside the gauge are animated using SpriteAnimation. Some of the effects are used as-is and some contain customizations and additions to match the UI needs. Simple and smooth as blueberry pie with ice cream. Yummy!
To visualize how customizable and performant this component is, the example also contains a view of 50 animating randomly themed circle bars. This view might look for example like this:
That's it! Now feel free to install the latest (beta) release of Qt 6.8, please report any issues found and test also these new QQEM effects.
