In the past 10 years, Gif and flash are the best format to show the animations on web. Gif can represent the simple animations with a very small size. Flash support more complicated animation with logic control. We can find hundreds of thousands of animation resources in these two file formats on the internet. However, the web technologies keep changing from time to time. The old web technology standards can not meet the current needs of our daily internet activities. HTML 5 was standardized in 1997 but it got focused till Google engaged in web browser development and Apple iPhone, iPad took the browser market share.

Now, HTML5 is encouraged to be the next HTML standard. Animations on web pages are no longer a big problems for current browser technologies. Therefore, more and more browsers refuse to support the flash player plugin to improve their security and performance. In html5 website, we can use Sprite Sheet technology which is traditional 2D game animation technology in the past 20 years. To reuse our GIF and Flash animation resources, we can convert them to Sprite sheet format and do the sprite sheet animation by Javascript in HTML 5.

Convert Gif to Sprite Sheet

Gif animation can not be programmatically controlled by Javascript in web page. If we want to use them in HTML5 web apps, we have to convert them into sprite sheet format so that we can control the animation by Javascript. In this post, I will give an example to show how to convert a GIF animation file to sprite sheet format. First, we need to install the open source software ImageMagick. Here is the gif animation I want to convert:

Using the following command line to convert the above gif animation to a sprite sheet .png file:

montage aa.gif -tile x1 -geometry +0+0  -alpha On -background "rgba(0, 0, 0, 0.0)" -quality 100 spritesheet.png

Here is the result sprite sheet file:

Get The Number of Frames and Frame Rate of GIF Animations

There is also some utilities in ImageMagick which can help us to get more information about the GIF animations. For example, the number of frames and frame rate will be the main data we need to know when we want to convert the GIF to sprite sheet before we can use them in our HTML5 animations. The following command will give us this:

identify -format "Frame %s: %Tcs\n" aa.gif

If we use the above example GIF file, we run the command and we will get information like:

Frame 0: 6 centiseconds
Frame 1: 6 centiseconds
Frame 2: 6 centiseconds
Frame 3: 6 centiseconds
Frame 4: 6 centiseconds
Frame 5: 6 centiseconds
Frame 6: 6 centiseconds
Frame 7: 6 centiseconds
Frame 8: 6 centiseconds
Frame 9: 6 centiseconds
Frame 10: 6 centiseconds
Frame 11: 6 centiseconds
Frame 12: 6 centiseconds
Frame 13: 6 centiseconds
Frame 14: 6 centiseconds
Frame 15: 6 centiseconds
Frame 16: 6 centiseconds
Frame 17: 6 centiseconds
Frame 18: 6 centiseconds
Frame 19: 6 centiseconds
Frame 20: 6 centiseconds
Frame 21: 6 centiseconds
Frame 22: 6 centiseconds
Frame 23: 6 centiseconds
Frame 24: 6 centiseconds

We will find out that the above GIF animation has 25 frames with 0.06s frame rate (1 centisecond == 0.01 second).

Convert Combine Mode Gif to Sprite Sheet

To optimize the file size of gif file, the gif software like GIMP will generate the gif in combine mode. This means that as each new frame is displayed, it is stacked on the previous one. Thus, if a new frame is partially transparent the previous frame can be seen through its transparent parts. Here is a combine mode gif example:

If we convert this type of gif to sprite sheet, the result will look like below:

This sprite sheet file can also be used in HTML 5 games, but the Javascript implementation will be a little bit complicated. To make the sprite sheet easy to use, we can convert gif from combine mode to replace mode by following command, then use the same command to convert the gif to sprite sheet.

>convert -layers dispose combine_mode.gif replace_mode.gif
>montage replace_mode.gif -tile x1 -geometry +0+0  -alpha On -background "rgba(0, 0, 0, 0.0)" -quality 100 replace_mode.png

Here is the final result of new sprite sheet file: