diff --git a/test/ltgloader-demo.html b/test/ltgloader-demo.html index a43fa84..15829f8 100644 --- a/test/ltgloader-demo.html +++ b/test/ltgloader-demo.html @@ -45,7 +45,7 @@
 
- + Your browser does not support the canvas element. @@ -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; - - // the default position is the last tile in the animation, so - // 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 ); + var x = ( ( i % 10 ) * 50 ), + y = ( Math.floor( i / 10 ) * 50 ), + cur = tiles[ tile ]; ctx.putImageData( cur.data, x, y ); ctx.fillText( tile, x, ( y + 43 ), 50 ); - j++; - } while ( ( cur = cur.next ) !== end ) + // is this tile animated? + if ( cur !== cur.next ) + { + // add to animation list + anim.push( [ cur.next, x, y ] ); + } - i++; + 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 ); } ); };