Files
stickman/docs/specs/speech_bubble_visuals.md
T

2.7 KiB

Speech Bubble Visual Geometry

Status: Implemented; awaiting editor verification (2026-09-30).

Balloon body and tail

Talk, Shout, and Whisper speech balloons use one generated, filled silhouette for the body and speaker tail. Draw its fill once and its closed outline once, so the body edge does not continue behind the tail and the tail has no visible seam. Compute the attachment where a ray from the frame center toward the speaker head meets the frame outline. The tail tapers to a point just outside the live head rim and follows the final displayed frame after placement, zoom, facing, and viewport fitting.

  • Talk: rounded rectangle with a gently curved tail. Keep the tail moderate in width and let its curve follow the direction toward the speaker.
  • Shout: jagged burst body with the same integrated tail silhouette. Make the tail a little narrower and add one small angular kink near its base to echo the burst. Keep the rest of the tail clean and tapered.
  • Whisper: lightly translucent, softly rounded body with its dashed inset detail and a smooth integrated tail.
  • Think: cloud frame with two descending thought dots; it has no pointed tail.
  • SFX: high-contrast banner with no tail.

The selected-bubble halo follows the same body-and-tail contour as the actual balloon. Frame-choice thumbnails continue to show frame shapes without a speaker tail. Generated geometry is deterministic and shared by the stage preview and playback; no external image asset is needed.

Text inset

Give every frame style more room between its text and the outline. Use a standard text inset of 24 px horizontally and 18 px vertically. Use a larger 30 px horizontal and 22 px vertical inset for Shout so burst points do not crowd the lettering. Use the selected per-word font and size when measuring the frame, then place and center the label inside the matching inset. Wrapping, frame sizing, selection markers, and preview must use the same measured layout.

Acceptance

  1. Talk, Shout, and Whisper each render as one filled body-and-tail silhouette with a continuous outer outline and no line visible across the tail root.
  2. A changing speaker position or bubble placement moves the tail attachment and tip while preserving the continuous contour and keeping the tip just outside the live head rim.
  3. Shout keeps its burst body and gains a slightly narrower tail with one small angular detail near the base.
  4. Think retains its dot connector; SFX remains tailless.
  5. All speech styles use the increased text inset; Shout uses its larger inset. Large per-word lettering remains centered and does not touch the frame.
  6. Selected-bubble outlines trace the same tail shape as the visible balloon. Preview and playback render matching deterministic geometry.