Sprite Sheet Guide Generator January 13, 2013Posted by Andor Saga in Game Development, Pixel Art, Processing.js.
add a comment
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.
BitCam.Me December 25, 2012Posted by Andor Saga in Open Source, Pixel Art, Processing.js.
add a comment
Check this out: I created a WebRTC demo that pixelates your webcam video stream: BitCam.me.
I recently developed a healthy obsession with pixel art and I began making some doodles in my spare time. Soon after I started doing this, I wondered what it would be like to generate pixel art programmatically. So I fired up Processing and made a sketch that did just that. The sketch pixelized a PNG, taking the average pixel color of the nearest neighbor pixels.
I then found SuperPixelTime and saw it did something similar to what I had written. But unlike my demo, it had some nice options to change the color palette. I read the code and figured making those changes wouldn’t be difficult either and soon had my own controls for changing palettes.
I had a great time making the demo. Let me know what you think!