Extends Item
SpriteSheet
This element allows a single image containing a grid of images to be used as an animation.
This property sets in milliseconds how long it will take to loop through all the frames in the SpriteSheet.
Note: If the frame property is set then duration will be ignored.
SpriteSheet as ball{ source: "assets/ballSheet.jpg" framesWide: 5 frames: 21 duration: 1000 }
Instead of setting a duration each individual frame of a SpriteSheet can be selected by using the frame property.
Note: If the frame property is set then duration will be ignored.
SpriteSheet as ball{ property Int frameDriver: 0 source: "assets/ballSheet.jpg" framesWide: 5 frames: 21 frame: frameDriver } Animation.Sequential { loops: .Max running: true Animation.Tween { target: ball.frameDriver; from: 21; to: 0; duration: 1000; } Animation.Tween { target: ball.frameDriver; to: 21; duration: 1000 } }
These properties give the SpriteSheet the data it needs to correctly display and animate the source SpriteSheet image. The frames property should be set to the number of frames on the image. Then framesWide should be the number of columns in the image and framesHigh the number of rows.
Note: These properties must be set of the SpriteSheet will not animate.
SpriteSheet as ball{ source: "assets/ballSheet.jpg" frames: 21 framesWide: 5 framesHigh: 5 duration: 1000 }
The main elements of a user interface update at 60 frames per second. As SpriteSheets often have less the same image can be shown for several frames. This can leave the animation failing to look smooth. Setting interpolate to true will result in extra frames that are a mixture of images in the SpriteSheet being created. This can be enough to make some animations then look fully smooth.
Note: If there are very few frames and each differ by a large amount this option can cause image ghosting to occur.