← Back to Tutorials

How to Animate Pixel Art Online

Creating fluid pixel art animation requires testing. Constantly importing frames into an engine just to check the timing of an idle or run cycle can severely bottleneck your workflow. The Easy2DTools Sprite Animator is designed to solve this by providing a lightweight, in-browser animation previewer.

In this tutorial, we will show you how to upload your frames, adjust animation speed, utilize onion skinning for precision editing, and finally export your animation as a GIF.

Importing Your Frames

There are two primary ways to bring your frames into the Animator:

  1. From the Sprite Splitter: If you just used our Sprite Splitter tool to cut up a sprite sheet, you can click the "Send to Animator" button. This automatically transfers all selected frames into the Animator timeline without needing to save them to your desktop.
  2. Manual Upload: In the Animator view, click the "Add Frames" button. You can select multiple .png files from your computer. The tool will add them to the timeline in alphabetical or numerical order.

Managing the Timeline

Once your frames are loaded, they will appear in the timeline strip at the bottom of the tool.

  • Reordering: You can click and drag frames in the timeline to change their sequence. This is useful for creating "ping-pong" animations (where the animation plays forward, then backward) without duplicating files manually.
  • Deleting: Hover over any frame in the timeline and click the small 'x' icon to remove it from the animation sequence.
  • Duplicating: Some animations require a frame to hold longer than others. While you can adjust the global FPS, you can also duplicate a specific frame in the timeline to make it display twice as long.

Previewing and Adjusting Playback

The main canvas displays your animation looping in real-time. Use the controls to fine-tune it:

  • Play/Pause: Use the playback controls to stop the animation and inspect a specific frame.
  • FPS Control: Use the FPS (Frames Per Second) slider to speed up or slow down the animation. Pixel art typically looks best between 8 to 15 FPS, but smooth, high-frame-count animations may require 24 or 30 FPS.
  • Background Color: By default, the canvas is a dark checkerboard. You can change the background color to ensure your sprite's outline contrasts well against different environments.

Advanced Feature: Onion Skinning

Onion skinning is a technique used by animators to see multiple frames at once. It overlays semi-transparent versions of the previous and next frames over the current frame.

To use this feature:

  1. Toggle the "Onion Skin" switch in the control panel.
  2. You will notice ghostly silhouettes of the surrounding frames. This allows you to check the volume, arc, and spacing of your character's movement.
  3. If an arm seems to jump too far between frames, the onion skin will expose the gap, letting you know you need to redraw or adjust the in-between frames.

Exporting as GIF

Once you are happy with the preview, you can export the animation to share it online, on social media, or in your portfolio.

  • Click the "Export GIF" button.
  • The tool will compile the frames using the exact FPS you set. Note that this compilation happens entirely in your browser using a Web Worker, so larger animations may take a few seconds to process.
  • Once finished, the browser will prompt you to save the .gif file to your computer.

And that is it! You now have a smooth, shareable animation. Remember, all processing is done locally, making Easy2DTools a safe and private addition to your game development toolbelt.