Pico-8 animation editor

A Pico-8 animator editor I made for a project that never really got off the ground.

In particular it’s designed to help compress animations that have lots of repeated elements. E.g. In the example data in this cart the head layer is used across almost every animation, but only appears once in the exported spritesheet.

To this end it is very much optimised to favour saving space in the sprite sheet, and not optimised for CPU or RAM usage.

The version usable in browser here has some animations pre-loaded and you can play around, but you won’t be able to export any of them from this page. To do that you’ll have to download the cart and run it in your own copy of Pico-8.

Exporting

The editor defines characters, which have a set of animations, which have a number of frames, which each have a duration and ten layers to draw on. General usage is just to create animations, which can be exported via the “export” button. This will create four files:

• spritesheet.png - the exported sprite sheet to be used in your game
• metadata.p8l - lua table structure containing all the animation information needed to draw animations from the above spritesheet
• metasheet.png - the same information, but stored in a different format as image data so that the animation editor is able to re-import it
• debug.p8l - the exact data as in metasheet.png but in text format, just for debugging purposes

On startup the editor will import any data from metasheet.png and spritesheet.png back in so that you can continue editing where you left off.

Controls

• The window on the left is for drawing, the ten windows on the right are ten layers each frame can use.
• You can’t rearrange or add more layers but the C and V keys can be used to copy and paste the selected layer.
• You need to create at least one character, animation and frame and select a layer before you start editing.
• When entering names only English alphabet characters are accepted. Use enter to submit and / or \ to cancel. Backspace works as you would expect.
• Use the arrows keys to move layers around (no wrapping - going off the edge will just erase data).
• Use the WASD keys to move the origin point.
• Use - and + to navigate through characters quickly.
• Use [ and ] to navigate through animations quickly.
• Use ’ and \ to navigate through frames quickly.
• P/F toggles the paint or fill tool. Be warned there’s no undo button so be very careful with the fill tool.
• ‘oni’ toggles onion skinning.
• The ‘w’ next to it toggles wrapping for the onion skinning. When enabled and viewing the first frame in an animation, the onion skin layer will show the last frame from that animation.
• ‘orig’ toggles showing the origin point for the current frame.

Importing

When you have your animations finished you should import the spritesheet into your own cart and copy the contents of metadata.p8l into an initialisation function in your game. You will then obviously need some special draw functions to do something with that data. Here is an implementation I have done as an example. You can download the Pico-8 cart for it here.