Optimizing Animations

Hoyt

I am developing an application that includes a large number of animations. The animations are currently sequences of png files. As shown below, I am using NumberAnimation to sequence the png files at a 30 hz frame rate.

    Image
    {
        id: preludeAnimation

        x: 0
        y: 0
        property int startImage: 304
        visible: true

        source: "../Resources/PNGs/Renderings/"+preludeAnimationDirectory.intValue+"/1-"+startImage+".png"

        NumberAnimation on startImage
        {
            id:preludeNumberAnimation1

            from: 304
            to:  480
            duration: 6000
        }

Unfortunately, the animations result in dropped frames on my target platform, which is an X86 based 800Mhz AMD process, with 4GB RAM.

Is there a more efficient, i.e., faster, way to generate the animations using QML?

Thank you in advance.

Hoyt

johngod

Hi
I was developing a game were I had dynamic objects with initial animation when created. If those object were created with the main loop running, the animation were very very slow, else with the main loop stopped, animations were good. I had to do animations with a timer, it worked very well. So do try to use a timer to sequence your images to see if your can get better performance.

vladstelmahovsky

try to use Sprite Animation instead with atlas sprite

Lorenz

Hi,

You should have a look at V-Play. It will help you enhance the performance and at the same time reduce the lines of code you'll have to write.

V-Play offers different ways to add animations with high performance to both Apps and Games. You can directly integrate the animations offered by V-Play into any existing Qt application.

Animations with TexturePacker
- Heavily reduce storage and memory consumption, therefore speed up your app or game.
- Use this for animations that consist of a sequence of images (Sprites)
- Check out the Tutorial
Skeleton-Animations with Spine
- Flexible way for adding advanced animations
- Use this if you have a model ("Skeleton") that defines your animation, as explained here
- Check out the Tutorial

Code example with Texture Packer Animation:

     TexturePackerAnimatedSpriteVPlay {
       id: nailgunSprite
       source: "../assets/img/squaby.json"
       frameNames: ["nailgun.png"]
       x: 100
       y: 100
     }

Code Example with Spine Animation:

     Goblins { // note this is the name of the animation
       id: goblin
       skins.state: "GOBLIN" //initial skin
       x: scene.width / 2
       y: scene.height / 2
     }

Best,
Lorenz