I originally built this little sandbox while developing CATastrophe2 (COMING SOON!), which uses Pokémon-style battle scenes powered by Kaplay + Tween magic.
Instead of replaying levels just to reach a boss fight, I made this tool so I could tweak every animation in real time.
It turned into a surprisingly fun mini-project, so I've made it public here for anyone who wants to try it out. Enjoy experimenting!
🎮 How to use this:
Desktop: On your keyboard, press the numbers/letters listed on the left and right pannels for my built-in attacks.
Mobile: Use the button controls at the bottom of the screen!
To animate your own sprite sheet: Click the glowing button that says "Animate your own sprite sheet" → scroll down → upload your sprite sheet → tweak the settings → press "U" (or tap the custom button on mobile) to fire!
Note for sizing: the canvas is 800x400 (on desktop)
Enjoy!
Beginner's Field Guide
What Each Input Does
Sprite Sheet (the file picker)
What it is: This is your animation picture! It's like a comic strip where each "panel" is one frame of animation. What to upload: A single image file (PNG, JPG, etc.) that contains ALL your animation frames laid out in a grid, like this:
Pro tip: Make sure all your frames are the same size and evenly spaced!
Columns (sliceX)
How many frames are going LEFT to RIGHT across your image.
Example: If your sprite sheet looks like this: Cat Cat Cat Cat Cat Cat
→ You have 6 columns, so type 6
Rows (sliceY)
How many frames go UP and DOWN in your image.
Example: 2 rows = type 2
Animation Preset
How your animation will play!
play - Plays once then stops
loop - Repeats forever
pingpong - Goes forward then backward
glitch - Chaotic perfection
burst, spin, beam, slash, puff, fireball - Special effects!
Start with "play" or "loop" — they're the friendliest!
Frames
Type it like "START-END" (make sure to start with 0!!)
6 frames → 0-5
12 frames → 0-11
First 4 frames → 0-3
Speed
Higher number = faster!
15 = normal · 30 = fast · 5 = slow-mo
Offset X,Y
Where the animation is positioned within the canvas (aka game screen). Changing the first number moves it horizonally, changing the second number, moves it vertically. Try 0,-50 to move it up!
Start Scale
This is if you want to resize your sprite sheet. Scale 3 = big (relative to your sprite sheet). Scale 0.3 = tiny (relative to your sprite sheet).
Opacity
Opacity 1 = solid · 0.5 = ghostly
Quick Start Guide
Upload a sprite sheet
Set Columns & Rows correctly
Type frames like 0-11
Pick "loop" or "play"
Click LOAD → Press U
Pro Tips
Start simple: 1 row, 6 columns
If nothing shows → try Offset Y: -50
I generally make my frames around 50x50 and set the scale to 2 or 3
