Log In  


This is a web based tool that has been put together to edit vector shapes for use in your pico8 creations. It works best in Chrome. If you find any bugs please let me know in twitter, otherwise, have fun!


Pico8 Vector Tool

- Features
  - Manage animation frames
    - Plus on the toolbar adds a frame
    - Trash icon on frame deletes
    - Click on frame to switch to frame 
    - Keyboard shortcut plus and minus change frames
  - Manage Layers
    - Add a layer with new page icon
    - Delete layer with trash icon
    - Change layer order with up and down arrows
    - Shortcut to change layers is chevron keys
    - Square bracket '[' and ']' keys select layer above and layer below.
  - Manage Vertexes
    - Hovering the mouse makes a vertex selected green
    - Non-selected vertexes are blue.
    - Press escape to deselect all vertexes making sure the mouse is not hovering
    - While a vertex is selected, use the arrow keys to move it single pixels.
    - With no vertex selected, the arrow keys move the entire layer.
    - Hold left shift to move 8 pixels, instead of 1
    - Hold left shift and clicking a vertex deletes it
    - Hold left alt and clicking on a line adds a vertex
  - Choosing Colours
    - Each layer 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
  - Guide Layer
    - 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
    - This tool keeps the data for the vectors stored in a javascript array
    - 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
  - Getting help
    - If you need some help using this tool then find me on twitter: https://twitter.com/gabrielcrowe
  - Examples
    - MC Hammer: https://twitter.com/gabrielcrowe/status/904421706659495936
    - Mario Face: https://twitter.com/gabrielcrowe/status/909476418463125509
      "Data-> https://gist.github.com/anonymous/1dc3f0bce219601c24e37dfac2e0d4c1"
    - Sonic: https://twitter.com/gabrielcrowe/status/901568795243925506
  - Your work
    - Please tweet me any cool stuff you make with this.
    - I would love to see this used in a game.
  - Thankyou
    - Zep for Pico8
    - You rock.
  - This list
    - Was made in https://workflowy.com/
    - All hail Workflowy
P#44281 2017-09-17 14:59 ( Edited 2017-09-18 11:53)

Nice tool, UI looks clean and well-polished.

However, I don't seem to be able to get the IMPORT to work?
Tried to copy/paste some examples from your Gist (and even from test EXPORT's), but nothing happens.
Initially, was using the inner "string" portion, e.g.


but also tried the importing the whole "export", e.g.

vectordata = strtovec("{{{0808{40205b112040202040202040}}}}")

...but nothing happens.

I'm sure it's "user error", it always is! ;o)

P#44302 2017-09-18 01:10 ( Edited 2017-09-18 05:10)

Oh I think I forgot to mention this completely. I am sorry.

When you export, LUA comes out. The import requires json.

Import things with square brackets.

To see what I mean draw some shapes and press download. Start a new document, Open the file and paste its contents into the import.

P#44304 2017-09-18 03:14 ( Edited 2017-09-18 07:16)

Gotcha! Works fine now, thanks :D

P#44309 2017-09-18 07:53 ( Edited 2017-09-18 11:53)

can't load it, 403 forbidden. Looks cool...

P#66121 2019-07-26 18:24

Hello, this website http://hotmessgames.com/poly/ seems to be down?

P#80882 2020-08-17 14:13

for anyone who wants to access this Vector Editing Tool's website...
here it is: Pico8 Vector Editing Tool

P#80939 2020-08-18 23:41 ( Edited 2020-08-18 23:42)
P#81279 2020-08-28 03:50

[Please log in to post a comment]