Skip to content

Commit 1279196

Browse files
author
DavidQ
committed
BUILD_PR_SPRITE_EDITOR_FROM_SCRATCH: add new isolated tools/Sprite Editor with pixel drawing, frames, onion skin, PNG/JSON I/O, sprite-sheet export, animation preview, and tools hub link
1 parent 5d2e9ec commit 1279196

14 files changed

Lines changed: 1902 additions & 233 deletions

CODEX_COMMANDS.md

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
Toolbox Aid
2+
David Quesenberry
3+
04/03/2026
4+
CODEX_COMMANDS.md
5+
6+
MODEL: GPT-5.4-codex
7+
REASONING: high
8+
9+
COMMAND:
10+
Create BUILD_PR_SPRITE_EDITOR_FROM_SCRATCH.
11+
12+
Hard requirements:
13+
1. Assume there is NO usable sprite editor in the repo.
14+
2. DO NOT review, assess, refactor, migrate, or depend on any existing sprite editor implementation.
15+
3. DO NOT delete, rename, overwrite, or clean up any current sprite-editor-related files or folders, even if they appear broken, old, duplicate, or unused.
16+
4. Build a NEW sprite editor from scratch as an isolated tool under:
17+
tools/Sprite Editor/
18+
5. Keep the PR small and surgical, focused only on the new tool and its supporting docs.
19+
6. Follow repo rules:
20+
- PLAN_PR -> BUILD_PR -> APPLY_PR
21+
- docs-first
22+
- one PR per purpose
23+
- no destructive changes
24+
- update docs with the change
25+
7. All NEW files must include the required file header standard at the top, using the file creation date.
26+
8. Preserve current repo structure and public/internal boundaries.
27+
28+
Deliverables to create:
29+
- docs/pr/BUILD_PR_SPRITE_EDITOR_FROM_SCRATCH.md
30+
- CODEX_COMMANDS.md
31+
- docs/dev/reports/change_summary.txt
32+
- docs/dev/reports/validation_checklist.txt
33+
- docs/dev/reports/file_tree.txt
34+
35+
Implementation target:
36+
Build a brand-new browser-based Sprite Editor tool that can stand alone and be opened from the repo tools area.
37+
38+
Minimum feature set:
39+
- Create new sprite canvas
40+
- Grid on/off
41+
- Configurable canvas width/height in pixels
42+
- Configurable pixel size / zoom
43+
- Pencil tool
44+
- Eraser tool
45+
- Fill tool
46+
- Color palette with active color selection
47+
- Recent color swatches
48+
- Frame support for basic animation:
49+
- add frame
50+
- duplicate frame
51+
- delete frame
52+
- next/previous frame
53+
- Onion-skin preview toggle
54+
- Import PNG into a frame
55+
- Export PNG for current frame
56+
- Export sprite sheet for all frames
57+
- Save/load editor project as JSON
58+
- Transparent background support
59+
- Mouse-friendly editing with visible selected tool/state
60+
- Simple preview panel for animation playback with FPS control
61+
62+
Integration constraints:
63+
- Add a link for the new tool in tools/index.html
64+
- Do not modify engine code unless absolutely required; prefer zero engine changes
65+
- Do not change unrelated tools
66+
- Do not touch samples unless needed for a tiny non-destructive launch link or docs reference
67+
- No deletion of existing assets, tools, or folders
68+
69+
Build guidance:
70+
- Use plain HTML/CSS/JavaScript consistent with repo conventions
71+
- Keep code readable and modular
72+
- Prefer local utility modules within tools/Sprite Editor/
73+
- No external dependencies unless already standard for the repo
74+
- Favor simple data contracts so future Tile Map Editor / Parallax Editor integration is possible
75+
76+
Validation:
77+
- Tool opens directly in browser
78+
- Can draw pixels and erase
79+
- Can add multiple frames
80+
- Can save JSON and reload it
81+
- Can import PNG and export PNG
82+
- Can export a sprite sheet
83+
- Tool link appears in tools/index.html
84+
- Existing repo content remains untouched
85+
86+
Packaging:
87+
Produce a repo-structured delta ZIP at:
88+
<project folder>/tmp/BUILD_PR_SPRITE_EDITOR_FROM_SCRATCH_delta.zip
89+
90+
Include only files relevant to this PR in the ZIP.
91+
Do not include unrelated files, dependencies, or full-repo copies.
92+
93+
At completion also provide:
94+
- commit comment
95+
- next command
Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,33 @@
11
Toolbox Aid
22
David Quesenberry
3-
03/31/2026
3+
04/03/2026
44
change_summary.txt
55

