Ship Creator — User Guide

Build symmetrical spaceship polygons by combining geometric shapes on a mirrored canvas, then paint your designs with procedural passes. Access it at /playground/ship-creator.

Quick Start

  1. Select a brush — switch to the Brushes tab and click a shape.
  2. Position it — move your mouse over the left half of the Editor 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 mirrored to the right. Both halves are merged.
  4. Add more — select another shape and click near your existing ship. Overlapping shapes merge; non-overlapping ones are rejected.
  5. Paint — switch to the Paint tab, choose a colour and brush, and paint on the dedicated canvas.
  6. Save — switch to the Ships tab, enter a name, and click Save.

Editor Tab

Build your ship polygon here. Canvas on the left, sidebar on the right.

Canvas

Element Description
Dashed centre line Mirror axis at x=400. Shapes placed on the left are mirrored to the right.
40px grid Alignment aid.
Bottom labels "edit here →" (left half) and "← auto-mirror" (right half).
Zoom indicator Shown bottom-right when zoomed/panned.

Rotation

Control Behaviour
← / → buttons ±5°
0° / 45° / 90° / 180° snap Snap to angle
Shift + scroll Rotate selected shape
Scrolling without a shape selected Pans the view

Size

Scale the next placed shape from 0.25× to 2.50×.

View (Zoom & Pan)

Gesture Behaviour
Two-finger scroll / scroll wheel Pan
Pinch / Ctrl+scroll Zoom toward cursor
Right-click + drag Pan
Middle-click + drag Pan
− / + / ⊡ buttons Zoom out / in / reset

Actions

Button Behaviour
Undo Undo last placement or paint stroke (infinite)
Clear Remove all shapes and paint (undoable)
✂ Cut Brush Click to enter cut mode, drag a rectangle to cut a shape from your ship. The cut shape becomes a new brush in the Brushes tab. Click again or press Escape to cancel.

Brushes Tab

Three sections:

Brushes

8 built-in primitives: Triangle, Square, Pentagon, Hexagon, Star, Rectangle, Diamond, Circle. Click one to select it — you'll be taken back to whichever workspace tab (Editor or Paint) was last active.

Saved Ships

Ships saved via the Ships tab appear here as reusable shapes. Click one to use it as a building block in a new design.

Custom Brushes

Brushes cut from your ship using ✂ Cut Brush in the Editor. Each has a small × button to delete it.

Paint Tab

Dedicated paint canvas (auto-sized to your ship) with full zoom/pan support. Three-column layout: canvas | controls | palette.

Brush Settings sub-tab

Control Behaviour
Brush Size Stamp scale (0.25×–2.50×)
Brush Rotation ±5° buttons, 0/45/90/180 snap, Shift+scroll
Opacity Stamp transparency (0.05–1.0). Per-stamp variation creates a natural spray effect.
Paint / Erase Toggle between adding colour and removing stamps within 30px of the cursor

Procedural Tools sub-tab

Select a pass from the dropdown, adjust its parameters, then click Apply Pass. Each pass adds stamps to the current paint job. Parameters persist per pass.

Pass What it does
Random Hull panels (large light rectangles) + panel lines (thin dark strips)
Shadow Edge gradient — dark near edges blending to ship fill colour toward the interior
Stripes Long thin rectangles spanning the ship (horizontal or vertical)
Bulkheads Thicker structural bands mixed light/dark
Borders Thin rectangles along polygon edges
Scratches Very thin, slightly rotated (±15°) sparse marks
Rivets Tiny square dots
Decals Small high-contrast coloured stamps near the centre

Palette column (always visible)

Section Controls
Colour 6-wide swatch grid from active palette + custom colour picker
Palette Selector dropdown, Save current, Delete, Import (.hex / .txt), Export
Ship Fill Solid colour fill for the whole ship polygon (↺ resets to theme default)
Ship Outline Stroke colour picker + stroke width slider (0.5–6px)

Undo / Clear

Always-accessible buttons above the sub-tabs.

Ships Tab

Save Current Ship

Enter a name and click Save. The ship (polygon + paint mask + metadata) is zipped and sent to the server. Stamps are flattened to a PNG mask.

My Ships

List of ships saved by your device token. Load restores the polygon and paint mask to the canvas. × deletes the ship from the server.

Max 50 ships per token.

Placed Shape Behaviour

  • First shape: always allowed. Left + mirror become the starting ship.
  • Subsequent shapes: must overlap the existing ship. Green preview = valid, red = rejected.
  • Overlap near centre: shapes overlapping the mirror axis are merged with no seam.
  • Undo: each placement and paint stroke pushes a snapshot.

Keyboard Shortcuts

Shortcut What it does
Ctrl+Z Undo
Escape Deselect shape / hide brush cursor / cancel cut mode
Shift + scroll Rotate selected shape / brush
Ctrl + scroll Zoom

Palette Management

Import

Accepts .hex files (one #RRGGBB per line) and Paint.NET .txt files (semicolons = comments). Imported palettes are saved to your browser's localStorage.

Export

Downloads the active palette as a Paint.NET-compatible .txt file.

Built-in palettes

13 Lospec 8-colour palettes (ammo-8, bastille-8, berry-nebula, borkfest, chocomilk-8, dreamscape8, funkyfuture-8, gothic-bit, justparchment8, nyx8, pollen8, rust-gold-8, slso8) are served from the server and automatically added to your palette list.

Theme Integration

The canvas adapts to your Bootswatch theme. Change themes via the theme dropdown in the navbar — the canvas updates as soon as the theme CSS finishes loading.

Tips

  • Start with a large shape (Pentagon at 1.5×) as the hull, then add smaller shapes.
  • Use 0°/90° snap for clean alignments.
  • Run Random Paint first for hull panels, then Shadow for edge depth, then Rivets or Stripes for detail.
  • Each procedural pass is undoable individually via Undo.
  • Cut interesting sections of your ship as custom brushes to reuse as components.
  • Save frequently — server storage is per-token, not per-account.