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 ...

Get Game Programming Using Qt now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.