How to use sprites in qml to do the animations we need

In the game the design of the animation is very important. In QML, it provides a rich animation, but sometimes we need to change the image, just like a movie. In today's article, we'll design an animation that can change the image. We can do this through the function of the sprite provided by QT.

For the sake of design convenience, we first design our own bear animation, the image size of this animation is: 2048x256. It's just a 8-figure 256x256.

In our sprite design, we want to display each image sequentially in the order shown above, thus creating an animated effect that can be continuously changed.

Directly bearsprite our animation design files:

Bearsprite.qml

Import QtQuick 2.0Item {width:256 height:256 spritesequence {id:fishsprite anchors.fill:pare NT Interpolate:false goalsprite: "" "Sprite {name:" First "Source:"./gfx/bear            2.png "framewidth:256 frameheight:256 framecount:1 frameduration:800            framedurationvariation:400 to: {"Second": 1}} Sprite {name: "Second" Source: "./gfx/bear2.png" Framecount:1 framex:256 framewidth:256 Fram        eheight:256 frameduration:800 framedurationvariation:400 to: {"Third": 1}} Sprite {name: "Third" Source: "./gfx/bear2.png" Framecount:1 FrameX: 256*2 framewidth:256 frameheight:256 frameduration:800 Framedurationvariati On:400 to: { "Fourth": 1}} Sprite {name: "Fourth" Source: "./gfx/bear2.png" Frameco            Unt:1 framex:256*3 framewidth:256 frameheight:256 frameduration:800            framedurationvariation:400 to: {"Fifth": 1}} Sprite {name: "Fifth" Source: "./gfx/bear2.png" Framecount:1 framex:256*4 framewidth:256 Fram        eheight:256 frameduration:800 framedurationvariation:400 to: {"Sixth": 1}} Sprite {name: "Sixth" Source: "./gfx/bear2.png" Framecount:1 FrameX: 256*5 framewidth:256 frameheight:256 frameduration:800 Framedurationvariati on:400 to: {"Seventh": 1}} Sprite {name: "Seventh" Source: "./gfx/bea R2.png "FrameCount:1 framex:256*6 framewidth:256 frameheight:256 frameduration:800            framedurationvariation:400 to: {"eighth": 1}} Sprite {name: "eighth"            Source: "./gfx/bear2.png" Framecount:1 framex:256*7 framewidth:256        frameheight:256 frameduration:800 framedurationvariation:400 to: {"First": 1} } Sprite {//workaround:this prevents the triggering of a rendering error which is currently under investigation            . Name: "Dummy" Source: "./gfx/bear2.png" Framecount:8 framewidth:256 Framehei ght:256 framex:0 frameduration:200}}}

In the above design, we used a spritesequence, which put some of the sprite we need.

        Sprite {            Name: "Sixth"            Source: "./gfx/bear2.png"            framecount:1            framex:256*5            framewidth:256            frameheight:256            frameduration:800            framedurationvariation:400 to            : {"Seventh": 1}        }

The design of each sprite here is almost the same. Each sprite has its own name. Pay attention to FrameX here. It is actually the x-coordinate position of the graph shown above us. 256X5, for example, represents a drop of 5 images. In addition, our frameheight and framewidth are the same size as the original, although in the actual display this size can be set in MAIN.QML.

Using the same method, we can do a fishsprite.

Fishsprite.qml

Import QtQuick 2.0import qtmultimedia 5.0Item {width:64 height:64 property real Hp:3 SoundEffect { Id:spawnsound Source: "./audio/catch.wav" Loops:SoundEffect.Infinite} soundeffect {Id:kille Dsound Source: "./audio/catch-action.wav"} spritesequence {Id:fishsprite Anchors.fill:paren T interpolate:false goalsprite: "" "Sprite {name:" Left "Source:"./gfx/mob-id            Le.png "framewidth:64 frameheight:64 framecount:1 frameduration:800            framedurationvariation:400 to: {"front": 1}} Sprite {name: "front" Source: "./gfx/mob-idle.png" Framecount:1 framex:64 framewidth:64 Frameh        Eight:64 frameduration:800 framedurationvariation:400 to: {' Left ': 1, ' Right ': 1} } Sprite {            Name: "Right" Source: "./gfx/mob-idle.png" Framecount:1 framex:128            framewidth:64 frameheight:64 frameduration:800 framedurationvariation:400 To: {' Front ': 1}} Sprite {//workaround:this prevents the triggering of a rendering error which is C            urrently under investigation. Name: "Dummy" Source: "./gfx/melee-idle.png" Framecount:8 framewidth:64 Fram eheight:64 framex:0 frameduration:200} numberanimation on x {ID:FISHS Wim Running:false property bool GoingLeft:fishSprite.currentSprite = = "Right" to:going Left?    -360:360 duration:300} component.oncompleted: {Spawnsound.play ()}} spritesequence {id:bubble width:64 height:64 scale:0.4 + (0.2 * HP) Interpolate:false goalsprite: "" Behavior on scale {numberanimation {duration:150 ;            Easing.type:Easing.OutBack}} Sprite {name: "Big" Source: "./gfx/catch.png" Framecount:1 to: {"burst": 0}} Sprite {name: "Burst" Source: "./g  Fx/catch-action.png "Framecount:3 framex:64 frameduration:200} Sprite {            Workaround:this prevents the triggering of a rendering error which is currently under investigation. Name: "Dummy" Source: "./gfx/melee-idle.png" Framecount:8 framewidth:64 Fram eheight:64 framex:0 frameduration:200} sequentialanimation on width {l Oops:Animation.Infinite numberanimation {from:width * 1; to:width * 1.1; duration:800; easing.type:Easing . Inoutquad} Numberanimation {from:width * 1.1; To:width * 1; duration:1000; Easing.type:Easing.InOutQuad}} Sequential Animation on height {loops:Animation.Infinite numberanimation {from:height * 1; To:height * 1.1 5; duration:1200; Easing.type:Easing.InOutQuad} numberanimation {from:height * 1.15; To:height * 1; duration:1000; easing.t Ype:Easing.InOutQuad}}}}

Main.qml

Import QtQuick 2.0import ubuntu.components 1.1/*! \brief MainView with a Label and Button Elements.*/mainview {//ObjectName for functional testing purposes (autopilot- QT5) ObjectName: "MainView"//note!     ApplicationName needs to match the "name" field of the click Manifest ApplicationName: "Sprite.liu-xiao-guo"/* The enables the application to change orientation when the device is rotated.    The default is False.    *///automaticorientation:true//Removes the old toolbar and enables new features of the new header. Usedeprecatedtoolbar:false Width:units.gu (Height:units.gu) Page {id:page title:i18n.tr        ("Sprite")  Column {anchors.fill:parent Fishsprite {height:units.gu (width):                Units.gu (+)} bearsprite {id:bear height:units.gu (30) Width:units.gu (Numberan)Imation on x {to:page.width duration:8*800 onrunningchanged: {                        if (running = = False) {bear.x = 0 start () }                    }                }            }        }    }}

Run our QML application:



Source of the project in: Git clone https://gitcafe.com/ubuntu/sprite.git

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

How to use sprites in qml to do the animations we need