Sprite animation

In this example, we will learn how to create sprite animation in QML.

How to do it…

  1. First of all, we'll need to add our sprite sheet to Qt's resource system so that it can be used in the program. Open up qml.qrc and click the Add | Add Files buttons. Select your sprite sheet image and save the resource file by pressing Ctrl + S.
  2. After that, create a new empty window in main.qml:
    import QtQuick 2.3
import QtQuick.Window 2.2

Window {
  visible: true
  width: 420
  height: 380
  Rectangle {
    anchors.fill: parent
    color: "white"
  }
}
  3. Once you're done with that, we will start creating an AnimatedSprite object in QML:
    import QtQuick 2.3
import QtQuick.Window 2.2

Window {
  visible: true;
  width: 420;
  height: 380;
  Rectangle {
    anchors.fill: parent;
    color: "white";
  }

  AnimatedSprite {
    id: sprite;
    width: 128;
    height: 128;
    anchors.centerIn: parent;
    source: "qrc:///horse_1.png";
    frameCount: 11;
    frameWidth: 128;
    frameHeight: 128;
    frameRate: 25;
    loops: Animation.Infinite;
    running: true;
  }
}
  4. Add a mouse area to the window and check for the onClicked event:
    MouseArea {
  anchors.fill: parent;
  onClicked: {
    if (sprite.paused)
      sprite.resume();
    else
      sprite.pause();
  }
}
  5. If you compile and run the example program now, you will see a little pony running in the middle of the window. How fun!
    How to do it…
  6. Next, we want to try and do something cool. We will make the horse run across the window and loop infinitely while playing its running animation!

    First, we need to remove the anchors.centerIn: parent from QML and replace it with x and y values:

    AnimatedSprite {
  id: sprite;
  width: 128;
  height: 128;
  x: -128;
  y: parent.height / 2;
  source: "qrc:///horse_1.png";
  frameCount: 11;
  frameWidth: 128;
  frameHeight: 128;
  frameRate: 25;
  loops: Animation.Infinite;
  running: true;
}
  7. After that, add a number animation to the sprite object and set its properties like this:
    NumberAnimation {
  target: sprite;
  property: "x";
  from: -128;
  to: 512;
  duration: 3000;
  loops: Animation.Infinite;
  running: true;
}
  8. Compile and run the example program now and you will see the pony go crazy and start running across the window!

How it works...

In this recipe, we placed the animated sprite object in the middle of the window and set its image source to the sprite sheet that we had just added to the project resource.

Then, we counted how many frames there are in the sprite sheet that belong to the running animation, which in this case was 11 frames. We also told Qt about the dimension of each frame of the animation, which in this case was 128 x 128. After that, we set the frame rate to 25 to get a decent speed and then set it to loop infinitely. We then set the running value to true so that the animation will be played by default when the program starts running.

Then in Step 4, we wanted to be able to pause the animation and resume it by clicking on the window. We simply check whether the sprite is current paused when clicking on the mouse area. If the sprite animation has been paused, then resume the animation; otherwise, pause the animation.

In Step 6, we replaced anchors.centerIn with x and y values so that the animated sprite object is not anchored to the center of the window, which would have made it impossible to move around.

Then, we created a number animation within the animated sprite to animate its x property. We set the start value to somewhere outside the window on the left side, and set the end value to somewhere outside the window on the right side. After that, we set the duration to 3,000 milliseconds (3 seconds) and made it loop infinitely.

Lastly, we also set the running value to true so that it will play the animation by default when the program starts running.

There's more…

Sprite animation is used extensively, especially in game development. Sprites are used for character animation, particle animation, and even GUI animation. A sprite sheet consists of many images combined into one, which can then be chopped down and displayed on the screen one at a time. The transitions between different images (or sprites) from the sprite sheet creates the illusion of animation, which we usually refer to as sprite animation. Sprite animation can be easily achieved in QML using the AnimatedSprite type.

Note

In this example program, I'm using a free and open source image created by bluecarrot16 under the CC-BY 3.0 / GPL 3.0 / GPL 2.0 / OGA-BY 3.0 license. The image can be obtained legally at http://opengameart.org/content/lpc-horse.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.35.122