In this example, we will learn how to create sprite animation in QML.
qml.qrc
and click the Add | Add Files buttons. Select your sprite sheet image and save the resource file by pressing Ctrl + S.main.qml
:import QtQuick 2.3 import QtQuick.Window 2.2 Window { visible: true width: 420 height: 380 Rectangle { anchors.fill: parent color: "white" } }
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; } }
onClicked
event:MouseArea { anchors.fill: parent; onClicked: { if (sprite.paused) sprite.resume(); else sprite.pause(); } }
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; }
NumberAnimation { target: sprite; property: "x"; from: -128; to: 512; duration: 3000; loops: Animation.Infinite; running: true; }
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.
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.
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.
3.141.3.175