Question

What would be the easiest way to include a simple (about 7 seconds long)
cartoon in Phonegap app?

I tried mp4 video but Android won’t play local video file through <video> html5 tag. Then I tried with animated GIF but I lost too much quality and the file was too big. Afterwards I tried to export everything to JPG files and switch them using javascript but it was breaking all the time (and the app got huge – about 7MB for 7second video).

Another problem are different resolutions – I want my cartoon to be in an acceptable quality on hi-res as well as low-res devices..

So can anybody suggest how something like this could be done?

thanx!

Answer 1

Reading simple cartoon animation, I understand it as something which could be made with a smaller color palette.
For this an animated GIF should have been acceptable, but with it’s own set of problems.

A post suggested that using a sprite sheet of indexed PNGs may solve GIF timing issues and also be smaller than an animated GIF. The link had what looked like a 2 color animation, so I tested the hypothesis for myself. I used an 170×170 animated GIF (216 color palette; 40ms between frames) with 101 frames to test which was 229,041 bytes.

After extracting the individual frames as separate (indexed color) PNGs, the total size of the files was 375,242 bytes.
I used ImageMagick to extract the frames:

convert sca.gif -coalesce sca_%d.png

Then created a sprite sheet – again, using ImageMagick:

montage -geometry 170x170 sca_*.png SpriteSheet.png

which was 221,228 bytes (which is smaller than the source GIF). The output had 11 cols x 10 rows.

EDIT: The order of the frames in this case turned out as sca_2.png was added after sca_19.png due to the way the ***** glob expands. A batch snippet is included below to create the sprite sheet in the correct order.

As you mention the animated GIF lost too much detail – it leads me to think that your video may require high color depth (or you need to export the GIF without dithering). For this, you could try creating a sprite sheet from the JPEGs. You mention the JPEGs added up to 7MB – with a little more work, perhaps you could reduce the number of frames in the video by removing duplicate frames (and/or reducing the frame rate of your source animation/video). For removed (duplicate) frames, you could adjust the frame delay.

This could be encoded in a descriptor object in javascript. Such as:

var animFrameTimes = [40, 40, 100, 100, ..., 40, 200, 40, 40]; // milliseconds between frames

This data could be used to adjust the timeout to use between frames such as in the filmstripper function in the reference link.

Additional example of a simple implementation of 2D sprite animation.

A gotcha to keep in mind is that some devices (iOS) may not support sprite sheets that are too large. You may need to split your sprite sheet into multiple sheets as a workaround. All this depends upon how important showing the animations/videos is to you.

Finally, to handle devices with different resolutions, you could have a few of these sprite sheets created at different resolutions if the largest being scaled down does not offer the desired visual quality. Then load them conditionally based on the device.

EDIT: Batch snippet to create sprite sheet with frames in the correct order createSpriteSheet.bat:

@echo off
setlocal enableextensions enabledelayedexpansion
set fileList=
FOR /L %%n IN (0,1,100) DO (
    if not "!fileList!" == "" set fileList=!fileList!
    set fileList=!fileList! sca_%%n.png
)
REM echo %fileList%
montage -geometry 170x170 %fileList% SpriteSheet.png
endlocal