[Phil]

Hello,

I noticed that the behaviour when reversing a sprite sequence isn’t as expected. I want to play a sprite forwards once. Then I want to reverse the animation back to the first frame. I’ve written a test programme using the example sprite below. I wanted the sprite to remain on the last frame but it doesn’t. Then the reverse animation isn’t smooth. Is this something possible using the Sprite component?

Example sprite:

https://s1.construct.net/images/v675/uploads/articleuploadobject/0/images/16567/num.fw.png

Main.qml:

import Felgo 3.0
import QtQuick 2.0

App {
    property bool spriteReverse

    SpriteSequence {
        anchors.centerIn: parent
        width: parent.width / 5
        height: width
        running: spriteTimer.running
        Sprite {
            frameCount: 5
            frameWidth: 80
            frameHeight: 80
            source: "../assets/numbers_spritesheet.png"
            frameRate: frameCount / (spriteTimer.interval / 1000)
            reverse: spriteReverse
        }
    }

    Timer {
        id: spriteTimer
        interval: 5000
        onTriggered: spriteReverse = !spriteReverse
    }

    AppButton {
        anchors.horizontalCenter: parent.horizontalCenter
        text: spriteReverse ? "count down" : "count up"
        onClicked: spriteTimer.start()
    }
}

Thanks,

Phil

[GüntherFelgo Team]

Hi Phil,

this is how you would create something like this with SpriteSequence. Please note that the import order (import Felgo 3.0 after import Qt Quick) is important, as both modules contain a SpriteSequence type, with a different implementation though.

With the Felgo Sprite type, you can add multiple states (Sprite items) for your animation and trigger them as needed, to e.g. count down or up as required (or stay at a certain position).

import QtQuick 2.0
import Felgo 3.0

App {
  property bool spriteReverse

  SpriteSequence {
    id: spriteSeq
    anchors.centerIn: parent
    width: parent.width / 5
    height: width
    defaultSource: "../assets/num_fw.png"

    Sprite {
      name: "start"
      frameCount: 1
      frameWidth: 80
      frameHeight: 80
      startFrameColumn: 1
      to: { "start": 1 }
    }

    Sprite {
      name: "countUp"
      frameCount: 5
      frameWidth: 80
      frameHeight: 80
      frameRate: 5
      to: { "end": 1 }
    }

    Sprite {
      name: "end"
      frameCount: 1
      frameWidth: 80
      frameHeight: 80
      startFrameColumn: 5
      to: { "end": 1 }
    }

    Sprite {
      name: "countDown"
      frameCount: 5
      frameWidth: 80
      frameHeight: 80
      frameRate: 5
      reverse: true
      to: { "start": 1 }
    }
  }

  AppButton {
    anchors.horizontalCenter: parent.horizontalCenter
    text: spriteReverse ? "count down" : "count up"
    onClicked: {
      if(spriteReverse)
        spriteSeq.jumpTo("countDown")
      else
        spriteSeq.jumpTo("countUp")
      spriteReverse = !spriteReverse
    }
  }
}

Best,
Günther

[Phil]

great, thanks =]