(Last Updated: November 10, 2017)

Sprite sheet animation is commonly used in games and storybooks. In this article, we’ll talk about what sprite sheet animation is and how to create it in Saola Animate. This powerful yet simple HTML5 animation tool will get things done with a few clicks of the mouse.

What is Sprite Sheet?

A sprite sheet consists of multiple frames, i.e. sprites, in one image. In other words, sprite sheets allow you to pack multiple sprites into a single picture. Using sprite sheet, you create sprite sheet animation representing one or several animation sequences while only loading a single file.

saola animate sprite sheet animation

Saola Animate lets you create sprite sheet animation easily from images. In order to do that, you must import images into your document first. Details about adding images to animation are available in the previous article. See Add Images to HTML5 Animation with Saola Animate.

Create Sprite Sheet Animation

Sprite sheet animation changes which frame/sprite is rendered in quick succession to give the illusion of movement. Perform the following steps to make sprite sheet animation:

Step 1: Select an image element either on the Canvas, in the Timeline, or the Elements pane.

Step 2: Go to the Properties pane > Image section. Then, click the Create Sprite Sheet button.

create sprite sheet animation

Step 3: The Define Sprite Tiles dialog box appears. Choose either of the two modes to define frames/sprites:

  • Default Sprite generates frames automatically. Use this mode when your sprite sheet has uniform sized frames.
  • Custom Sprite generates frames manually. Use this mode when your sprite sheet has non-uniform sized frames.

Default Sprite

In order to use the Default Sprite mode, ensure that the frames in the sprite sheet are of equal dimensions. In addition, the padding between them must be uniform.

create sprite sheet animation default sprite

The dialog box allows you to define both rows and columns for your sprite sheet animation. Do the following:

  • Specify the Number of Rows and Number of Columns. Then, in the preview window (1), each frame is outlined by a red rectangle.
  • Specify the trimming options, including Sprite Sheet Margins and Padding Between Sprites.
  • Specify the Animation Duration in milliseconds or at FPS. By default, animation plays at 24 FPS.
  • Click the Play Animation button (2) to preview animation in the preview window.
  • Click the Stop Animation button (3) to pause the preview.
  • Click OK to create frames.

Saola Animate makes sprite sheet animation by animating the image’s Background X and Background Y properties. The animation appears in the Timeline as below:

sprite sheet animation in timeline

Custom Sprite

create sprite sheet animation custom sprite

If the frames in the sprite sheet are of different sizes, use the Custom Sprite mode to manually define them. Do the following:

  • Click the Add Frame button (4) to add a frame. Immediately, a red frame rectangle (5) appears in the preview window.
  • To define the frame size, either drag and resize the frame rectangle in the preview window or specify the frame’s position (X, Y) and size (Width, Height) in boxes.
  • Specify the Animation Duration in milliseconds or at FPS. By default, animation plays at 24 FPS.
  • Click the Remove Frame button (6) to remove a selected frame.
  • Click the Play Animation button to preview animation in the preview window.
  • Click the Stop Animation button to pause the preview.
  • Click OK to create frames.

So you’ve learned the ways to create sprite sheet animation in Saola Animate. Try Saola Animate today to make stunning HTML5 animation and interactive content.

Join our mailing list to receive the latest news and updates from our team.

A confirmation email has been sent to your mailbox, please confirm your subscription!

Pin It on Pinterest