131 lines
3.2 KiB
HTML
131 lines
3.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>LtgLoader & TileMasker Demonstration</title>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
#bitmaps img {
|
||
|
|
border: 1px dotted black;
|
||
|
|
margin: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
dt {
|
||
|
|
font-weight: bold;
|
||
|
|
text-align: right;
|
||
|
|
|
||
|
|
padding-right: 1em;
|
||
|
|
width: 7em;
|
||
|
|
height: 1.5em;
|
||
|
|
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
dd { height: 1.5em; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>LtgLoader & TileMasker Demonstration</h1>
|
||
|
|
|
||
|
|
<noscript>Please enable JavaScript.</noscript>
|
||
|
|
|
||
|
|
<div id="bitmaps">
|
||
|
|
<img id="bmp_game" />
|
||
|
|
<img id="bmp_mas" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<input type="file" id="ltg" />
|
||
|
|
|
||
|
|
<dl>
|
||
|
|
<dt>Name</dt>
|
||
|
|
<dd id="ltg_name">(No LTG Loaded)</dd>
|
||
|
|
<dt>Author</dt>
|
||
|
|
<dd id="ltg_author"> </dd>
|
||
|
|
<dt>Description</dt>
|
||
|
|
<dd id="ltg_desc"> </dd>
|
||
|
|
<dt>Id</dt>
|
||
|
|
<dd id="ltg_id"> </dd>
|
||
|
|
</dl>
|
||
|
|
|
||
|
|
<canvas id="canvas" width="500" height="300">
|
||
|
|
Your browser does not support the canvas element.
|
||
|
|
</canvas>
|
||
|
|
|
||
|
|
<script src="../scripts/ease.min.js"></script>
|
||
|
|
<script>
|
||
|
|
window.ltjs = {};
|
||
|
|
window.Class = easejs.Class;
|
||
|
|
|
||
|
|
var ctx = document.getElementById( 'canvas' ).getContext( '2d' ),
|
||
|
|
ltg = document.getElementById( 'ltg' );
|
||
|
|
|
||
|
|
|
||
|
|
ctx.font = '7pt Arial';
|
||
|
|
ltg.addEventListener( 'change', fileChange, false );
|
||
|
|
|
||
|
|
function fileChange( event )
|
||
|
|
{
|
||
|
|
if ( ltg.files.length === 0 ) return;
|
||
|
|
|
||
|
|
var file = ltg.files[ 0 ],
|
||
|
|
reader = new FileReader();
|
||
|
|
|
||
|
|
reader.onload = function( event )
|
||
|
|
{
|
||
|
|
var loader = ltjs.LtgLoader( ctx ),
|
||
|
|
masker = ltjs.TileMasker( ctx ),
|
||
|
|
meta = loader.fromString( event.target.result ),
|
||
|
|
|
||
|
|
bmp_game = document.getElementById( 'bmp_game' ),
|
||
|
|
bmp_mask = document.getElementById( 'bmp_mas' );
|
||
|
|
|
||
|
|
bmp_game.src = meta.tiles;
|
||
|
|
bmp_mask.src = meta.mask;
|
||
|
|
|
||
|
|
// display metadata
|
||
|
|
for ( var name in meta )
|
||
|
|
{
|
||
|
|
if ( ( name === 'tiles' ) || ( name === 'mask' ) )
|
||
|
|
{
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById( 'ltg_' + name ).innerHTML = meta[ name ];
|
||
|
|
}
|
||
|
|
|
||
|
|
masker.getMaskedTiles( meta.tiles, meta.mask, function( tiles )
|
||
|
|
{
|
||
|
|
// clear canvas to erase any previous LTG contents
|
||
|
|
ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
|
||
|
|
|
||
|
|
var i = 0;
|
||
|
|
for ( var tile in tiles )
|
||
|
|
{
|
||
|
|
var x = ( ( i % 10 ) * 50 ),
|
||
|
|
y = ( Math.floor( i / 10 ) * 50 );
|
||
|
|
|
||
|
|
ctx.putImageData( tiles[ tile ], x, y );
|
||
|
|
ctx.fillText( tile, x, ( y + 43 ), 50 );
|
||
|
|
|
||
|
|
i++;
|
||
|
|
}
|
||
|
|
} );
|
||
|
|
};
|
||
|
|
|
||
|
|
reader.onerror = function( e )
|
||
|
|
{
|
||
|
|
alert(
|
||
|
|
'Error reading file: ' + e.message + '\n\n' +
|
||
|
|
'Are you viewing this page locally? Try using a webserver.'
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
reader.readAsBinaryString( file );
|
||
|
|
};
|
||
|
|
|
||
|
|
// invoke immediately, as we may have a filename prefilled from a refresh
|
||
|
|
fileChange();
|
||
|
|
</script>
|
||
|
|
<script src="../lib/LtgLoader.js"></script>
|
||
|
|
<script src="../lib/TileMasker.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|