Hi everyone!

 

I'm not very good at drawing sprites by hand — for me, modeling in 3D is much easier. But since I'm currently working with a 2D engine to build my games, I decided to build a small tool to help me (and hopefully others) create pixel art characters from scratch.

 

It's called Character Studio. It runs entirely in the browser, nothing to install.

 

Try it here: https://byzmod3d.github.io/bgpe/HTML/sprite_editor.html

 

WHAT IT DOES:

 

- Ready-to-use base model with idle, walking, and side-view frames — start editing right away

- Source-code export/import — export the source of your pixel art, share it, re-import for further edits

- Texture Mode (Tileset) — preview your texture tiled in real time with a 3×3 repetition view

- Frame management — hide/show frames, adjust opacity for onion-skin reference, delete frames

- Flip & rotate each selected frame (horizontal, vertical, 90° CW/CCW)

- Brush effects: Normal, Spray, Glow, Texture — plus pixel-art palette, favorites, mirror lines, and more

- Export to PNG when you're done

 

TRANSFORMS (Blender-style):

 

- R — Rotate the selection (snaps to 45° increments)

- G — Grab / move the selection freely

- S — Scale the selection (grow or shrink from the center)

- Chain them freely — press R, then G, then S, then R again — they stack

- Left-click to apply, right-click or Esc to cancel

- Works on Rect, Ellipse, Lasso, and Move selections

 

TOOLS (click the icon in the sidebar):

 

- Brush — Normal, Spray, Glow, and Texture effects (size 1–16px, adjustable opacity)

- Eraser — erase pixels back to transparent

- Fill / Bucket — flood-fill connected pixels of a similar color

- Magic Wand — click a color to erase all connected pixels of that color

- Color Picker — click any pixel to grab its color

- Rectangle / Ellipse / Lasso Select — constrain painting to a shape

- Path Brush — click to place points, right-click to apply the stroke (12 styles)

- Move — press G to grab and drag the selection freely

- Text — stamp uppercase letters and numbers (built-in 5×7 pixel font)

 

KEYBOARD SHORTCUTS:

 

- R / G / S — Rotate / Grab / Scale

- Esc — Cancel current transform or clear selection

- Space — Play / Stop animation preview

- Ctrl+Z — Undo

- Ctrl+C / Ctrl+V — Copy / paste the selected area

- Delete — Erase the contents of the current selection

- Right-click with any tool — Erase

 

PAINTING INSIDE A SELECTION:

 

When you have an active selection (Rect, Ellipse, or Lasso), the painting tools stay inside that area:

- Brush, Eraser, Fill, Wand, Text, Picker, and Path all respect the selection boundary

- Perfect for pixel-precise edits inside a specific region

 

RESETTING A TOOL:

 

Click the same tool icon twice in a row to reset it (clears selection, cancels any mode, and returns to a clean state). Works for every tool.

 

FRAME VISIBILITY:

 

Each frame has an eye icon — click to toggle visibility. A hidden frame:

- Displays with a dimmed thumbnail and a red pulsing border

- Blocks painting (so you can't accidentally paint on an invisible frame)

 

HOW TO USE:

 

1. Open the link above in any modern browser (Chrome, Firefox, Edge, etc.)

2. Edit, animate, and export your character

3. No installation, no account needed — everything runs locally in your browser

 

OTHER LINKS:

 

- Website: https://byzmod3d.github.io/bgpe/

- Windows & Linux downloads: https://byzmod3d.github.io/bgpe/

- GitHub: https://github.com/byzmod3d/bgpe

 

It started as a personal tool for my own project, but if it's useful to others here, great. If you run into something it can't do, or a feature that would fit your workflow better, let me know in the replies — I'm actively using it myself, so I have a reason to keep improving it.

 

The tool is CC0 (public domain). No need to give credit.

 

Enjoy!