Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

Forums

OverviewFelgo 2 Support (Qt 5) › Sprite sequence reverse

Tagged: ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #21576

    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

    #21601

    Günther
    Felgo 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

    #21614

    Phil

    great, thanks =]

Viewing 3 posts - 1 through 3 (of 3 total)

RSS feed for this thread

You must be logged in to reply to this topic.