Skip to main content

User login

What is OpenID?
  • Log in using OpenID
  • Cancel OpenID login
  • Create new account
  • Request new password
Register
  • Home
  • Browse
    • 2D Art
    • 3D Art
    • Concept Art
    • Textures
    • Music
    • Sound Effects
    • Documents
    • Featured Tutorials
  • Submit Art
  • Collect
    • My Collections
    • Art Collections
  • Forums
  • FAQ
  • Leaderboards
    • All Time
      • Total Points
      • Comments
      • Favorites (All)
      • Favorites (2D)
      • Favorites (3D)
      • Favorites (Concept Art)
      • Favorites (Music)
      • Favorites (Sound)
      • Favorites (Textures)
    • Weekly
      • Total Points
      • Comments
      • Favorites (All)
      • Favorites (2D)
      • Favorites (3D)
      • Favorites (Concept Art)
      • Favorites (Music)
      • Favorites (Sound)
      • Favorites (Textures)
Liberated Pixel Cup

Script to display sprite sheet animations

wulax
Sunday, June 3, 2012 - 18:21

I made a simple script in javascript for displaying sprite sheet animations since I could not find any good tools to do it for me. I hope it might be of use to someone else too.

https://github.com/wulax/sprite_sheet_preview/blob/master/sprite_sheet_p...

The script assumes all frames in one animation cycle are one one single row. If a sheet has multiple rows / animation cycles, you can change row by clicking on the document.

For more instructions, read the comments in the script.

Example of the script running:

https://dl.dropbox.com/u/76778780/sprite_sheet_preview.html

Note that the image in example, male_walkcycle.png, does not have a single animation cycle per row. The first one is stand/idle animation, because of this a small jump is shown in the walk animation.

  • Log in or register to post comments
wulax
joined 10 years 7 months ago
Sunday, June 3, 2012 - 20:49

If someone is interested in creating an animated gif from a sprite sheet, here is one way to do it using ImageMagick (available on most Linux distros):

Cut the sheet into separate image files:

convert male_walkcycle.png -crop 64x64 +repage +adjoin tile_%02d.png

Then join the images into a gif:

convert -delay 8 -loop 0 -dispose Background tile_*.png animation.gif

  • Log in or register to post comments
cemkalyoncu
joined 9 years 1 week ago
Sunday, June 3, 2012 - 22:13
cemkalyoncu's picture

There is an image magic installer for windows as well. Even there is a portable version.

  • Log in or register to post comments
BlackScorp
joined 9 years 2 months ago
Saturday, June 9, 2012 - 01:35

@wulax

http://craftyjs.com/api/SpriteAnimation.html

Demo: http://cruel-online.de (userinfo already in the fields, just login and use WASD to run)

  • Log in or register to post comments
ddressler
joined 8 years 10 months ago
Saturday, June 9, 2012 - 08:37

If you are using the DOM then you can get hardware accelerated animation by using css animations. Something to consider if you are not using a canvas and smooth animation on mobile.

  • Log in or register to post comments