[Extension] Draw on animation playback

live draw banner

Live Draw - Download :link:

Live Draw an aseprite extension that allows you to draw on the canvas while animation playback is running.


Saw this open issue on github Draw on animation playback #1320 and its been few years and this feature is still not yet available.

My laziness, forced me to create this extension just to make this fire in under 5 minutes.

another flame2

Finally i was able to finish this project, also added few features for better controls


How to Use Live Draw

  1. Create a New File and add a few blank frames.
  2. Open Live Draw – Navigate to Edit > Live Draw in the top menu.
  3. Toggle “Start Looping” to begin playback looping.
  4. Toggle “Start Drawing” to activate drawing on the canvas.
  5. Unleash Your Creativity – Hover over the canvas and start drawing while the animation playback is running.

Note: Live Draw is compatible only with Aseprite version 1.3 and above.

Canvas Drawing Control: Due to an Aseprite limitation, mouse left-click can’t be used to draw while playback is running. Instead, use the dedicated Start Drawing button, which can be conveniently activated with a customizable hotkey (Edit > Keyboard Shortcuts).


Key Features of Live Draw

Playback Settings:

  • Playback Modes:
    • Forward – Plays from start to end (default).
    • Reverse – Rewinds from end to start.
    • Ping-Pong – Bounces between start and end for a seamless loop.

aseprite_Qbw9aNruJ5

  • Speed Options:
    • Slow, Normal (default), Fast, Faster, Fastest

aseprite_zfOsBGO050

  • Special Playback Features:
    • Loop within Tags – Plays animation within specific tags, ideal for focused edits.
    • Play Once Mode – Stops the animation once it reaches the last frame.
    • Rewind on Stop - When playback stops, the active frame resets to the initially selected frame
    • Extend End Frame – Adds new frames continuously after the final frame, perfect for extending animations smoothly.

aseprite_mtxKBybcqt

Brush Settings for Drawing Dynamics:

  • Brush Modes: Choose the behavior that fits your drawing style.
    • Static – Fixed brush size (default).
    • Grow – Gradually increases brush size depends on specified value and limited to specified range.
    • Shrink – Gradually decreases brush size depends on specified value and limited to specified range.
    • Ping-Pong – Brush size alternates between growing and shrinking.
    • Random (Range) – Brush size varies randomly within a specified range

aseprite_jCMnPeV9tP

Optional: Loop Grow/Shrink checkbox for Shrink and Grow allows looping of size changes.

aseprite_rvI3hBBkLr

Note : While Live Draw supports custom brushes, Brush Modes (Grow, Shrink, etc) and Angle Modes (Rotate, Random) do not yet apply to custom brushes. This functionality is planned for the future update!

  • Drawing Speed Options: Controls how fast it draw on the canvass
    • Slow, Normal (default), Fast, Faster, Fastest

aseprite_qAAJ5lakIn

  • Special Drawing Feature:
    • Limited Frames – Draw only on a specific number of frames, giving you precise control over which frames are affected.

aseprite_s2PvJVcYvm

Angle Settings:

  • Static – Fixed angle (default).
  • Rotate – Gradually rotates the brush angle based on a set angle value.
  • Random – Randomly changes the brush angle within a specified range.

aseprite_BoNh3gdI7B

Color Settings:

Add depth with smooth color transitions or randomized color changes. Check GIF below to see how color transitions.

  • Static – Default, single color.
  • Forward – Iterates through selected colors in sequence, first to last.
  • Reverse – Moves through colors from last to first.
  • Ping-Pong – Alternates colors back and forth.
  • Random – Randomly picks a color from the selected set.

Additional color controls:

  • Loop Colors – Available in Forward and Reverse modes for continuous cycling through the color list.

  • Color Repeat Count – Set how many times a color is used before switching to the next.

aseprite_2EeHRbNOm3

Advanced Merging Tool:

  • Progressive Merge Cels– Select multiple cels, click “Progressive Merge Cels” and watch as Live Draw progressively merges all selected cels.
    aseprite_vKItB9AZ2E

Download Live Draw on Itch.

1 Like