Sprite Design

I recently finished designing the field sprites (numbers, flag and mine), which will replace the current placeholder images in a coming update. In this devlog, I will share my design process, and the decisions and reasons accompanying it. As this is my first project on Itch, it also seemed like a good opportunity to get familiar with one of the tools (devlogs) provided to creators here on Itch.

The first decision, and also the easiest, was the file format. All the sprites are flat, single colored images, so choosing vector images was a no-brainer. I use Inkscape whenever I work with vector images, as it is free, open source, and easy to find help online. Using vector images also means I can easily resize the sprites in a few seconds and not lose any detail.

The second decision was the size of the sprites. I wanted the sprite size to be a power of two, as I think it gives better results whenever the sprite is scaled up or down. I chose 128 x 128 pixels because I think this is the largest resolution the sprites will ever be viewed at in-game. I started with a square canvas, 1280 x 1280 units, which corresponds to the entire field tile size. I made a safe zone of 960 units, resulting in a margin of 160 units (12,5%), along with two centered circles, 1280 and 960 units in diameter. I thought of adding a circular theme to the game in the future, and so designing the sprites to also fit inside the circles means I can use them as-is, if I add a circular theme. After fiddling around for a bit, I settled for a base width of 500 units and line width of 160 units for all numbers. I would then use this canvas as a starting template for all images.

Base template and number "3" with template.

The third decision was the overall feel of the design. I wanted something that looked modern while staying true to the old classic. In other words, timeless. Given my fondness for Minesweeper, it is probably not a surprise that I like solutions based on logic and mathematics. As a result, all the final images are geometric constructions made by adding, subtracting, and intersecting, rectangles and circles. No freehand paths were used. This approach makes the sprites smooth and symmetrical while retaining hard corners and edges where needed. Some images required multiple iterations until I was satisfied, others just clicked and felt right on the first try.

All iterations of the number "3", the rightmost being the final image.

Finally, all the vector images are exported to PNG format. I am happy with the final design for the most part, although I feel a few of the images could be slightly better. I will work on other parts of the game for now. I can always come back to the sprites and make adjustments if needed in the future. In my experience, focusing too much on a single facet of a project often leads to a stagnation in efficiency. 

Feel free to ask any questions or leave feedback.

-Adam