Path Animator Script
A downloadable tool
This script is for Aseprite.
It allows you to make a translation movement and/or rotation of the reference image through a path with a the desired criteria.
The basic steps:
- make a Layer named: PATH
- active Pixel Perfect and draw some stroke on it (1 pixel thickness).
- Optional: paint one pixel stroke end to white (start pixel).
- draw some item in other layer.
- select both layers and run 'path_animator.lua'
- fill in the fields and press 'Animate it'
Gif minitutorials were included within the compressed file.
Please, this tool is under development, save your work before use it.
Issues and recommendation can be reported on gasparoken@gmail.com
Last update: 2022-02-06
-Added possibility to make custom rotations without a 'PATH' layer
2020-10-31
- Added scale support
2020-10-19
- Make 'animateIt' function a simple transaction to undo and redo in one step
Download
Click download now to get access to the following files:
Comments
Log in with itch.io to leave a comment.
Hello, I follow the tutorial and press the Animate it bottom, but it jump out a window of this
what is the problem?
This is the last detail on the script to select the original layers you selected before to run PathAnimator script. Could you share to gasparoken@gmail.com some screenshots of layer selection before to run PathAnimator and the settings you chose? I'll try to reproduce it.
How do I make something rotate in place?
Option 1: for constant angular speed rotation is better this script: https://gasparoken.itch.io/aseprite-rotation-script
Option 2: if you want a custom angular speed you can use this:
But with a PATH of 2 pixels (I tried 1 pixel but it doesn't work, maybe I'll fix it so 1 pixel can be placed too).
Option 3: you can use this approach too (the most difficult 😄):
The trick is to do a circular path with a dummy object to look at (can be a single pixel instead a coin like the previous animation 😊),
Remember: any PATH must have a beginning and an end. A circular path cannot be a closed circle (the script won't know where to start). So a circular path is made up of a simple black circle and you'll need to delete 1 pixel from it to generate the start and end. You can add a white pixel in some end to indicate the PATH start point
I hope this helps!
Hello, I'm a programmer, the artists of my team told me about 2 problems of the tool when trying calculate the path.
First is this one of pixel perfect paths not possible:
it can be easily solved by changing the order of the explorationVector components to this one:
explorationVector = {Point( 1, 0), Point( 0, 1), Point(-1, 0), Point( 0, -1), Point( 1, -1), Point( 1, 1), Point(-1, 1), Point(-1, -1) }
It is on the line 572. That way horizontal/vertical movements will have priority over diagonals.
Second thing is not actually a problem with your program but with aseprite (I think), it creates the same effect of the image not following the path but staying at a single point with weird movements. The problem is with transparent pixels with colors, like a pixel with 0 alpha but 255 of red component, I don't know why aseprite allows this pixels to be created or why the artists of the team created some of those, but the thing is that they are a problem, that some might not notice, and it can be solved easily by using the Magic Wand tool outside of the path line and clicking delete. It can also be identified by telling aseprite to draw an outline (with the convolution matrix- outline-transparent-layer).
Have a good day, Buena suerte!
Thank you for your feedback! I'll try to improve how the path is explored. And the second issue, I think I can filter those cases.
Have a nice day!
can you make a tutorial on the scale thing?
if it's used like scale: easy inout, start scale: 1(%), end scale: 50(%), it creates a lot of tabs, is it on purpose? It looks like it never ends
Hi Olbap. Each tab which is created, is closed automatically.
When using scale, large images, and long animations can take some time.
The distortion on small sprites can be considerable.
I hope this helps!
ok, thanks!
So i just downloaded and idk if this is a known issue that has a resolve but my animation is not smooth. its clunky at best. after trying out a smaller scale animation it seems to render the frames on opposite side of the loop and alternate frames instead of being smooth and gradual. is there a solution that i just cant seem to find? or is this an issue?
Hi ImNoki. There are a few things to do to get a correct animation:
1) There must be a single and unbroken stroke in the PATH layer.
2) The stroke must be made with a pixel perfect way.
3) The combination: path length, frame duration and animation duration should be chosen appropriately. Example of a bad choice: frame duration 0.1 seconds, animation duration: 0.5 seconds, path length 100 pixels (this animation will not be good, because it'll be very jittery, around 25 to 25 pixels ).
If the speed of the animated object is too fast, you will need to add image effects such as object shadows or decrease the frame duration.
If you couldn't solve the problem, send me the .aseprite file at gasparoken@gmail.com to analyze the layers.
I hope this helps!
HELP ! So I downloaded this and it works perfect however I have one question. I'm into side scrolling animation such as a car driving on the street w building going left to right so when I found this I was amazed. However, after using it I noticed I can't start a path off screen. Is there any way to fix this?? I need the images to start off the screen on the left ------> go all the way over, then go off screen on the right. Is that possible with this path animator?
Hi PatBanahan. The only way to do that (moving a sprite outside the canvas) is:
I hope this helps. And thank you for trying the Path Animator.
What does the RotAux layer do? You showed it in FAQ 7 but I don't think you explained what it does
Hi! RotAux is an auxiliary Layer, it stores pre-calculated rotated images (the image which walks the path). If you want to modify the PATH and re-animate with the same image layers, RotAux layer can be re-used, and execution time is optimised (because some angles were calculated and located in RotAux). In summary: RotAux is used to optimise execution time, can be deleted if you want. I hope this helps, and thanks for your question.
It is a masterpiece
Thanks!
Great addition to Aseprite! Thanks for sharing!
You're welcome!😄