The Sprite Sheet component

You can use the Sprite Sheet component to create sprite animations, or to display individual image sprites separately while using only a single image source file.

  

To add the Sprite Sheet component to your project:

1. Open the Components panel, then the Graphics & Effects folder.
2. Drag the Sprite Sheet component to the stage.
3. In the Sprite Sheet properties section of the Properties panel, enter the sprite sheet image file URL in the Source field. If the source file is local, click the Browse button in the field to select the file from your computer file system.
4. Enter the X Offset, Y Offset, Frame width, and Frame height of the specific sprite you want to display. If you're creating an animation, this sprite will be shown in the first frame of the animation.
5. Depending on your use of the sprite sheet, follow the steps to display other sprites or to create a sprite animation.

   To display other sprites:

   1. Add an additional Sprite Sheet component.
   2. Configure the new component using the same source, but with the offsets and frame dimensions for the sprite you want to display in this component.

   To create a sprite animation:

   1. Expand the Advanced properties in the Properties panel for the Sprite Sheet component.
   2. Enter the Number of frames in your animation. The component displays one sprite per frame, and assumes that each sprite is the same size.
   3. Check the Autoplay box if you want the animation to start playing automatically. You can also trigger the animation by setting up an event with the Sprite Sheet > Play or Toggle animation action (described below).

Properties

Property	Description
Name	The component name.
Source	The URL for the image that's used as a sprite sheet. Can be bound to dynamic data.
X Offset	The offset, in pixels, from the left edge of the sprite sheet to the sprite.
Y Offset	The offset, in pixels, from the top edge of the sprite sheet to the sprite.
Frame width	The width, in pixels, of the sprite.
Frame height	The height, in pixels, of the sprite.
Alignment	The position of the sprite within the component: center bottom bottom left bottom right left right top top left top right
Scaling	How to display sprites that are a different size than the component: Resize image to fit Crop image to fill None Stretch image to fill

Advanced properties

Use the advanced properties to configure a sprite animation. Click the expand icon next to Advanced properties in the component properties pane to edit the following properties:

Property	Description
Number of Frames	The number of frames that make up the animation. If you enter a number that's higher than the number of sprites in your sprite sheet, your animation will include blank frames at the end.
Duration	The duration of each frame, in milliseconds.
Number of Loops	The number of times that the animation repeats. Set to 0 if you want the animation to continuously repeat.
Autoplay	When checked, the animation plays automatically.
End on frame one	When checked, the animation ends on the first frame after the final loop.
Reverse	When checked, the animation plays in reverse.

Events and actions

Events sent by the Sprite Sheet component Actions performed by the Sprite Sheet component

Learn how to configure events.

Preview

After you specify a source, offsets, and frame dimensions, Google Web Designer shows a static preview of the Sprite Sheet component on the stage so that you can make sure you've specified the sprite correctly.

Sprite animations can't be previewed inside the Web Designer interface. To see a sprite animation play, preview your document in your preferred browser by clicking the Preview button in the upper right corner.