jump to navigation

Sprite Sheet Guide Generator January 13, 2013

Posted by Andor Saga in Game Development, Pixel Art, Processing.js.
add a comment

sprite sheet guide generator
Click the image above to get the tool.

I began using Pixen to start making pixel art assets for a few games I’m developing for the 1 game a month challenge.

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.