SpriteSheet Widget

Follow

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.