The Sprite Sheet component

This component is not supported for AMPHTML ads, video ads, or image ads.

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.

  

A sprite sheet with 8 sprites used to create an animation. Each sprite can also be displayed on its own, without being part of an animation.

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

You can trigger other actions based on the following Sprite Sheet component events:

Event	Description
Paused	Sent when the animation is paused.
Ended	Sent when the animation ends.
Play started	Sent when the animation starts to play.
Replayed	Sent when the animation restarts.

To select one of these events in the Event dialog, set the Sprite Sheet component as the target.

Actions performed by the Sprite Sheet component

The following Sprite Sheet component actions can be triggered in response to other events:

Action	Configuration options
Create new animation	X offset - The offset, in pixels, from the left side of the sprite sheet to the sprite. Y offset - The offset, in pixels, from the top 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. Frames - The number of frames that make up the animation. Duration - The duration of each frame, in milliseconds. Loops - The number of times that the animation repeats. Set to 0 to make the animation repeat continuously. Autoplay - When checked, the animation plays automatically. Reverse - When checked, the animation plays in reverse.
Play	Starts the animation from its current stopped or paused location.
Pause	Pauses the current animation.
Toggle animation	Toggles the animation between play and pause.
Replay	Starts the animation from the first frame.
Go backwards	Shows the previous frame in the series.
Go forwards	Shows the next frame in the series.
Go to frame	Shows the specified frame.

When you select one of these actions in the Event dialog, set the Sprite Sheet component as the receiver.

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.