MeoMotion Banner

(click here to return to home page)

MeoMotion_example


OVERVIEW

MeoMotion: a free 2D animator for creating smooth distortable game animations (Updated: May, 2023) by allowing use of bones and sprite parts to animate a character - also allowing vertices to be deformed (great for making parts bounce or stretch).

MeoMotion Editor has been tested on Windows 7, 10 and is now available on Linux (needs update).
Current runtime support:
MonoGame, XNA, DirectX11, SharpDX, SDL2, OpenGL
( runtimes can compile to run on Windows, Linux, Mac, Android, Gaming Consoles )
Runtimes are free to use commercially and can be modified as you please: MIT license

>> NEWEST MEOMOTION RUNTIME (MonoGame/XNA version) <<

(If you're using DX11/12, SDL2, OpenGL, etc, you just need to make a few little adjustments to the runtimes below by referring to the most updated cs files)

NEW: Version2 of MeoPlayer supports animated rectangle collision-detection and mixed animations (ie: walk while aiming)
MEOPLAYER2

MeoMotion in MonoGame

Any donations would help me cover bandwidth costs and would be greatly appreciated. With support I can spend more time enhancing the animator and add some additional features. (like IK, parametric blending, etc)


MeoMotion Runtime examples and source code can be found here:

ScreenShot_MeoMotion


VIDEO TUTORIALS

NEWER YOUTUBE TUTORIALS ARE NOW AVAILABLE IN PLATFORMER TUTORIALS (17-26)


Workflow

1) Create a character in your favorite graphics editor (preferably building your limbs and facial expressions in layers). If you did not build your character in layers, you can use selection tools and reconstruct it into layers and add a bit of paint under parts where the layers go under each other.

2) Either manually or by using File>>Scripts>>Export_Layers_To_Files, you then export the layers to a folder for your character.

3) You may use software like "SpriteSheetPacker" for packing all the layers onto a single sprite-sheet efficiently.
There is also now a built-in sprite sheet packer that works in a similar way. It will create a .PNG holding all the images and a .TXT which holds all the rectangle source information about where to find sprite pieces on the sheet.

4) Run MeoMotion and load the sprite sheet you created. MeoMotion will automatically try to load the sheet info .TXT file from the same folder as the spritesheet.

5) Add pivots (as instructed) - this is where you think the sprite pieces would rotate. Example: arm rotates at shoulder.

6) Drag pieces onto the canvas(left mouse) where you think they look best.
layer order               = UP and DOWN arrows on keyboard (or use shift UP or shift DOWN to send them to front or back)
middle-mouse wheel = rotate
right mouse              = scale (with shift for uniform scaling)
Make sure you're happy with their location and layer order before continuing. Note: it is possible to change layer order on the animation timeline if you wish.

7) Next click Edit Bones. NOTE: What you are really doing here is assigning parts to parents - so it is not like a regular bone system. The advantage of this, is you do not need to be precise in how you pick children, as the "bones"/indicators will automatically connect between their pivots. So these are not bones you are seeing, but just indicators showing parent-child associations - so don't worry if it looks strange. When you test it, you'll see it works. Delete key removes a child's parent connection. The root bone is typically started in the hips and is used for character placement in animation. You can restart all bones by hovering over the root piece and using the delete key.

8) Once you are happy with all parent-child associations, click animate. I suggest clicking the add [+] keyframe button at the first frame as a starting point. At any time if you scrub the timeline, any changes to the character pose are erased unless you clicked [+] add key button. It probably best to leave snap on and scrub the timeline after playing to make sure you editing the correct keyframe (as indicated on the left).
Here you can also open help which reminds you of how to reset pieces to original pose, and how to edit sprite distortions
click middle mouse button = Vertex Animation
HOLD left click over piece and the use -,+ to change ALPHA of a piece
Alt - P, Alt - R, Alt - S =
reset position, reset rotation, reset scale
Up and Down arrows = change layer order (with shift to send front or back)
Part Swap allows you to change an image on the timeline - like a hand pose for example
Speed = playback speed
Tools = right now this allows you to put an animation reference or background behind you character (with position, scale)
Edit keys: [+] add key, [-] remove key button, hold right_mouse on key to move it, hold shift + right_mouse to copy key
Loop (repeating or not)
Pick Parent, Add/Remove - This is not keyed behavior, it just offers a shortcut to associate parts and determine whether or not they are in the scene
Pick Part is very useful: in allowing you to pick a piece on the original spritemap to allow you to easily do animation editing on just that piece until you indicate you are done. This also means any editing you do with dragging or copying keys will only be applied to the isolated part.
Animation Name - to use this in a MonoGame (or XNA, SharpDX, DX11, OpenGL or other) project, I strongly suggest you provide a useful name for the animation. IE: idle, walk, run, jump, punch, open, duck, climb, etc.
Animation Number - Increment this by 1 when you wish to work on your next animation for this character. Note: Animations must start at 0 and be sequential.

9) Export - Exports a single character and all its animations to a file.
    Export(Add projects to 1 PNG and 1 TXT) -- this option allows you to add new character projects into an export file your created earlier. What this does is it creates another new PNG and adds "_combo.PNG" to the filename, placing all the sprites onto that new spritesheet. So if the original was "Meo.PNG", the new one would be: "Meo_combo.PNG" and the TXT file is simply appended with the new animation data for the new character.

10) Use MeoMotion.cs(or .cpp) and MeoPlayer.cs(or .cpp) (made in this tutorial [downloads are above]) to run and control the animation in your own project. If the animator becomes popular enough, I may develop more runtimes and more features, etc... - and of course if you follow the tutorial, you should see how to port it to your own framework.