SpriteBoy Studio
repository

SpriteBoy Studio

Cut frames. Build motion.

Move one spritesheet through slicing, composition, collision, and export.

bun install --frozen-lockfile --ignore-scripts
Run the studio
SpriteBoy Slice workspace with the forest scout sheet and eight staged results
Compose workspace with a region rendered on canvas
Collision workspace with the hitbox authoring surface
Export workspace with the eight committed outputs

Demo

One sheet. Four rooms.

The forest-scout walkthrough. Switch rooms on this page.

Detect and stage frames

Import the committed sheet, detect sprites, crop, and stage eight running frames.

bun run dev# Slice workspace# forest-scout-4x2.png

Place a region on canvas

Send one staged region into Compose. The canvas must stay non-empty after reload.

Write engine-ready output

Produce PNG, ZIP, GIF, and code export from the eight committed frames.

One project graph

Slice, compose, animate, export.

  1. Slice

    Detect, crop, clean, and stage source frames.

  2. Compose

    Arrange regions and assets on the compose canvas.

  3. Animate

    Sequence frames and inspect timing in context.

  4. Export

    Produce PNG, ZIP, GIF, and engine-ready data.

Screens

Real screens, not a mockup.

These photos come from the real app. Drag to see more, or open any screen in full view.

SpriteBoy Slice workspace with the forest scout sheet and eight staged results
Compose workspace with a region rendered on canvas
Collision workspace with the hitbox authoring surface
Export workspace with the eight committed outputs

Docs

Field guide, not a brochure.

Start with the product tour. Architecture and contribution notes live in the repository.

  1. Getting started Bun 1.3.14, frozen lockfile, then bun run dev at localhost:3000.
  2. Product tour Slice, Compose, Collision, and Export captures from the forest-scout fixture.
  3. Dual stack React 19 and Canvas 2D in Vite. Quality gates live in studio-quality.yml.

Start

Install with Bun.

bun install --frozen-lockfile --ignore-scripts

Then run bun run dev. Node 24+ is required alongside Bun 1.3.14.

Limits

Local project data.

  • Real walkthrough

    These screens come from the forest-scout walkthrough, not a marketing mockup.

  • English interface

    The studio ships an English UI. Do not invent extra locales here.

  • This page is a kit example

    Generated by gh-pages-template from examples/sprite-boy/site.yaml.

Local project data. Real browser gates. English interface.

Sponsor maintenance