[Extension] Live Draw - Draw while animation is playing

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


:sparkles: Key Features of Live Draw

:paintbrush: Brush Options 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

brush mode2

Optional : Loop Grow/Shrink checkbox for Shrink and Grow, allows looping of size changes.
brush mode loop

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 canvas
    • Slow, Normal (default), Fast, Faster, Fastest, Rapid

brush speed

:film_frames: Playback Options and Speed:

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

playback mode

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

playback speed

  • Special Playback Features:
    • Play Once – Stops the animation once it reaches the last frame.
    • Play Subtags – Plays animation within specific tags, ideal for focused edits.
    • 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.
    • Limited Frames – Draw only on a specific number of frames, giving you precise control over which frames are affected.

playback features2

:triangular_ruler: 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

:white_large_square: Opacity Settings:

  • Static – Uses a fixed opacity value (default).
  • Increase – Gradually raises opacity based on a specified step value, limited by a max value.
  • Decrease – Gradually lowers opacity based on a specified step value, limited by a min value.
  • Ping-Pong – Opacity alternates between increasing and decreasing, bouncing between min and max values.
  • Random (Range) – Opacity varies randomly within a specified range.

brush opacity_small

This Settings appears when using a Custom Image Brush.
If Opacity Settings do not appear, try toggling the “Advance” checkbox off and on again

:rainbow_flag: 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.

brush color

:sparkles: Extras:

  • :link: Progressive Merge Cels – Select multiple cels or a layer, right-click on it, and choose “Merge Cels Progressively” to watch Live Draw blend them one by one in sequence.

merge cel


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. Click “Play Animation” button to play animation.
  4. Click “Start Drawing” button to activate drawing on the canvas.
  5. Unleash Your Creativity – Hover over the canvas and start drawing while the animation playback is running (No mouse clicking ).

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



Download Live Draw :link: on Itch.

2 Likes

Should atleast give credit to the tool you ripped off. Thanks.

Such a shame.

2 Likes

Hey Carbs, I understand where you’re coming from.

When I started Live Draw Few months ago, it was my first Aseprite extension. I was still learning how to approach layout design, so I studied existing tools, including yours, to understand how to structure things. In that process, I realize now that I mirrored more than I should have without giving credit.

That said, the goal and development of Live Draw have taken a different path, with its own features, behaviors, and direction. I’ve put a lot of effort into it, and it continues to evolve.

Still, I respect the importance of being transparent about influences, and I’ll be updating it to better reflect my own vision going forward.

2 Likes

brush opacity_small

An update to v1.5.0 was released.

Changes (v1.5):

  • [New] Opacity Settings: Introduced dynamic brush opacity modes — Static, Increase, Decrease, Ping-Pong, and Random.
    • This feature only appears when using a Custom Image Brush.
    • It automatically toggles visibility with Angle Settings depending on the brush type.
    • If Opacity Settings do not appear, try toggling the “Advance” checkbox off and on again
  • [Change] Dialog Layout: Refined UI spacing and alignment for a cleaner, more intuitive experience.
1 Like