To add the Sprite Sheet component to your project:
- Open the Components panel, then the Graphics & Effects folder.
- Drag the Sprite Sheet component to the stage.
- 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.
- 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.
- 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:
- Add an additional Sprite Sheet component.
- 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:
- Expand the Advanced properties in the Properties panel for the Sprite Sheet component.
- Enter the Number of frames in your animation. The component displays one sprite per frame, and assumes that each sprite is the same size.
- 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).
|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.|
The position of the sprite within the component:
How to display sprites that are a different size than the component:
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:
|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 actionsEvents sent by the Sprite Sheet component
You can trigger other actions based on the following Sprite Sheet component events:
|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.
The following Sprite Sheet component actions can be triggered in response to other events:
|Create new animation||
|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.
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.