ltgloader-demo will now animate tiles with frames

This is exciting, as it begins to bring the game to life.

test/ltgloader-demo.html

@@ -45,7 +45,7 @@
       <dd id="ltg_id">&nbsp;</dd>
     </dl>
 
-    <canvas id="canvas" width="500" height="300">
+    <canvas id="canvas" width="500" height="200">
       Your browser does not support the canvas element.
     </canvas>
 
@@ -56,8 +56,10 @@
       window.Interface = easejs.Interface;
 
       var ctx = document.getElementById( 'canvas' ).getContext( '2d' ),
-          ltg = document.getElementById( 'ltg' );
+          ltg = document.getElementById( 'ltg' ),
 
+          // animation timer
+          ianim;
 
       ctx.font = '7pt Arial';
       ltg.addEventListener( 'change', fileChange, false );
@@ -66,6 +68,8 @@
       {
         if ( ltg.files.length === 0 ) return;
 
+        clearInterval( ianim );
+
         var file   = ltg.files[ 0 ],
             reader = new FileReader();
 
@@ -97,29 +101,49 @@
             // clear canvas to erase any previous LTG contents
             ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
 
-            var i = j = 0;
+            var i    = 0,
+                anim = [];
+
             for ( var tile in tiles )
             {
-              var cur, end;
+                var x   = ( ( i % 10 ) * 50 ),
-
+                    y   = ( Math.floor( i / 10 ) * 50 ),
-              // the default position is the last tile in the animation, so
+                    cur = tiles[ tile ];
-              // advance one before beginning output to keep consistent with the
-              // tile set
-              end = cur = tiles[ tile ].next;
-
-              do
-              {
-                var x = ( ( j % 10 ) * 50 ),
-                    y = ( Math.floor( j / 10 ) * 50 );
 
                 ctx.putImageData( cur.data, x, y );
                 ctx.fillText( tile, x, ( y + 43 ), 50 );
 
-                j++;
+                // is this tile animated?
-              } while ( ( cur = cur.next ) !== end )
+                if ( cur !== cur.next )
+                {
+                    // add to animation list
+                    anim.push( [ cur.next, x, y ] );
+                }
 
                 i++;
             }
+
+            // animate tiles with multiple frames
+            ianim = setInterval( function()
+            {
+                var i = anim.length;
+
+                while ( i-- )
+                {
+                    var data = anim[ i ],
+                        img  = data[ 0 ].data,
+                        x    = data[ 1 ],
+                        y    = data[ 2 ];
+
+                    // clear tile area (in case masks differ) and render the
+                    // next frame
+                    ctx.clearRect( x, y, img.width, img.height );
+                    ctx.putImageData( img, x, y );
+
+                    // advance the frame
+                    anim[ i ][ 0 ] = data[ 0 ].next;
+                }
+            }, 200 );
           } );
         };