66
BUILD_PR target:
7-
Implement Demo 1208 as a tool-formatted tiles + SVG parallax integration demo and fix the broken Demo 1207 index target.
7+
Build a brand-new, isolated Sprite Editor from scratch under tools/Sprite Editor/ and expose it through tools/index.html.
88

9-
Expected changed area:
10-
- samples/Phase 12 - Demo Games/Demo 1208 - Tool Formatted Tiles Parallax/**
11-
- samples/index.html
12-
- Demo 1207 files only if strictly required for the link fix
9+
Scope executed:
10+
- New tool implementation only: tools/Sprite Editor/**
11+
- Tool hub integration link only: tools/index.html
12+
- Required docs/report deliverables for this PR bundle
1313

14-
Blocked scope:
15-
- engine changes
16-
- tool rewrites
17-
- tests/games changes
18-
- non-Phase-12 refactors
19-
- new gameplay systems
14+
Feature outcome summary:
15+
- New project canvas (width/height)
16+
- Zoom/pixel-size controls + grid toggle
17+
- Pencil, eraser, and flood fill tools
18+
- Active palette + recent color swatches
19+
- Frame timeline operations (add/duplicate/delete/prev/next)
20+
- Onion-skin overlay toggle
21+
- PNG import into current frame
22+
- PNG export for current frame
23+
- Sprite sheet export across all frames
24+
- JSON save/load project round-trip
25+
- Transparent pixel handling
26+
- Animation preview with FPS controls
27+
28+
Guardrails honored:
29+
- No dependency on existing SpriteEditor implementations
30+
- No deletion/rename/cleanup of existing sprite-editor-related paths
31+
- No engine code changes
32+
- No unrelated tool changes
33+
- Small, surgical PR surface

docs/dev/reports/file_tree.txt

Lines changed: 21 additions & 202 deletions
Original file line numberDiff line numberDiff line change
@@ -1,202 +1,21 @@
1-
samples/
2-
index.html
3-
Phase 01 - Core Engine (0101-0124)/
4-
sample0101-basic-loop/
5-
sample0102-keyboard-move/
6-
sample0103-mouse-input/
7-
sample0104-gamepad-input/
8-
sample0105-scene-switch/
9-
sample0106-input-mapping/
10-
sample0107-entity-movement/
11-
sample0108-render-adapter/
12-
sample0109-collision/
13-
sample0110-collision-response/
14-
sample0111-multiple-solids/
15-
sample0112-axis-separated-collision/
16-
sample0113-tile-collision/
17-
sample0114-collision-debug-tools/
18-
sample0115-ecs-foundation/
19-
sample0116-ecs-movement-system/
20-
sample0117-ecs-input-system/
21-
sample0118-ecs-collision-system/
22-
sample0119-ecs-render-system/
23-
sample0120-ecs-scene-world/
24-
sample0121-ui-overlay/
25-
sample0122-entity-lifecycle/
26-
sample0123-debug-stats/
27-
sample0124-data-driven-world/
28-
Phase 02 - World + Visual (0201-0224)/
29-
sample0201-camera-follow/
30-
sample0202-camera-bounds/
31-
sample0203-minimap/
32-
sample0204-asset-registry/
33-
sample0205-save-load-state/
34-
sample0206-level-loader/
35-
sample0207-animation-system/
36-
sample0208-state-machine/
37-
sample0209-interaction-system/
38-
sample0210-projectile-system/
39-
sample0211-enemy-patrol-ai/
40-
sample0212-playable-micro-level/
41-
sample0213-sprite-render-layer/
42-
sample0214-animation-sprite-binding/
43-
sample0215-z-layer-ordering/
44-
sample0216-prefab-system/
45-
sample0217-game-mode-state/
46-
sample0218-polished-playable-slice/
47-
sample0219-sprite-atlas-image-rendering/
48-
sample0220-camera-system/
49-
sample0221-tilemap-system/
50-
sample0222-input-action-mapping/
51-
sample0223-world-serialization/
52-
sample0224-tile-camera-sprite-slice/
53-
Phase 03 - Gameplay Systems (0301-0324)/
54-
sample0301-real-sprite-rendering/
55-
sample0302-animation-system/
56-
sample0303-physics-system/
57-
sample0304-collision-resolution/
58-
sample0305-tile-metadata/
59-
sample0306-nes-style-zones-parallax/
60-
sample0307-slopes-ramps/
61-
sample0308-gravity-zones/
62-
sample0309-ladders-climb-zones/
63-
sample0310-moving-platforms/
64-
sample0311-one-way-platforms/
65-
sample0312-friction-surfaces/
66-
sample0313-trigger-zones/
67-
sample0314-pickups-collectibles/
68-
sample0315-switches-buttons/
69-
sample0316-doors-gates/
70-
sample0317-basic-npc-entity/
71-
sample0318-interaction-press-key/
72-
sample0319-hitboxes-hurtboxes/
73-
sample0320-projectile-system/
74-
sample0321-health-system/
75-
sample0322-damage-knockback/
76-
sample0323-invulnerability-frames/
77-
sample0324-simple-enemy-ai/
78-
Phase 04 - Camera + Feel (0401-0412)/
79-
sample0401-camera-dead-zone/
80-
sample0402-camera-look-ahead/
81-
sample0403-camera-smoothing/
82-
sample0404-camera-bounds/
83-
sample0405-camera-shake/
84-
sample0406-camera-zoom/
85-
sample0407-input-buffering/
86-
sample0408-input-queue-priority/
87-
sample0409-input-timing-windows/
88-
sample0410-action-cooldowns/
89-
sample0411-input-chaining/
90-
sample0412-input-state-debug-overlay/
91-
Phase 05 - UI + Systems (0501-0512)/
92-
sample0501-hitboxes-hurtboxes/
93-
sample0502-attack-timing-windows/
94-
sample0503-damage-invulnerability/
95-
sample0504-knockback-response/
96-
sample0505-health-death-state/
97-
sample0506-combat-debug-overlay/
98-
sample0507-event-bus/
99-
sample0508-state-machine-framework/
100-
sample0509-config-system/
101-
sample0510-asset-loader-system/
102-
sample0511-debug-tools/
103-
sample0512-performance-metrics/
104-
Phase 06 - AI + World (0601-0613)/
105-
sample0601-grid-pathfinding/
106-
sample0602-patrol-ai/
107-
sample0603-chase-evade-ai/
108-
sample0604-state-driven-ai/
109-
sample0605-group-behaviors/
110-
sample0606-quest-system/
111-
sample0607-scripting-system/
112-
sample0608-cutscene-system/
113-
sample0609-spawn-system/
114-
sample0610-day-night-cycle/
115-
sample0611-weather-animation/
116-
sample0612-weather-system/
117-
sample0613-world-streaming/
118-
Phase 07 - Polish + Scale (0701-0713)/
119-
sample0701-input-remapping/
120-
sample0702-controller-support/
121-
sample0703-resolution-scaling/
122-
sample0704-mobile-support/
123-
sample0705-asset-optimization/
124-
sample0706-memory-management/
125-
sample0707-save-compression/
126-
sample0708-replay-system/
127-
sample0709-mini-map-system/
128-
sample0710-achievements-system/
129-
sample0711-localization-system/
130-
sample0712-packaging-build-system/
131-
sample0713-fullscreen-ability/
132-
Phase 08 - Platform + UX (0801-0810)/
133-
sample0801-audio-system/
134-
sample0802-midi-player/
135-
sample0803-synthesizer/
136-
sample0804-frequency-player/
137-
sample0805-particle-fx/
138-
sample0806-ui-framework/
139-
sample0807-input-context-system/
140-
sample0808-scene-transitions/
141-
sample0809-save-slots-profiles/
142-
sample0810-logging-error-system/
143-
Phase 09 - Graphics + Precision Collision (0901-0906)/
144-
sample0901-vector-rendering-system/
145-
sample0902-polygon-collision/
146-
sample0903-point-in-polygon/
147-
sample0904-raster-mask-collision/
148-
sample0905-pixel-perfect-collision/
149-
sample0906-hybrid-collision/
150-
Phase 10 - Platform Utilities (1001-1003)/
151-
sample1001-mp3-player/
152-
sample1002-cookie-write-read-system/
153-
sample1003-audio-playlist-track-management/
154-
Phase 11 - Release + Deployment (1101-1106)/
155-
sample1101-settings-system/
156-
sample1102-accessibility-options/
157-
sample1103-deployment-profiles/
158-
sample1104-distribution-packaging/
159-
sample1105-crash-recovery-fallback-flow/
160-
sample1106-release-validation-checklist-flow/
161-
Phase 12 - Network Concepts, Latency & Simulation (1201-1215)/
162-
sample1201-networking-layer/
163-
sample1202-state-sync-replication/
164-
sample1203-asteroids-world-systems/
165-
sample1204-client-prediction-reconciliation/
166-
sample1205-serialization-system/
167-
sample1206-network-debug-overlay/
168-
sample1207-remote-entity-interpolation/
169-
sample1208-lobby-session-system/
170-
sample1209-space-invaders-world-systems/
171-
sample1210-host-server-bootstrap/
172-
sample1211-interest-management/
173-
sample1212-lag-packet-loss-simulation/
174-
sample1213-pacman-lite-world-systems/
175-
sample1214-chat-presence-layer/
176-
sample1215-rollback-replay-diagnostics/
177-
Phase 13 - Editor + Automation + Trust + Pipeline (1301-1318)/
178-
sample1301-level-editor/
179-
sample1302-tile-map-editor/
180-
sample1303-entity-placement-editor/
181-
sample1304-timeline-cutscene-editor/
182-
sample1305-automated-test-runner/
183-
sample1306-regression-playback-harness/
184-
sample1307-performance-benchmark-runner/
185-
sample1308-ci-validation-flow/
186-
sample1309-packet-validation-anti-cheat/
187-
sample1310-save-data-integrity-checks/
188-
sample1311-permissions-capability-gating/
189-
sample1312-trust-session-validation/
190-
sample1313-asset-import-pipeline/
191-
sample1314-texture-sprite-preprocess-pipeline/
192-
sample1315-audio-preprocess-pipeline/
193-
sample1316-content-versioning-migration/
194-
sample1317-build-asset-manifest-system/
195-
sample1318-content-validation-pipeline/
196-
Phase 14 - Advanced Systems (1401-1406)/
197-
sample1401-developer-console/
198-
sample1402-in-engine-inspector/
199-
sample1403-property-editor/
200-
sample1404-live-tuning-hot-reload/
201-
sample1405-asset-browser/
202-
sample1406-scene-graph-entity-hierarchy-viewer/
1+
Toolbox Aid
2+
David Quesenberry
3+
04/03/2026
4+
file_tree.txt
5+
6+
PR file tree for BUILD_PR_SPRITE_EDITOR_FROM_SCRATCH
7+
8+
CODEX_COMMANDS.md
9+
docs/pr/BUILD_PR_SPRITE_EDITOR_FROM_SCRATCH.md
10+
docs/dev/reports/change_summary.txt
11+
docs/dev/reports/validation_checklist.txt
12+
docs/dev/reports/file_tree.txt
13+
tools/index.html
14+
tools/Sprite Editor/README.md
15+
tools/Sprite Editor/index.html
16+
tools/Sprite Editor/main.js
17+
tools/Sprite Editor/spriteEditor.css
18+
tools/Sprite Editor/modules/constants.js
19+
tools/Sprite Editor/modules/colorUtils.js
20+
tools/Sprite Editor/modules/projectModel.js
21+
tools/Sprite Editor/modules/spriteEditorApp.js

0 commit comments

Comments
 (0)