Extends Item

SpriteSheet

This element allows a single image containing a grid of images to be used as an animation.

property Int duration

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
}

property Float frame

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 
    }
}

property Int frames

property Int framesWide

property Int framesHigh

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
}

property Bool interpolate

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.

property Url source

This property should be set to the url (path) that the source image resides at in the project.

SpriteSheet as ball{
    source: "assets/ballSheet.jpg"
    frames: 21
    framesWide: 5
    framesHigh: 5
    duration: 1000
}