Ship Creator — User Guide

Build symmetrical spaceship polygons by combining geometric shapes on a mirrored canvas. Access it from the playground page.

Quick Start

  1. Select a shape — switch to the Shapes tab and click one of the basic shapes (Triangle, Square, Pentagon, Hexagon, Star, or Rectangle). You'll be taken back to the Editor tab.
  2. Position it — move your mouse over the left half of the canvas. A dashed preview shows the shape and its mirror copy on the right.
  3. Place it — click to place. The shape appears on the left and is automatically mirrored to the right. Both halves are merged into a single ship polygon.
  4. Add more — select another shape and click near your existing ship. If the new shape overlaps, it merges in. If it doesn't, you'll get a warning.
  5. Export — use the Save / Load section to store your ship, or copy its polygon data for use in the arcade games.

Editor Tab

The main workspace. Canvas on the left, controls on the right.

Canvas

Element Description
Dashed centre line Mirror axis. Shapes placed on the left are mirrored to the right.
Grid (faint squares) 40px spacing to help align shapes.
Bottom labels "edit here →" (left half) and "← auto-mirror" (right half).
Zoom indicator Shown in the bottom-right corner when zoomed or panned.

Rotation

Control What it does
← / → buttons Rotate the selected shape by ±5°
0° / 45° / 90° / 180° snap buttons Snap to a precise angle
Shift + scroll (with shape selected) Rotate by ±5° using scroll wheel

Rotation resets to 0° whenever you pick a new shape from the palette.

Size

Drag the slider to scale the selected shape from 0.25× to 2.50×. This applies to the next shape you place — existing shapes on the canvas are not affected.

View (Zoom & Pan)

Gesture / Control What it does
Two-finger scroll (trackpad) or scroll wheel Pan the view
Pinch (trackpad) or Ctrl+scroll Zoom in/out toward the cursor
Right-click + drag Pan the view
Middle-click + drag Pan the view
− / + buttons Zoom in/out toward the canvas centre
⊡ button Reset zoom to 1× and centre the view

Actions

Button What it does
Undo Undo the last shape placement or paint stroke (infinite undo)
Clear Remove all shapes from the canvas (undoable)

Save / Load

Control What it does
Name field + Save button Save the current ship to your browser's local storage
Load button (next to a saved ship) Restore a saved ship onto the canvas (undoable)
× button (next to a saved ship) Delete the saved ship from storage

Saved ships also appear as reusable shapes in the Shapes tab under "Saved Ships", so you can use them as building blocks in new designs.

Shapes Tab

Two sections:

Basic

Six built-in geometric primitives. Click one to select it — you'll be taken back to the Editor tab ready to place it.

Saved Ships

Any ships you've saved appear here as additional shape options, letting you use your previous designs as components.

Painting

Hold down the left mouse button and drag across the left half of the canvas to place shapes continuously. This is useful for quickly building up organic forms. The paint step distance scales with the Size slider — smaller shapes place more densely.

Each paint stroke is a single undoable action (one undo removes all shapes placed during that stroke).

Placed Shape Behaviour

  • First shape: always allowed. Both the left and mirror copies become the starting ship.
  • Subsequent shapes: must overlap the existing ship. The preview turns green if the placement will succeed, or red if it won't.
  • Overlap near the centre: when a shape is placed near the mirror axis, the left and right copies overlap. They are merged into a single region with no internal seam.
  • Undo: each successful placement (or paint stroke) pushes a snapshot onto the undo stack. Undo restores the previous state.

Theme Integration

The canvas automatically adapts to your selected Bootswatch theme:

Element Source
Background --bs-body-bg
Grid lines --bs-border-color (faint)
Mirror axis --bs-border-color
Ship fill / stroke --bs-primary (accent colour)
Preview (valid) --bs-success (green)
Preview (invalid) --bs-danger (red)

Change themes via the theme dropdown in the navbar — the canvas updates immediately.

Keyboard Shortcuts

Shortcut What it does
Ctrl+Z Undo last placement / paint stroke
Shift + scroll Rotate selected shape (when a shape is selected)
Ctrl + scroll Zoom in/out

Tips

  • Start with a large shape (e.g. Pentagon at 1.5×) as the hull, then add smaller shapes for details.
  • Use the 0°/90° snap buttons for clean alignments.
  • Save frequently as you iterate — you can always load a previous version and keep building.
  • Saved ships appear as shapes — use them to create modular ship families with shared components.
  • The exported JSON polygon can be used directly in the arcade games' SHIP_POLYGON definition.