Sprite animation
In this example, we will learn how to create sprite animation in QML.
How to do it…
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.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" } }
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; ...