The SpriteSheet Widget is a great way to add simple animated elements to your Composition.
To learn how to add a Widget to your Composition, click here.
What is a Sprite Sheet? Click here to learn more.
As seen above, select the "SpriteSheet" tab in the Property Panel to update this widget's following property types:
Url - Url of Sprite Sheet. This can be the URL of a Sprite Sheet that has been loaded into your Singular Dashboard or the URL of a Sprite Sheet that is being hosted anywhere else on the web. Try pasting the URL of this sample Sprite Sheet which is a 16x16 grid of globe images: https://s3.us-east-2.amazonaws.com/singular-assets/Global/Earth1024x1024_256Frames.png
X - How many columns exist in the Sprite Sheet
Y - How many rows exist in the Sprite Sheet
Object-Fit - How the Sprite Sheet fits within its Bounding Box. Options are Contain, Cover and Fill.
Sequence - Adjust how the Sprite Sheet is played back. Make sure you know the number of frames in your SpriteSheet. For example, since the above sample is 256 frames you could run the globe spin in reverse simply by adding in 256-1. Example sequence options:
- Run forwards = 1 - (# of frames)
- Run backwards = (# of frames) - 1
- Jump: 100-150
- Mix: 1-59, 34-59, 26-1, 59-34, 59-1
Speed - Speed in frames per second. Options are 60, 30, 20, 15 and 10.
Fewer images in a Sprite Sheet grid will require you to increase your frames per second (Speed) to make sure the animation plays smoothly. This example is an 8x8 grid with each individual Sprite image at 128x128 pixels for a total of 64 Sprite images: https://s3.us-east-2.amazonaws.com/singular-assets/Global/Earth1024x1024_64Frames.png. Try increasing your FPS to 30 fps with your X and Y values set to 8.
If you try setting the Speed to something lower the 30fps for the above example, the animation of the globe will no longer be smooth as there are not enough frames in the Sprite Sheet.