261 lines
7.1 KiB
HTML
261 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>LtgLoader & TileMasker Demonstration</title>
|
|
|
|
<style type="text/css">
|
|
#bitmaps img {
|
|
border: 1px dotted black;
|
|
margin: 0.5em;
|
|
}
|
|
|
|
canvas {
|
|
float: left;
|
|
}
|
|
|
|
dl {
|
|
float: left;
|
|
width: 30em;
|
|
margin-bottom: 4em;
|
|
}
|
|
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" />
|
|
<input type="file" id="lvl" />
|
|
<select id="lvl_id"></select>
|
|
<br clear="both" />
|
|
|
|
<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>
|
|
|
|
<dl>
|
|
<dt>Name</dt>
|
|
<dd id="lvl_name">(No LVL loaded)</dd>
|
|
<dt>Author</dt>
|
|
<dd id="lvl_author"></dd>
|
|
<dt>Difficulty</dt>
|
|
<dd id="lvl_diff"></dd>
|
|
<dt>Hint</dt>
|
|
<dd id="lvl_hint"></dd>
|
|
</dl>
|
|
<br clear="both" />
|
|
|
|
<canvas id="canvas" width="250" height="400">
|
|
Your browser does not support the canvas element.
|
|
</canvas>
|
|
|
|
<canvas id="canvas_map" width="512" height="512"></canvas>
|
|
|
|
<script src="../scripts/ease.min.js"></script>
|
|
<script>
|
|
var ctx = document.getElementById( 'canvas' ).getContext( '2d' ),
|
|
ctxmap = document.getElementById( 'canvas_map' ).getContext( '2d' ),
|
|
ltg = document.getElementById( 'ltg' ),
|
|
lvl = document.getElementById( 'lvl' ),
|
|
|
|
render = null,
|
|
|
|
// animation timer
|
|
ianim,
|
|
tile_set;
|
|
|
|
ctx.font = '7pt Arial';
|
|
ltg.addEventListener( 'change', ltgChange, false );
|
|
lvl.addEventListener( 'change', lvlChange, false );
|
|
|
|
function ltgChange( event )
|
|
{
|
|
if ( ltg.files.length === 0 ) return;
|
|
|
|
clearInterval( ianim );
|
|
|
|
var file = ltg.files[ 0 ],
|
|
reader = new FileReader();
|
|
|
|
reader.onload = function( event )
|
|
{
|
|
var loader = ltjs.LtgLoader(),
|
|
masker = ltjs.TileMasker( ltjs.ClassicTileDfn() ),
|
|
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,
|
|
anim = [];
|
|
|
|
tile_set = tiles;
|
|
|
|
for ( var tile in tiles )
|
|
{
|
|
var x = ( ( i % 5 ) * 50 ),
|
|
y = ( Math.floor( i / 5 ) * 50 ),
|
|
cur = tiles[ tile ];
|
|
|
|
ctx.putImageData( cur.data, x, y );
|
|
ctx.fillText( tile, x, ( y + 43 ), 50 );
|
|
|
|
// is this tile animated?
|
|
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 );
|
|
|
|
// trigger map change (in case of page refresh or tile set change
|
|
// after map is already loaded)
|
|
lvlChange();
|
|
} );
|
|
|
|
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 );
|
|
}
|
|
|
|
function lvlChange()
|
|
{
|
|
if ( lvl.files.length === 0 ) return;
|
|
|
|
var file = lvl.files[ 0 ],
|
|
reader = new FileReader();
|
|
|
|
reader.onload = function( event )
|
|
{
|
|
var map_set = ltjs.MapSet( event.target.result, ltjs.ClassicMap );
|
|
|
|
// clean up any previous render and create a new one to render the
|
|
// chosen level with our chosen tile set
|
|
render && render.freeCanvas();
|
|
render = ltjs.MapRender( ctxmap, tile_set );
|
|
|
|
var lvlsel = document.getElementById( 'lvl_id' ),
|
|
count = map_set.getMapCount();
|
|
|
|
lvlsel.innerHTML = '';
|
|
for ( var i = 1; i <= count; i++ )
|
|
{
|
|
var option = document.createElement( 'option' );
|
|
option.value = i;
|
|
option.innerHTML = i;
|
|
|
|
lvlsel.appendChild( option );
|
|
}
|
|
|
|
lvlsel.onchange = lvlchange;
|
|
|
|
function lvlchange()
|
|
{
|
|
var map = map_set.getMapByNumber( lvlsel.selectedIndex + 1 );
|
|
render.render( map );
|
|
|
|
document.getElementById( 'lvl_name' ).innerHTML =
|
|
map.getMapName();
|
|
document.getElementById( 'lvl_author' ).innerHTML =
|
|
map.getMapAuthor();
|
|
document.getElementById( 'lvl_diff' ).innerHTML =
|
|
map.getMapDifficulty();
|
|
document.getElementById( 'lvl_hint' ).innerHTML =
|
|
map.getMapHint();
|
|
};
|
|
|
|
lvlchange();
|
|
};
|
|
|
|
reader.readAsBinaryString( file );
|
|
}
|
|
|
|
// invoke immediately, as we may have a filename prefilled from a refresh
|
|
ltgChange();
|
|
</script>
|
|
<script src="../scripts/main.js"></script>
|
|
<script src="../lib/TileDfn.js"></script>
|
|
<script src="../lib/ClassicTileDfn.js"></script>
|
|
<script src="../lib/LtgLoader.js"></script>
|
|
<script src="../lib/TileMasker.js"></script>
|
|
<script src="../lib/MapSet.js"></script>
|
|
<script src="../lib/Map.js"></script>
|
|
<script src="../lib/ClassicMap.js"></script>
|
|
<script src="../lib/MapRender.js"></script>
|
|
</body>
|
|
</html>
|