How do I create and implement a sprite sheet for my SFML game?

Question

I have a game I am currently working on, and I have created 6 16 frame animations for my player character. Currently each of these are saved as seperate .jpg files, which are about 1.5x bigger than I want them to be in game. Each animation has a different size for the image, so I have 6 different image sizes. For example, here is the first frame for two different animations:

So I have 6x16 images in a folder, and I want to create a sprite sheet out of them, which I can use in my c++ SFML game. When I create a spritesheet, using a tool like texture packer, I have the sprites in all sorts of positions on a sprite sheet, and I don't know how I can the proceed to implement them in my game. How can implement them such that they 1) Keep in the same position relative to each other in the game 2) Have it so that the game knows the bounding box for the current image that I can use as both a hitbox for collision, as well as the rectangle the game displays the sprite for.

How can I achieve this? My guess is some sort of data file attached to the sprite sheet, but I dont know how to create one.

Additional info: Some images are duplicated, such as my idle frame 2 and idle frame 16. I would like to be able to only put one of those on the sprite sheet.

Answer 1

Put all your frames into 1 image, then load that image into an sf::Texture. In your spritesheet class, have that texture (or a ref to it) as a member along with an array (vector) of sf::IntRect objects, which each represent the parts of the texture that the frames are from. When you want to draw a frame from your spritesheet, create a temporary sf::Sprite and use sf::Sprite::setTextureRect with the corresponding IntRect as input, then draw that temporary sprite.

As for keeping the same position relative to all frames ingame, you'll need to do that manually using an image editor.

See https://www.binpress.com/tutorial/creating-a-city-building-game-with-sfml-part-3-textures-and-animations/125 for a very simple example of this type of spritesheet.

Answer 2

As far as I know, this is possible using the sf::Image class:

sf::Image spritesheet;
spritesheet.loadFromFile("spritesheet.png");
int currentSprite = 2;
sf::Texture texture;
texture.loadFromImage (spritesheet, currentSprite*spriteWidth, spriteHeight);
sf::Sprite sprite;
sprite.setTexture(texture);

If you do this in a for-loop, you could create a fluent animation by increasing currentSprite.

For more information on spritesheets, you should take a look at the docunentation, or you should read 'SFML Game Development'

In this book, you will see an example on an Animation class. This has a basic update function which updates the current texture. You could link this to some XML-file or a JSON-file, in which gou define each sprite in the spritesheet by it's height, width and the duration it should be displayed.