Spritesheet Maker

A spritesheet collects all the images you might use for an animation or video game and assembles them into one image. You then use a reference file to pick out fragments of the large image to use as individual images. One image to download means less download time, less game initiation time, and simpler code.

Sprite Sheet Maker compiles all your images into one and creates a reference file in JSON format. Though designed for Javascript, JSON can be easily read in most languages.

To get started using Sprite Sheet Maker, click 'Choose files' and choose the images you want to use. The images will then appear inside the red box. You may choose all of the images at once or a few at a time. On some computers you can also drag and drop.

Once you have all your images in the box, you are ready to create a spritesheet. Click the 'Generate' button to compact all of your images into the smallest space possible. A smaller space means a smaller file which means faster access to your game. Since different widths may work better for different image sets, you can adjust the canvas width and try different assortments. You may also choose to pad the borders of the images to prevent pixel fragments of neighboring images from magically appearing in your animation. This is not a problem in Javascript, but is included here for developers who must deal with less fortunate situations.

Once your images are loaded and your width chosen, click 'Get final stuff' to get the image and JSON array. The image and array appear below. Right click the image to save it. Select and copy the array, then paste it as needed in your code.


The following instructions pertain to developers using Javascript.

Save the image into a reference folder such as '/_images' or where your images were stored before.

In your code, create a variable and paste the array as shown here. Be sure to also create an image of the spritesheet.

Then add the following functions somewhere in your script:

function getReference(name,spriteref){
	for (var i=0, count=spriteref.length;i < count;i++){
		if (spriteref[i]['spritename'] == name){
			return spriteref[i];
		}
	}
}
function paint(ctx,ref,x,y){
	// x and y are positions on context
	//ref are details for particular sprite--must have x,y,height,width
	//ctx indicates a 2d context
	ctx.drawImage(root,ref.x,ref.y,ref.width,ref.height,x,y,ref.width,ref.height);
}

Without the spritesheet, the creation of a sprite image would look something like this:

With the image for the sprite now in the spritesheet, you access and draw the image like this:

Try it!

A note on optimization: The functions used above could easily be combined into one. This would also reduce the 'paint' call to one line. However, this approach would result in scanning the array with every draw, which could easily create thousands of searches per second in a complex game. A better approach would be to assign a reference variable to each sprite object once on creation (i.e. store the the array of information specific to each image, such as '{"spritename":"hero_body.png","height":36,"width":21,"x":10,"y":0}'), then refer to that to paint the sprite. Thus the functions are left independent here.

The above methods for parsing the JSON array are licensed under the Creative Commons and MIT Open Source. This basically means: you can modify and manipulate them all you want, BUT please don't try to patent them and mess up everyone else's ability to freely use them AND please include a reference to the original author.


Sprite Sheet Maker has been written and designed by Erik Nickerson, a Colorado physics teacher. He believes in easily-accessible open-source software, letting computers do all the boring work, and a future educational system filled with lots and lots of games.

If you have found the site to be useful, please consider contributing to its development by submitting a comment, contributing some code, or donating:

This website does not collect your information whatsoever. Any images you use to create your spritesheet remain solely on your browser and computer, and are never uploaded to any distant server. Some information may be collected by Google to monitor traffic, and additional information may be collected by Facebook if you leave a comment. You are completely responsible for and retain all ownership of any images created here.

This site and its use is governed by the MIT Open Source License:

The MIT License (MIT)

Copyright (c) 2013 Erik Nickerson

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.