Spritesheet resources

What are good resources for Spritesheet?

I found this website www.spriters-resource.com and looking through some sheets it seems to be often the case that there is no information about the frame locations. Is this standard and if so, what is the best praxis to get the information about the box locations for the different animations into MonoGame? Are there any tools which are recommended for such tasks that make it easier than doing it by hand?

1 Like

Your timing is excellent lol

I have just been working on creating Keyframe sprite animation in my engine, and think I have a solution, at the moment it’s in my main code, but I am going to move it to a tool so I can generate the frame information and import it in my content pipeline extension :slight_smile:

1 Like

So quickly thinking about it… If I would make such a tool I would probably make it with such functionality that I can set a start position and then define the rectangle size and clip length. Then maybe provide a visual feedback of the selected area and frames defined by the values and also maybe playing the clip in a loop and show it.

I am just writing up the Pateron post for my class now.

So, my sprite sheet animation works in a similar way to the skinned codes, but it is concerned with source rectangles within the sprite sheet at a given time/frame. My aniamtion generattion class, takes a name for the clip, the starting cell, the end cell the total time duration for the animation and if it is lopped. I then have all the info I need to step through the sheet and extract the frames (source rectangles) I need. The construcotr has the sprite sheet size and the grid it is sliced into.

1 Like

Considering some example spritesheets on the link I posted. For example this one: https://www.spriters-resource.com/snes/secretofmana/sheet/136892/
It appears to me that this does not have a single grid, so this was the main thing I wondered about. If this is the standard what to expect if using “third party” spritesheets than it would be somewhat cumbersome to generate all the information by hand. But I guess that this is how it works. Of course if you take different grid sizes maybe draw them as overlay you could quickly verify which clips belong to which grid size. If they are hopefully at least aligned to one grid when considering the clips which have the same frame size. I would like to experiment with it sometime. Only so much time and so many ideas and projects … :sweat_smile:

I would break that into multiple sheets, or, you have a container class above that you can then specify the individual blocks in it.

Ultimately, you need an editor or tool to be able to draw the aniamtions out.

1 Like

Yes that makes sense. I think if it doesn’t matter if the whole texture gets loaded into memory for a specific use case I would go with the container class solution. This way you keep the information where the cutouts would be for separate spritesheets if you decide later to optimize and make separate spritesheets out of it.

1 Like

There doesn’t seem to be any rectangle or timing information that goes with those sprite sheets.
Im guessing these were ripped out of games but the data files that describe them were not.
Techincally you could make a tool to list the set of sprites in the sheets and generate a information file but it would still require some manual selection or editing to get rid of the text and to finally set up timing for the amimation sets.

1 Like

Wonder if it would be worth my putting my key frame animation code for sprites into my Samples Git repo?

If you don’t mind I would appreciate it. To be honest I have very little time for all the stuff I want to look into with MonoGame I don’t know when I will be able and if to look into it but who knows :slight_smile:

I don’t know if this helps, but if your classes are not too set in stone, you could dump any of the spritesheets from spriters-resource into ShoeBox which will scan the sheet and identify the individual frames and then do some stuff with that info, like produce a bunch of individual image files or squash everything into the smallest file possible and produce spritesheet info in an xml file. It’s a bit finicky, but if you want to use premade spritesheets from spriters-resource, I think it’s one of the fastest ways to get the info out of those files.

1 Like

Ill see what I can do, time willing :slight_smile:

Perfectly fine for me, that’s what I meant. Found some minutes to play around with Spritesheets and got something working already but had no more time to record it right unfortunately. Need to learn how to use Obs :joy:

Cool, I will check that out. :blush::+1:

OK, naturally I have to pull it out of my engine, do you have any sheets you would like me to have a bash at?

Just go with something you want. Nothing special I have in mind.

OK, Ill try and find something interesting, might use that sheet you provided, see what I can hack out of it lol

I used this one here and got basic animation working.


What is the right way to enable transparency? For debugging it was fine with the background color, because I had to fiddle around with the values until I found the right offsets for the animation and the right values for the frame sizes… I guess AlphaBlending and when importing the texture setting the KeyColor value or something? I remember something like that from the XNA times but I never really needed it and skipped the topic :sweat_smile:

Are there recommended tools for working with pixel graphics like in this case finding the right values and offset?

EDIT: I removed the code with the values, because they were wrong…

Yah, setting KeyColor on the texture property to that green value would probably do it. Or you could use if color = green then Clip(-1) in the shader to reject a particular color. Or you could use GetData, SetData to convert green to transparent after load but I probably wouldn’t do that.
The way I’d do it is load it into photoshop(if you have it) and go into blending options and select Blend-If: green and then move the slider on the green side of the gradient to the right and alt-slide the right half of the slider to fine-tune the edges.
If the image is crisp to begin with though, I’d be thinking setting KeyColor for the texture should be a very good option (and setting use-keycolor property to true). I think that’s all you’d need.

I’m also interested to learn what sprite-sheet animation tools are being used.

You may or may not be interested in how I did it but for anyone interested:

Right now I’m using my own editor. I use the script export in photoshop for my animation (as layers to files in a folder with sequential #'s on end of each to put them in order). Next, in my editor I can add animation by folder and it packs it onto a sprite-sheet while keeping track of the rectangle sources in a list for each animation. Then I can use edit-animation which plays back the source-rects for that animation and each one has a centered origin by default and slower timing by default. < , > to go through the frames 1 at a time and then use mouse and arrows to adjust the exact position of that frame on the canvas which updates that frame’s origin (and use + , - to increase or reduce time-delay between frames). On the left side I choose and edit frames and on the right side of the screen it shows how the animation play-back would look in the game. I then export packed png sprite-sheett and the data as a simple text file to load using tags&switch-responses to maintain version compatibility.
It took me a lot longer than I expected to make the tool - so it’s probably better to use other software out there already made for this stuff. I’d be interested to know what’s out there myself. ^^

1 Like

Yea, in mine I can group multiple clips ont the animation player and tell it which one i want. I can also use a lerp value rather than time, this is useful with my shop sprite so I can roll it left and right without running the full animation cycles.

1 Like