1

OOPS.. Upgrade your Browser

Layers

  • layers 1

Keys:

  • 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 Help

This is an experimental tool to draw vector shapes to use in your #pico8 games.

  • Manage animation frames
    • Plus on the top bar 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
    • Find it here (new window)
  • Getting help
  • Examples
  • Your work
    • Please tweet me any cool stuff you make with this to @gabrielcrowe
    • I would love to see this used in a game.
  • Thankyou
    • Zep for Pico8
    • You rock.
  • This list

Pico8 Code To Display Vectors