Hello -

I have found many places that have sprite sheets for game characters. So I downloaded some, and I realize I have no clue how to get the sprites off the sheet. I found a tutorial, but they cheated. They had a meta file with locations of where all the images where, sizes, and which frame went with what. I simply do not have that, nor I have seen anything like that when I downloaded the sheets.

Since I do not have the meta-spritesheet data, what types of tools exists for this?

-A

What are you trying to accomplish with the sprite sheets? If you're trying to use one sprite sheet to use the images you can accomplish that by making a matrix of clips for each image in the sprite sheet.

For example create a reference to the sprite sheet, and render a part of the sprite sheet with the clips.

Pseudo-code:

struct Rect
{
    int x = 0;
    int y = 0;
    int width = 0;
    int height = 0;
};

Rect[] clips;

// Create clip to render
clips[0].x = 50;
clips[0].y = 50;
clips[0].w = 100;
clips[0].h = 50;

render.getImage(spriteSheet, clips[0]);

I am trying to load the images off the sheet. Your example doesn't work for me, because I do not have the meta data. (The x,y, height and width, in your example. )

I am trying to find the best way to get the meta data. There's lots of sprites I'd like to play with, and I don't want to make my project about organizing other people sheets. I am trying to find a tool for that, or a better way.

if they are irregularly sized/spaced then you need to get that data which defines the individual frames.

On technique is to use a pixel (sometimes a frame line of color) of one exact/unique color to mark/define the frame boundries as a marker, and the file is scanned on loading into memory (to find them automatically). Ive MANUALLY done such data on irregular sprite sheets and it was a big pain, so for someone (ie- game company) who would constantly edit/adjust the graphic data (labor cost and potential for errors) it would be useful to use such a marker system.

Sometimes its a SET of markers per frame, which includes the extent box and then also indicating the XY center point for drawing it correctly.

Most of the freely-available spritesheets I've seen, such as those at opengameart, have regularly sized grids. Load the spritesheet up in an image editor, like Gimp or Paint.Net, and use the rectangle tool to determine the size of the grid cells. It should be fairly easy with a grid of regularly sized cells, in which case you can determine the position of each sprite based on the cell size. Irregular cells will be more tedious, but doable with a bit of persistence, and you can then make your own file of meta data.

Unity has something vaguely similar to what you're asking for, but it's still a bit of a pain in the butt to work with unless they've upgraded it since I messed with it (I also don't think you can export the data easily).

You may want to just write a tool yourself. Polish it up a bit and post it for everyone else to use too, eh?

I've done a few tutorials on this subject you might find handy. Personally I use a tool called TexturePacker most of the time for my own work, it's got a free version available.

Creating a Walk Cycle Spritesheet in Under 15 minutes -- Mixamo Fuse + TexturePacker + Blender

Spritesheets in Cocos2d-x -- TexturePacker Again

Spritesheet using Daz and GIMP -- Um, Daz3d and GIMP

Flipbook Spritesheet in Unreal Engine

Defold Engine Spritesheets

At the end of the day it really comes down to your engine. I do however recommend you check out TexturePacker, although there are several alternatives available.

You claim it is cheating, but that metadata is required. Even if you divide the image into x by y regular blocks, you still need to know how many blocks those are.

You may have a sprite sheet that is 8192x8192. Is that supposed to be regularly divided into 2x2? Or 2x4? Or 4x4? Or 16x32? Or 64x64?

You need some type of data. It could be data that says the image is divided into x rows and y columns. It could be data that includes the position of each sprite. It could be data about a large number of blocks which are not necessarily placed in a regular grid, and may include flags for things like flip an rotation.

In older hardware there were commonly bits to flip and rotate, usually an hflip and vflip, and rotation with 4 or 8 positions. So a tiny sprite with a knife that is horizontal could be flipped and rotated into 32 orientations. There were many other little tricks, like how the old Mario goombas were a single sprite that was flipped, so the right and left foot appeared to be large and small as it walked across the screen giving the appearance of walking. They were sprite sheets, but also metadata describing details of each sprite.

I am trying to load the images off the sheet. Your example doesn't work for me, because I do not have the meta data. (The x,y, height and width, in your example. )

I am trying to find the best way to get the meta data. There's lots of sprites I'd like to play with, and I don't want to make my project about organizing other people sheets. I am trying to find a tool for that, or a better way.

You might not be prepared enough for going this far then. Or you might be over-estimating what you can actually do in programming

When you load in outside resources, you absolutely NEED meta data in order to use them correctly. What he is describing here is a clipping rectangle, which is the most critical building block of using a sprite sheet. Even custom data formats will provide metadata.

If you do not wish to use meta data, the only other way is to split your sprite sheet into many individual images. But even then, you STILL need to know how large that image is, and it's compression format which should be provided by the image's binary header.

Why cant you just figure the meta data out. asumming they are squares and spaced evenly then:

//this is psuedocode

obj sheet = new sprite('image.jpg');
meta.width = (numberofColums/sheet.width)-widthOFSpacer;//remember to remove the spacer if there is one
meta.height = (numberofRows/sheet.height)-widthOfSpacer;

if your engine has no way of getting the height and width of the sprite then just open it in a image editor, zoom in, and count. then just hard code it( or add your own meta data):

//this is psuedocode
const imgsize = 2500;
const url = 'images/sheet.jpg'
const row = 10;
const col = 10; 

clips[] functionToGetClipsArray(imgSize,SpriteSheetURL, NumberOfRows,NumberofCols){
obj sheet = new sprite('image.jpg');
meta.width = (numberofColums/sheet.width)-widthOFSpacer;//remember to remove the spacer if there is one
meta.height = (numberofRows/sheet.height)-widthOfSpacer;

for x in (numberofrow * numberofCols)
{
     location = x % number of rows// use mod to figure out witch clip you are on.
     clips[x] = rect(meta.height,meta.width,size, location)//make a rectangle
}
return clips[];
}

PS. if using C++, use a Std::vector instead of an array, dynamically resizeable

Pss. alot of freeware spritesheets provide the meta data in the comments