Forums

OverviewV-Play 1 Support › Change Sprite's "loop" property at runtime?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #6062

    Christian
    V-Play Team

    Hi,

    during development of our current game, we are using SpriteSequenceFromFile with embedded Sprites for animation of the player character.

    We have an animation that has to loop under a certain condition, and when the condition becomes false, the loop has to stop and another animation has to be started.

    We tried this using the “to” and the “loop” property of Sprite:

    “to” is set to the next animation.

    “loop” would be a conditional like this:

    loop: shouldLoop(player.state)

    When the state changes, the loop conditional is evaluated (property binding).

    But it doesn’t seem to work, it always only uses the first value the shouldLoop() returns (so it doesn’t change properly).

    We also tried setting loop manually to the desired boolean value like this:

    onRunningChanged: {
      if(running) {
        loop = shouldLoop(player.state);
      }
    }

    This gets called and the property is changed, but the behavior of the animation does not change (it either always loops or never loops, depending on the initial value).

    Is this a known problem? Is there something we can do about it?

     

    Cheers, Chrisu

    #6063

    Alex
    V-Play Team

    Hi Chrisu,

    can you explain me a little further how your animation is supposed to look? Or give me a code example?

    In our SpriteSheetTexturePackerExample we are changing the sprites with the jumpTo(…) function like this:

    SpriteSequenceFromFile {
      id: squabySprite
      filename: "img/squaby-sd.json"
      anchors.centerIn: parent
    
      Sprite {
        name: "walk"
        frameNames: ["squ1-walk-1.png", "squ1-walk-2.png", "squ1-walk-3.png", "squ1-walk-4.png"]
        frameRate: 20
      }
      Sprite {
        name: "jump"
        frameNames: ["squ1-jump-1.png", "squ1-jump-2.png", "squ1-jump-3.png", "squ1-jump-4.png"]
        to: "walk"
        frameRate: 10
      }
    }
    
    MouseArea {
      anchors.fill: squabySprite
      onClicked: {
        squabySprite.jumpTo("jump")
      }
    }

    So the squaby is walking until you click it, then it performs a jump and the to property switches back to walking after the jump was performed. Can you achieve your desired animation with this approach?

    Cheers,
    Alex

     

    #6071

    Christian
    V-Play Team

    Hi Alex,
    thanks for your answer.

    We want this behaviour:
    We have a “roll” animation for our character where he rolls on the floor.
    When the animation ends, we need to check, if he is able to stand up. If this is true, the “walking” animation should start. If it is false, the “roll” animation has to repeat/restart.

    That’s why we want to change the loop property depending on this condition.

    Cheers, Chrisu

    #6072

    Alex
    V-Play Team

    Hi again Chrisu,

    here’s what you can do, although it might seem a little dirty:

    SpriteSequenceFromFile {
      id: spriteSquence
      //...
    
      // the animation for walking
      Sprite {
        name: "walk"
        //...
      }
    
      // the animation for rolling
      Sprite {
        name: "roll1"
        loop: false
        //...
        onAnimationFinished: {
          scene.checkForStandingUp("roll2")
        }
      }
    
      // the same animation for rolling, just with different name. we will switch between both rolling animations while rolling
      // the reason we are doing is because the jumpTo(...) function only works if the new sprite is different from the previous one
      Sprite {
        name: "roll2"
        loop: false
        //...
        onAnimationFinished: {
          scene.checkForStandingUp("roll1")
        }
      }
    }

    and in your game scene or where ever you want to check if you can stand up:

    function checkForStandingUp(toggleSpriteName) {
          // here you can check whether you want to resume rolling or stand up
          if(allowedToStandUp) {
            squabySprite.jumpTo("walk")
          }
          else {
            squabySprite.jumpTo(toggleSpriteName)
          }
        }

    In a nutshell: We have to toggle the roll animations because a jumpTo(…) to the same animation as the current one is currently not supported. By default you are walking. You start rolling with jumpTo(“roll1”). When the animation finishes you check if you can stand up. If YES, jumpTo(“walk”), if NO you gotta keep on rolling, so you jumpTo(“roll2”). If that animation finishes as well, we will check again and either switch to “walk” or “roll1”.

    Does this work for you?

    Cheers,
    Alex

    #6076

    Christian
    V-Play Team

    Yep, it’s working!

    Thanks for the help, this is going to be awesome 😉

    PS: Here’s my solution:

    Part of the sprite sequence:

            RollingSprite {
                id: rolling
                name: "rolling"
                nextAnimName: canStandUp() ? rolling2.name : running.name
    
            }
    
              RollingSprite {
                id: rolling2
                name: "rolling2"
                nextAnimName: canStandUp() ? rolling.name : running.name
            }
    
    

    RollingSprite.qml

    Sprite {
        id: rolling
        property string nextAnimName
    
        frameNames: ["rolling02.png","rolling03.png","rolling04.png","rolling05.png","rolling06.png","rolling07.png","rolling08.png","rolling09.png","rolling10.png","rolling11.png","rolling12.png","rolling13.png","rolling14.png","rolling15.png","rolling16.png","rolling17.png"]
        frameRate: 20
        mirrorX: !player.walkDirection
        loop: false
    
        onAnimationFinished: {
            sequence.jumpTo(nextAnimName)
        }
    
    }
    

     

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

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support