{"id":4943,"date":"2011-01-21T11:13:11","date_gmt":"2011-01-21T03:13:11","guid":{"rendered":"http:\/\/nick.onetwenty.org\/?p=4943"},"modified":"2011-01-21T11:13:11","modified_gmt":"2011-01-21T03:13:11","slug":"animated-gif-to-sprite-sheet-using-imagemagick","status":"publish","type":"post","link":"https:\/\/nick.onetwenty.org\/index.php\/2011\/01\/21\/animated-gif-to-sprite-sheet-using-imagemagick\/","title":{"rendered":"Animated GIF to sprite sheet using ImageMagick"},"content":{"rendered":"

Simon<\/a> made some animated GIFs to use as loading indicators for an HTML5 game we are working on. Here’s one of them:<\/p>\n

\"\"<\/a><\/p>\n

Although animated GIFs are easy to place on a basic webpage, it turns out that they aren’t so great for scripting (since you don’t have much control over playback). Sprite sheets are better in this regard, since you can have pretty fine-grained control over the animation.<\/p>\n

So I searched for conversion methods and found this very useful TIGForums post<\/a> explaining how to generate sprite sheets from animated GIFs using ImageMagick<\/a>.<\/p>\n

Following the instruction in that post, I ran:<\/p>\n

\r\nmontage DanceLoading1.gif -tile x1 -geometry '1x1+0+0<' -alpha On -background \"rgba(0, 0, 0, 0.0)\" -quality 100 loading_1.png\r\n<\/pre>\n
And I ended up with this sprite sheet (click for full-size image):<\/p>\n
\"\"<\/a><\/p>\n
Unfortunately, it looks like there are bits missing. The problem was that the animated GIF was optimised to use \"combine\" mode. This means that the image stored for each frame only includes pixels that need to be changed from the previous frame.<\/p>\n
Here's a close-up of where things went wrong:<\/p>\n
\"\"<\/p>\n
In order to resolve this problem, I needed to change the GIF to use \"replace\" mode, which forces it to store a complete image for each frame. I opened the image in GIMP<\/a> and saved a new copy with appropriate settings:<\/p>\n
\"\"<\/a><\/p>\n
I then ran the same montage command on the newly exported file, and got pretty much what I wanted (click for full-size image):<\/p>\n
\"\"<\/a><\/p>\n
Or so I thought... have a look at frame 35:<\/p>\n
\"\"<\/a><\/p>\n
What is the deal with that? I checked the GIF image exported by GIMP and it's there as well. Gah. It must be a bug in GIMP.<\/p>\n
Nevermind, there must be a way to first convert the GIF via ImageMagick's command line operations. After reading some documentation<\/a>, I came up with the following:<\/p>\n
\r\nconvert -layers dispose DanceLoading1.gif temp.gif\r\nmontage temp.gif -tile x1 -geometry '1x1+0+0<' -alpha On -background \"rgba(0, 0, 0, 0.0)\" -quality 100 loading_1.png\r\n<\/pre>\n
And it works. Yay!<\/p>\n
\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Simon made some animated GIFs to use as loading indicators for an HTML5 game we are working on. Here’s one of them: Although animated GIFs are easy to place on a basic webpage, it turns out that they aren’t so great for scripting (since you don’t have much control over playback). Sprite sheets are better … Continue reading “Animated GIF to sprite sheet using ImageMagick”<\/span><\/a><\/p>\n","protected":false},"author":67,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[1],"tags":[],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paLsRH-1hJ","_links":{"self":[{"href":"https:\/\/nick.onetwenty.org\/index.php\/wp-json\/wp\/v2\/posts\/4943"}],"collection":[{"href":"https:\/\/nick.onetwenty.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nick.onetwenty.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nick.onetwenty.org\/index.php\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/nick.onetwenty.org\/index.php\/wp-json\/wp\/v2\/comments?post=4943"}],"version-history":[{"count":26,"href":"https:\/\/nick.onetwenty.org\/index.php\/wp-json\/wp\/v2\/posts\/4943\/revisions"}],"predecessor-version":[{"id":4978,"href":"https:\/\/nick.onetwenty.org\/index.php\/wp-json\/wp\/v2\/posts\/4943\/revisions\/4978"}],"wp:attachment":[{"href":"https:\/\/nick.onetwenty.org\/index.php\/wp-json\/wp\/v2\/media?parent=4943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nick.onetwenty.org\/index.php\/wp-json\/wp\/v2\/categories?post=4943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nick.onetwenty.org\/index.php\/wp-json\/wp\/v2\/tags?post=4943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}