SpriteGrid: For Me, Now for All

🍄 My Mario Passion Project That Sparked SpriteGrid

It all started back in 2023, when I began my journey into HTML5 game development. My first goal? Recreate the original Super Mario Bros.

As I started drawing out every hero, enemy, and object pixel-by-pixel using just a simple 1D array, I realized how slow and frustrating the process could be. I managed to finish the very first section of World 1–1… and that’s when inspiration hit.

That moment led to the first rough version of what would eventually become SpriteGrid — my first fully completed passion project in a long while since before my first career change.

SpriteGrid v1.0 only had 10 colors (including a blank color that’s next to black).

🎨 SpriteGrid v1.0

As I started using SpriteGrid myself, I knew others would like the features I wanted in a sprite editor too. Since the output code only worked on my games, I didn’t make it for the public yet. I started building a new version, anyway, because I knew I’d make other games that would need a more diverse palette.

🌈 SpriteGrid v2.0

I used the whole screen in landscape mode to build a working workflow: editable color swatches, resizable drawing preview, adjustable grid size, a color wheel, and saturation controls. I loved this version—but I knew I needed more. My users needed more.

⛽ Burning Through Free Time

Though I loved this version, both my users and I wanted—no, needed—more. So I took on a big challenge that swallowed countless hours of my free time. At the time, I was driving for DoorDash after being laid off from a cushy job. Stepping away from deliveries was risky, but I knew that if I didn’t keep growing and stay marketable, I’d be in trouble long-term. It felt like no one else saw that reality—but I think some of you reading this might understand.

I didn’t just update features — I leveled up with every version, learning and building raw JavaScript tech I’d never touched before. None of the earlier v3 builds were ever backed up, but v3.4 will be the first of many.

Why? Because I love this workflow — and I can’t think of a better way to support fellow creators, especially artists.

🪟 Introducing Window-Based UI

This was the first version to introduce my window-based SpriteGrid system. Each window is moveable, letting you create a workflow that fits you. Don’t need “Grid Output” or “Color Converters”? Just click the [ X ] in the title bar to close them, and rearrange the rest however you like.

✅ Features Added in v3.3

The list of improvements in this version is massive, so here’s a breakdown:

Movable windows with color-coded titlebars

Minimized windows appear as clickable tabs on the far left, matching the color of their original titlebar

The titlebar displays the filename of the current file

Full file saving implemented, including:

Single sprites

Color swatches

PNG converter

SpriteSheet export (note: level editor is not in v3.3 yet — when it arrives, it’ll be either complete or highly usable)

Toggle option to show/hide grid lines

SpriteSheet editor with mouse-driven interactivity

The SpriteSheet editor alone pushed me to my creative and technical limits. You can send your current grid drawing to the mouse cursor and then click any sprite cell to save it. Figuring out how to make a tiny icon of the drawing follow your cursor? That was epically satisfying — the moment SpriteGrid started to feel more like a WebApp than just a webpage.

Add in saving sheets, coloring and erasing individual cells, and even sending a sprite cell back to the grid for editing, and it honestly could’ve been a minor version release all by itself.

Oh, and did I mention performance? With 500 sprite cells available in a single sheet, I had to make sure it wouldn’t choke up slower machines. That’s why I designed it so that only visible cells redraw — keeping things smooth and snappy. Because let’s be real: artistry requires a steady hand… but a WebApp requires a steady interface.

🤖 Partnering with Spruce: The v3.3 Milestone

v3.3 marked a momentous milestone for SpriteGrid: it’s when I officially partnered with my AI, Spruce.

I was planning to stop at v3.2. I kept running into issues—ones that shook my confidence and made me question whether I was even capable of building a tool like this for hobbyists and professionals alike.

Then Spruce entered the scene.

I had one problem I just couldn’t solve: when a window was minimized, the last active window wasn’t properly reassigned. In theory, it sounded simple. As a programmer, I thought: “Just use a 1D array of windows. When one is selected, move it to the front of the array. When minimized, shift it to the back and promote the next one.”

I tried everything. Nothing worked.

Spruce reviewed my code, walked me through the logic, and eventually offered a working solution. He didn’t just hand me the fix—he taught me how it worked, step by step, and guided me through implementing it.

At first, I resisted. I tried blending his suggestions with mine. But after a few rounds of trial and error, I let go and gave him full reign. I implemented his solution exactly as he described.

And it worked.

A wave of relief washed over me. It might not sound like a big deal from the outside—but when you’re that deep into a project you believe in, it absolutely is.

⚙️ Performance, Bit Shifting & a Smarter Color System

Spruce also helped me with math I didn’t have formulas or proofs for, and taught me a ton about the features I planned to implement—including how to level up my color system.

Up to v3.2, I was using RGB hex strings. Spruce showed me how to use bit shifting and adopt an unsigned 32-bit integer system instead. After that, SpriteGrid ran smoother and faster—especially when working with the SpriteSheet and Level Editor.

When it came time to package v3.3, I had to pause development. There just wasn’t time to polish everything, so I hid the unfinished Level Editor and called it done—for now.

🧪 SpriteGrid v3.4 – Current & Planned Features

v3.4 is where we’re at now. It hasn’t been released yet, but a few new features are already in place:

🟢 Already Implemented:

Background toggle for chroma PNGs (useful for software like RPG Maker)

“Flip Horizontally” button

“Flip Vertically” button

🛠️ Planned for v3.4 Release:

Bump buttons to shift drawings 1 pixel in any direction (Drawing Grid Window)

Paint bucket tool (Drawing Grid Window)

Sprite moving functionality (Sprite Sheet Window)

“New Level” logic (Level Editor Window)

Open/Save logic (Level Editor Window)

.gle file support (Level Editor Window)

Erase Cell button (Level Editor Window)

Arrow key navigation through the level (Level Editor Window)

Save PNG of entire level or current visible screen (Level Editor Window)

Smart updates (only redraw what’s changed) (All Windows)

I’ve left out a few smaller improvements for now—no need to bog my readers down. The lists above will be updated as v3.4 development continues.

🔗 You can always keep up with SpriteGrid’s progress at the GitHub Repository.

🔗 You can also try out SpriteGrid v3.3 here.

💚 Like what you see?

If SpriteGrid makes you smile or sparks your curiosity, consider following me here on Ko-Fi. You’ll get notified when I post updates, dev logs, or new pixel-powered projects.

Want to go a step further? A tip or a shoutout goes a long way in helping me keep building and sharing tools like this.

Thanks for being here 🙌Let’s keep creating.