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.
  

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 Miscellaneous 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.

Was this helpful?
How can we improve it?