Month: December 2009

Following on from Creating CSS Animations, I have decided to release the exporter script used to create the animated orange test guy.

As the title implies, the exporter script runs in Blender. Simply construct a 2D scene using planes, add in an animation track, run the script and click Export. It’s as simple as that!

Each plane is exported as a HTML DIV. If present, any Ipos will be exported as CSS keyframes.

The exporter even supports parenting, so you can build up complex hierarchies of elements which can easily be transformed in an animation, or even javascript.

Note that currently the exporter only supports Webkit-based browsers (i.e. Chrome, Safari, MobileSafari). It also has limited support for Firefox (sans animations).

For the curious, there are 3 examples:

• Walking Orange Guy
• Transform Test (not animated)
• Animated Image

As for the actual exporter script, it’s available on github.

Happy animating!

EDIT: For those of you who for whatever reason want a video demonstration, there’s a video of it in action on youtube.

Recently I incorporated support for creating thumbnails in glgif, the backend gif animation library used in Anim8gif.

Rather than taking the easy route out and attempting to load the gif using UIImage, I decided to take advantage of glgif’s decode routines to create an accurate representation of the current state of the gif playback.

Put simply, I took the palette texture which is generated for display, and decoded it into a new UIImage.

The actual process is triggered by assigning a delegate (thumbDelegate), which will be invoked when the next frame in the gif is decoded. The delegate is then cleared.

Simple, right?

More Technical Details

The format of a palette texture in GLES is as follows:

Palette (16 or 256 entries)

Indexed Pixels (4bit or 8bit)

The palette can either be 16 or 256 entries long, depending on the format you use. Likewise the pixel data will either use 4 bits or 8 bits. To keep things simple, glgif uses an 8bit palette with 3 8bit entries for the color (GL_PALETTE8_RGB8_OES).

(Note that an 8bit palette can be insufficient as a gif can actually display more than 256 colours across multiple frames, but this is a necessary trade-off for speed)

So in order to decode it:

1. Read and decode the palette
2. Decode each pixel as an index into the palette
3. Using the decoded pixel data, create a new CoreGraphics bitmap context (using CGBitmapContextCreate)
4. Convert the bitmap context into a UIImage (using CGBitmapContextCreateImage and [UIImage imageWithCGImage:])

The resultant UIImage can then easily be used as a base to generate a sized down thumbnail of the gif, as illustrated below.

As always, the code for glgif is hosted on github, so feel free to check it out!