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

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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

http://tech-tutors.net/downloads/

And there is a tutorial here:

http://www.youtube.com/watch?v=smOtRuxoIs8

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.

Answer 4

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.

2. Start with

   background-position: 1px 1px;

Use Firebug (a firefox extension)to modify the values on the fly. By trial and error method you can find exact position.