Golden Frame animation on HTML5 Canvas with bandwidth optimization

The Problem:

The title of this post looks weird as the first thought comes to our mind is how come the network bandwidth links to HTML5 canvas animation?

Well, as such their is no direct relationship between them but if you limit the size of your application (mobile game) then such relationships comes in to your mind. In my last project I have to struggle out to achieve an animation like glowing frame in best possible and optimized way.

The Solutions:

For the solution that approached is to build a sprite sheet of the animation and render the frames in time tuned environment on the canvas and voila!!!... so quick so efficient and get work done. Every thing works perfect but when comes to low end devices, memory profiling and network profiling things get worst. The limitation of this solution is the size of sprite sheet. For smooth animation the sprite sheet is close to 1200 KB which is too high.

Second proposed solution is to remove some frames from the sprite image and create an in-memory sprite sheet from some images. This is again a failed solution due to memory constraints and the animation looks horrible as in this approach the static memory is consumed.

Some interesting facts that comes up with such solutions are.

1) Size limit of your application.

In my case it is close to 2 MB which includes all the images, animations, configurations, resource files, audio files, JavaScript libraries and application JS. So we can't afford a large sprite sheet.

2) Cost of Network.

Its ok if your target audience is has a mandatory wifi connection. as the long request worsen the situation on mobile packet data. The long requests generally terminated by platform based on their limited resources like memory, battery, network availability.

3) Cost of memory

In cross platform application development we have to consider a variety of devices. memory intensive applications works perfectly on desktop browsers and close to perfect on high end mobile devices & PDA's but crashes on low end devices. Nokia Lumia 520 windows 8 and iPhone4 are expectedly good low end devices.

Final Solution:

This solution consist of only two separate images with total size 50 KB approx. And I implement the whole animation with these two images using globalCompositeOperation of canvas.

The "globalCompositeOperation" property sets to configure how a source (new) image are drawn onto a destination (existing) image.

The images that are used are :

1) A transparent Golden Frame

2) A Circular Mask

These images has gradient effect to produce a nice flowing animation as a spot light moves on some frame.

The concept

The concept is to layer both the images in a stack and move the mask along the frame. The timings is tuned to get the smooth effect in the animation. The canvas is configured to have "source-in" globalCompositeOperation which makes a certain portion of the frame visible which is covered by black portion of the mask. And there you go!!

Refer different global composite operations here

Posted in: Animations,Games,HTML5,JavaScript