This covers everything you need to know to make and use MotionSprite animations in your projects.
This will be covered in sections:
- Editor
- Basics
- Syntax
- Renderer
- Implementation
- Importing animation files
- Properties
- Instanced rendering
- Applying effects
Or use this extension https://theshovel.rocks/MotionSprite/loader/loader.js
Load it unsandboxed!
The editor can be used from here if you don't want to host your own
The editor is made out of a viewport, 4 pannels and a bar.
On the top left you have the part list. There you can add, remove, re-order and assign textures to parts of your
animation. On the bottom left you have the property inspector. Once you click a
part's name, you can view and edit its properties. Click on the pen icon on any of
them to start editing them. We will talk more about this in the "Syntax" section of this
page.
On the top right you have the texture list. There you can add, remove and replace
textures. On the bottom right you have the variable controls. There you can mess
around with the dynamic variables explained in the "Syntax" section.
At the top of the viewport you can see a bar. It has 2 buttons that lead to different
submenus. The "File" submenu lets you Open, Save and exit the current file you are editing.
The "Anim" submenu contains an animation manager. You can use the animation manager
to create, delete, edit and rename animations from the current file. The top bar
also shows you the current file and selected animation.
This is what you'll have to use to animate your parts. Inside the property of a part you can type mathematical
functions. These will result into a value that the property will take every frame the animation is rendered.
Everything under the JavaScript Math function will work. Here is a list of all the functions you can use:
abs, acos, acosh, asin, asinh, atan, atanh, atan2, ceil, cbrt, expm1, clz32, cos, cosh, exp, floor, fround, hypot, imul, log, log1p, log2, log10, max, min, pow, random, round, sign, sin, sinh, sqrt, tan, tanh, trunc
There are special variables that you can use in your animations to make them more dynamic.
- time: It gets the current timer of the animation. It starts when the animation is loaded.
- ai: Short for "animation intensity", is a value that can be used to change the intensity of your current animation.
- xvel: Can be used to change the animation based on movement.
- yvel: Can be used to change the animation based on movement.
- x: X position where the animation will be rendered.
- y: Y position where the animation will be rendered.
- direction: The rotation that the animation will be rendered in.
- file: The name of the runtime variable that stores the animation. (look at the "Importing animation files" section)
- anim: The name of the animation from the file that will be rendered.
- size: Size that the animation will be rendered in.
- id: Unqiue number that you set to an animated component.
- flip: What direction the animation is flipped in. 1 is normal and -1 is flipped.
The way you set them is by setting a runtime variable with the variable name followed by the id, like this
ai1 or xvel1 and so on. (Remember that they all should be lowercase)
Making something move back and forth cos(time*5)*25 where 5 is the speed and 25 is the distance. This is between
-25 and 25.
simplescreenrecorder-2024-10-28_18.10.50.mp4
If you want it between 0 and 25 you can do abs(cos(time*5)*25).
simplescreenrecorder-2024-10-28_18.12.08.mp4
You can clamp a value between 2 numbers by doing min(max(100, 25), 50) where 25 is the minimum value, and 50 is the
maximum value, while 100 is the value beling clamped. You get the idea. It's just the JavaScript Math object.
Here is an example of how the velocity variables work.
simplescreenrecorder-2024-10-29_18.08.23.mp4
You can load everything required using this extension: https://theshovel.rocks/MotionSprite/loader/loader.js
LOAD IT UNSANDBOXED. Check the box when loading the URL!!!
Keep in mind that this was made for Pen projects. Your project must already be a Pen based project for this to work!
You can drag the custom block into any other sprite you are using. (you will probably want to move it into the sprite
that renders everything in your game)
After you do that, you can just place the custom block anywhere in your code! It works just like stamping a costume, but
instead you are stamping a whole animated element!
To import an animation, you must first decide how you will store your animations.
If you want to store them in your project, you will have to load the file into a Scratch variable. You can do this by copy
pasting the contents of your animation file into the value of a variable (via the variables tab) or you can do something with
the files extension as shown bellow:
But... if you want to load it externally (from a server or local file in Electron build) you will have to fetch it. There
is an example bellow:
Keep in mind that that no matter how you store your animation, it must then be set into a runtime variable. You will use the name
of that runtime variable in the animation's file input (mentioned in the properties section), like in the examples above.
This is done for performance reasons. If you would input the animation directly into the input, that data would have to be
parsed to the block every frame.
The custom block has a couple of inputs. Here is what all of them do:
You can apply any effect that works on a Pen+ square stamp, to an animation. All you have to do it set the effect before rendering
the animation. Bellow is an example of tinting an animation:
If you want to render the same animation multiple times quickly in different positions on the screen, you can use the same id
for all of them. This will not load them as different animations and save a lot of memory usage.
You can use this to make stuff like drop shadows as shown bellow:
