# How can I ease the work of getting pixel coordinates from a spritesheet?

When it comes to spritesheets they're usually easier to use, and they're very efficient memory-wise, but the problem that I'm always having is getting the actual position of a sprite from a sheet. Usually, I have to throw in some aproximated values and modify them several times until I get it right.

My question: is there a tool which can basically show you the coordinates of the mouse relative to the image you have opened? Or is there a simpler method of getting the exact rectangle that the sprite is contained in?

• I'm not sure if i got you right but you can easily get this information by knowing the number of sprites in your sheet and the size of them (and maybe the amount of sprites per line). – nathan Oct 8 '12 at 7:55
• That usually applies however in my case my spritesheet consists of texts with post-effects of various sizes, width and height, besides, it's hard to actually remember all those numbers – Bugster Oct 8 '12 at 7:55
• ho ok, maybe you should include the type of spritesheet you are using in your question. – nathan Oct 8 '12 at 7:56
• Use a program like spritesheetpacker.codeplex.com and utilise the output text file to read where your sprites are placed in the image. – Jonathan Connell Oct 8 '12 at 8:24
• @Arthur Wulf White And the only reasonable way to do that is to use a sprite sheet tool that allows you to get the coords, or make your own sprite sheet tool that does the same thing. – Jonathan Connell Oct 8 '12 at 8:45

There are tools for creating spritesheets from individual images that will also output a meta-data file describing where each image is placed in the spritesheet.

For example you could use Texture Atlas Generator to create the spritesheets. In this blog post I show how you'd work with the output to get animations playing in Flash quite effortlessly.

Even if Flash is not your language of choice you might still be able to use a similar approach.

• Yes or use spritesheetpacker.codeplex.com ! – Jonathan Connell Oct 8 '12 at 10:08
• I guess he could cut parts of the spritesheet and save them to separate images and then use a tool like this. Does not mean it will make things much easier. – AturSams Oct 8 '12 at 11:46

If you use Photoshop, you can use this method.

1. Set units to pixels. Edit → Preferences → Units and Rulers.
2. Open the Info tab to see the current mouse position.

You can also draw a Rectangle Marque selection around your sprite and see it's width and height in the Info tab.

There is a tool you can use to do it manually that is relatively painless:

And there is a tutorial here:

I can share something automated on github if people are interested, the main catch is that if the frames are not even in size which is common, you may need to adjust them manually anyway.

What normally happens when I work with sprites is that the frames are put into an even grid for ease of use. Then every sprite depending on the frame size is in (j * FRAME_WIDTH, i * FRAME_HEIGHT);. If that is not the case cause the artist is not aware of programming needs, I cook up a tool that displays the sprite sheet on screen and saves my click's (mouseX, mouseY) positions into a file. I then use that file to split the spritesheet.

I can elaborate on how to create a tool like this or you could use Ivan's advice.

If you do go with making a tool, you may want to both save the first click (for frame's top-left corner, and another click in the bottom-right to get the width and height).

I personally prefer the grid method, have your artist or friend cut and paste the frames into an even grid made of sufficiently large blocks. It would save you time if you have several sprites. Otherwise if there are many spritesheets and they are not in an even grid, you may want to cook up a tool or look for one online(I am not aware of any). They are not difficult to make.

I can upload the source for the tool I use myself to a github for you to download. It saves the results into a text file organize by a list of four values for each frame.

example:

x, y, width, height, x2, y2, width2, height2, ... ,xn, yn, widthn, heightn

You will have to sort (in the code which frame is which) to use the animation correctly.

Hope I am not late here

You can use a tool like this and get background positions of the icons in the sprite.

You need to first upload your image, then select an icon from the sprite. CSS will be generated, just copy the generated CSS and use it in your class.

Other options are

1. You need to open the image in an image editor like Photoshop. From there you can find the X and Y position anywhere in the image. Please note that left, top is 0,0. Get the x and y position and use like this

background-position: -310px -123px;

Please note the "-" sign before X and Y co-ordinates.