Time for action – implementing simple character animation

Let's try to make the player character animated in a simple way. In materials that come with this book, you will find a number of images with different walking phases for Benjamin the Elephant. You can use them or you can draw or download some other images to be used in place of those provided by us.

Put all images in one directory (for example, images) and rename them so that they follow a pattern that contains the base animation name followed by a frame number, for example, walking_01, walking_02, walking_03, and so on.

Next, open the Player.qml document and replace the image element showing "elephant.png" with the following code:

Image {
  property int currentFrame: 1
  property int frameCount: 10
  source: "images/walking_"+currentFrame+".png"
  mirror: player.facingLeft

  anchors.bottom: parent.bottom
  anchors.horizontalCenter: parent.horizontalCenter
  Animation on currentFrame {
  ...