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:

Open the Componentspanel, then the Graphics & Effectsfolder.
Drag the Sprite Sheetcomponent to the stage.
In the Sprite Sheetproperties section of the Propertiespanel, enter the sprite sheet image file URL in the Sourcefield. If the source file is local, click the Browsebutton in the field to select the file from your computer file system.
Enter the X Offset, Y Offset, Frame width, and Frame heightof 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.
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 propertiesin the Propertiespanel for the Sprite Sheet component.
2. Enter the Number of framesin your animation. The component displays one sprite per frame, and assumes that each sprite is the same size.
3. Check the Autoplaybox if you want the animation to start playing automatically. You can also trigger the animation by setting up an event with the Sprite Sheet> Playor Toggle animationaction (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 iconnext to Advanced propertiesin 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 0if 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 Eventdialog, 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 Eventdialog, 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 Previewbutton in the upper right corner.

Was this helpful?

How can we improve it?

The Sprite Sheet component

To add the Sprite Sheet component to your project:

To display other sprites:

To create a sprite animation:

Properties

Advanced properties

Events and actions

Preview

Was this helpful?

Need more help?

Try these next steps: