Creating a "Sprite Sheet"

0 favourites
  • 4 posts
  • I have had some luck creating a character and doing some animations but I find that I'm saving them as individual files (w/ each file being a little different than the previous). A few of the tutorials (i.e. Intro to Platform Game) showcases a Sprite Sheet. Is there an easy way to create these sprite sheets and the ability to make the delta changes to create an animation (i.e. walking may have 20 animation frames with each animation slightly different than the previous one).

    Just curious to know how you guys are tackling the basics of animations and creating Sprite Sheets.



  • One nice, simply way to turn your individual files into a sprite sheet is as follows:

    1- Open any graphic editor which can set a grid size and snap to it (Photoshop and Gimp work great).

    2- Create a new file with the size of the page a multiple of the width and height of your original images (ie - if your animation images are 5x5 and you have 5 of them, make the page 25x5).

    3- Set the grid size to the size of the images and turn on snap to grid

    4- Import all the images into the sprite sheet.

    5- Drag each image into the correct position in order. With snap to grid on, they will fall right into where you want them.

    6- Export to the file type you want to use.

    You now have a sprite sheet to use in your game.

    Hope that helps.

  • Another way is using animation programs. I use Anime Studio, you can set up your sprite with a bone structure in order to create the animation. You export these as PNG files and load them into Construct and you got yourself a flawless animated sprite. When you export the game, construct will create it's own spritesheets, so there's no really use in creating one.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • A litte late to the party, but Frag had a great idea on how to do it.

    Here's a little nifty back-way in GIMP, if your familiar with it.

    Seperate images. First, select file>open as layers. Then, select all your image's (shift click), and import them. Now you'll want to head to Filters > Combine > Filmstrip.

    Here you can leave all the base settings, and click ok. It will generate a perfectly spaced long image on a film looking layer, including all of your photo's.

    After this, you'll want the layers option at the top. You'll want to click add layer, then make sure it's a transparency, and click ok. Now, you'll want the same option, and select merge down.

    When that's done, you'll want to grab the RGB select tool (looks like a pointed finger on the toolbar), and shift click the black, and white areas around your images (part that looks like film), and hit delete.

    This should leave you with a well spaced, single row of your images.

    Also, you might try googling "Glue it". this is a wonderfully small, free program, that will automatically allow you to add individual sprite pictures, and assemble them in order (based of what they are named (just remember to name files 1, 2, 3, ect) in order), and create nice little quick spritestrip.

    Sorry for the mouthful, but don't let all that turn you off. After your used to it, you can do all those steps in about 30 seconds without a problem .

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)