OOPS.. Upgrade your Browser
G - Toggle guides
[ - Select previous layer
] - Select next layer
< - Move layer on top
> - Move layer below
Plus - Select next animation frame
Minus - Select previous animation frame
Arrow Keys - Nudge vertex/layer
Shift+Click - Delete Vertex
Alt+Click - Add Vertex to line
Pico8 Vector Editing Tool
This is an experimental tool to draw vector shapes to use in your
Manage animation frames
Plus on the top bar adds a
Trash icon on
Click on frame to switch to
Keyboard shortcut plus and minus change
with new page icon
with trash icon
order with up and down arrows
Shortcut to change
is chevron keys
Square bracket '[' and ']' keys select layer above and layer below.
Hovering the mouse makes a
Press escape to deselect all
making sure the mouse is not hovering
is selected, use the arrow keys to move it single pixels.
selected, the arrow keys move the entire layer.
Hold left shift to move 8 pixels, instead of 1
Hold left shift and clicking a
Hold left alt and clicking on a line adds a
can have 2 colours
Click on a colour on the left panel to choose the first colour and
Click the second colour to create alternating lines
You can press 'G' on the keyboard to toggle drawing guides
The area inside the square will fill a pico8 screen because it represents 128 by 128 pixels.
The entire canvas is 256 by 256 pixels
The demo cart listed allows scaling using the z and x buttons in pico8 to see the parts outside the guide square.
You can copy an image from the web or photoshop and paste it into the canvas providing the image is 256 by 256 pixels. your image can then be traced over.
Pasting frames of an animation allows something similar to rotoscoping
When you re load the page the pasted image is lost so keep a copy of it saved on your local computer
Files and data
You can download a copy of the array used by pressing the 'download' button.
You can import this json array with the import button
These buttons are light blue in the interface
Pressing the red save button will commit this data to local browser storage.
When you close the window and come back later this data will be re-loaded so you can continue where you left off.
Think of this like a 'quick save'.
Pressing the orange 'NEW' button will clear everything and start again.
Pressing the 'EXPORT' button produces data for you to paste into your pico8 cart to view the vectors.
Pico8 Test Cart
This first experimental release comes with a quick cart to display any vectors you make.
Copy the code from the supplied gist and paste it into your pico8.
When you run it you should find MC Hammer dancing away.
Near the top of the cart you will find a place to paste the vector code you can export from the 'EXPORT' button.
Run your cart and you should see any shapes or animations
Find it here
If you need some help using this tool then find me on twitter:
Please tweet me any cool stuff you make with this to
I would love to see this used in a game.
Zep for Pico8
Was made in
All hail Workflowy
Pico8 Code To Display Vectors