Now when I say binary, I mean ghjkl54╞←‼╝454┴ and not 10101110.
I wanna load a tilemap in JavaScript, but I don't want to rewrite my map editor, written in Java, which exports maps as binary files. So I was wondering, if it's possible, how would I do this?
Also, if it isn't possible, should I read a tilemap structure where I only have [width][height][tilenum],[[tilenum2], tilenum3],...]?
Yes, using the HTML5 File API you can read a file's contents. Note that this is not yet supported in all browsers.
By using a FileReader and using readAsBinaryString, you can get those characters: http://jsfiddle.net/S4mEv/3/.
// bind a <input type="file">'s onchange event to a function
// (does not require jQuery, just for convenience here)
$('#file').change(function() {
var fr = new FileReader; // create a file reader
fr.onloadend = function() { // when reading has finished
alert(fr.result); // alert the contents
};
fr.readAsBinaryString(this.files[0]); // start reading
});
The problem is not very clear to me, do you need help with actually getting a file into javascript binary string or reading a file that is already in javascript binary string format? If latter, maybe my answer could help.
I have made and used a class in javascript for these operations that works like this:
//binaryString = result from readAsBinaryString
var tileReader = new ByteReader( binaryString ), doubles = [];
while( !tileReader.EOF() ) {
doubles.push( tileReader.readDouble() );
} //Read the whole file as big endian doubles
The class:
function ByteReader( bytedata ) {
this._data = bytedata || "";
this._offset = 0;
}
ByteReader.prototype = {
constructor: ByteReader,
EOF: function(){
return this._offset >= this._data.length;
},
tellSize: function(){
return this._data.length;
},
seekTo: function( offset ){
this._offset = offset;
return this;
},
rewind: function() {
this._offset = 0;
return this;
},
readBytes: function( bytes ) {
var s = this._data.substr( this._offset, bytes );
this._offset += bytes;
return s;
},
setByteStream: function( data ) {
if( typeof data != "string" )
throw new TypeError( typeof data + " must be string" );
this._data = data;
this._offset = 0;
return this;
},
readDouble: function( littleEndian ) {
var s = this.readBytes( 8 );
var pow = Math.pow, sign, exponent, fraction;
if( littleEndian )
s = s.split("").reverse().join("");
sign = ( s.charCodeAt(0) & 0x80 ) >> 7;
exponent = ( ( s.charCodeAt(0) & 0x7F ) << 4 ) | ( ( s.charCodeAt(1) & 0xF0 ) >> 4 );
fraction = ( ( s.charCodeAt(1) & 0x0F ) * pow(2, 48) ) +
s.charCodeAt(2) * pow( 2, 40 ) +
s.charCodeAt(3) * pow( 2, 32 ) +
( ( s.charCodeAt(4) & 0xFF ) << 24 ) +
( ( s.charCodeAt(5) & 0xFF ) << 16 ) +
( ( s.charCodeAt(6) & 0xFF ) << 8 ) +
s.charCodeAt(7);
sign = pow( -1, sign );
if( exponent === 2047 ) {
if( f !== 0)
return Number.NaN;
else if( sign < 0 )
return -Infinity;
else
return Infinity;
}
else if( exponent > 0 )
return sign * Math.pow( 2, exponent - 1023 ) * ( fraction / 0x10000000000000 + 1 );
else if ( fraction !== 0 )
return sign * Math.pow( 2, -1022 ) * ( fraction / 0x10000000000000 );
else
return 0;
},
readSingle: function( littleEndian ) {
var s = this.readBytes( 4 )
var sign, exponent, fraction;
if( littleEndian )
s = s.split("").reverse().join("");
sign = ( s.charCodeAt(0) & 0x80 ) >> 7;
exponent = ( ( s.charCodeAt(0) & 0x7F ) << 1 ) | ( ( s.charCodeAt(1) & 0x80 ) >> 7 );
fraction = ( ( s.charCodeAt(1) & 0x7F ) << 16 ) |
( ( s.charCodeAt(2) & 0xFF ) << 8 ) |
( s.charCodeAt(3) & 0xFF );
sign = Math.pow( -1, sign );
if( exponent === 255 ) {
if( fraction !== 0 )
return Number.Nan;
else if( sign < 0 )
return -Infinity;
else
return Infinity;
}
else if( exponent > 0 )
return sign * Math.pow(2, exponent - 127) * ( fraction / 0x800000 + 1 );
else if ( fraction !== 0 )
return sign * Math.pow(2, -126) * ( fraction / 0x800000 );
else
return 0;
},
readSByte: function() {
var s = this.readBytes( 1 ).charCodeAt( 0 ) & 0xFF;
return ( s ^ 0x80 ) - 0x80;
},
readUByte: function() {
return this.readBytes( 1 ).charCodeAt( 0 ) & 0xFF;
},
readUShort: function( littleEndian ) {
var s = this.readBytes( 2 );
if( littleEndian )
return ( s.charCodeAt( 0 ) & 0xFF ) |
( ( s.charCodeAt( 1 ) & 0xFF) << 8 );
else
return ( s.charCodeAt( 1 ) & 0xFF ) |
( ( s.charCodeAt( 0 ) & 0xFF) << 8 );
},
readULong: function( littleEndian ) {
var s = this.readBytes( 4 ), r;
if( littleEndian )
r = ( s.charCodeAt( 0 ) & 0xFF ) |
( ( s.charCodeAt( 1 ) & 0xFF ) << 8 ) |
( ( s.charCodeAt( 2 ) & 0xFF ) << 16 ) |
( ( s.charCodeAt( 3 ) & 0xFF ) << 24 );
else
r = ( s.charCodeAt( 3 ) & 0xFF ) |
( ( s.charCodeAt( 2 ) & 0xFF ) << 8 ) |
( ( s.charCodeAt( 1 ) & 0xFF ) << 16 ) |
( ( s.charCodeAt( 0 ) & 0xFF ) << 24 );
if ( r & 0x80000000 )
r = ( r & 0x7FFFFFFF ) + 0x80000000;
return r;
},
readSShort: function( littleEndian ){
var s = this.readBytes( 2 ), r;
if( littleEndian )
r = ( s.charCodeAt( 0 ) & 0xFF ) |
( ( s.charCodeAt( 1 ) & 0xFF) << 8 );
else
r = ( s.charCodeAt( 1 ) & 0xFF ) |
( ( s.charCodeAt( 0 ) & 0xFF) << 8 );
return ( r ^ 0x8000 ) - 0x8000;
},
readSLong: function( littleEndian ){
var s = this.readBytes( 4 ), r;
if( littleEndian )
return ( s.charCodeAt( 0 ) & 0xFF ) |
( ( s.charCodeAt( 1 ) & 0xFF ) << 8 ) |
( ( s.charCodeAt( 2 ) & 0xFF ) << 16 ) |
( ( s.charCodeAt( 3 ) & 0xFF ) << 24 );
else
return ( s.charCodeAt( 3 ) & 0xFF ) |
( ( s.charCodeAt( 2 ) & 0xFF ) << 8 ) |
( ( s.charCodeAt( 1 ) & 0xFF ) << 16 ) |
( ( s.charCodeAt( 0 ) & 0xFF ) << 24 );
}
};
Has been tested with .wav files a lot.
