While pixelating away, I found myself creating a series of sprite sheets for bitmapped fonts. I created one here, then another, but by then I found myself running into the same problem: before I began drawing each glyph, I first had to make sure I had a nice grid to keep all the characters in line. Each font used a different number of pixels, so I had to start from scratch every time. You can imagine that counting rows and columns of pixels and drawing each line separating glyphs is extremely tedious. I needed something to eliminate this from my workflow.
I decided to create a decent tool that took away this painful process. What I needed was a sprite sheet guide generator, a tool that created an image of a grid based on these inputs:
- Number of sprites per row
- Number of sprites per column
- Width of the sprite
- Height of the sprite
- Border width and color
I used Processing.js to create the tool and I found the results to be quite useful. After almost finishing the tool, I realized I could alternate the sprite background colours to help me even more when I’m drawing down at the pixel level, so I implemented that as well.
You can run the tool right here or you can click on the image at the start of this post.