Time for action – animating characters using sprites

Let's wait no further. The task at hand is to replace the manual animation from the previous exercise with a sprite-based animation.

Open the Player.qml document, remove the whole image element responsible for displaying the player character:

AnimatedSprite {
  id: sprite
  source: "images/walking.png"
  frameX: 560
  frameY: 0
  frameWidth: 80
  frameHeight: 52
  frameCount: 7
  frameRate: 10
  interpolate: true
  width: frameWidth
  height: frameHeight

  running: player.walking
  anchors.bottom: parent.bottom
  anchors.horizontalCenter: parent.horizontalCenter

  transform: Scale {
    origin.x: sprite.width/2
    xScale: player.facingLeft ? -1 : 1
  }
}

What just happened?

We have replaced the previous static image with an ever-changing source with a different item. As the Sprite parameter is not an Item element but rather a data definition of a sprite, we cannot use it in place of the Image element. Instead...