Troubleshooting base64 tiled data using javascript

Question

I use tiled to create a tile map. (Tiled - tile map editor with support for orthogonal and isometric maps)

Saves the map in an XML file. It can use certain coding structures:

• plain base64
• base64 + gzip
• base64 + zlib
• regular csv

Now I completely abandoned gzip (my gzips server traces it anyway, so there are no losses) So I thought that I would try normal base64 decoding using the jQuery base64 plugin

But the data is output to all distorted ones, for example:

I assume this is binary coding, but how do I get around this?

Example data that needs to be decoded (regular base64):

 jQAAAI4AAACPAAAAkAAAAJEAAACSAAAAkwAAAKEAAACiAAAAowAAAKQAAAClAAAApgAAAKcAAAA= 

Example data to decode (gzipped base64):

 H4sIAAAAAAAACw3DhwnAMAwAMP8P2Rdk9s1KoBQR2WK12R1Ol9vj9fn5A/luZ4Y4AAAA 

Example csv data:

 141,142,143,144,145,146,147, 161,162,163,164,165,166,167 

So how can I rotate a regular base64 encoded bit and turn it into csv?

Edit:

Using Pointy found's solution, I got a semi-reflex array. However, after several thousand characters, two numbers will be erroneous. And even more often after that.

Then I found a man who also used tiled and base64 encoding in his circuit. After he decrypted the array, he also did this with it:

  var d = base64_decode($(this).find('data').text()); var e = new Array(); for (var i = 0; i <= d.length; i += 4) { var f = d[i] | d[i + 1] << 8 | d[i + 2] << 16 | d[i + 3] << 24; e.push(f) } 

I have no idea why this is necessary, but at least it works. If anyone can explain, please do it!

Answer 1

Try looking at the character of the returned string by character. In other words, get "charCodeAt" for each character in the array.

 function codesFromString(str) { var rv = []; for (var i = 0; i < str.length; ++i) rv.push(str.charCodeAt(i)); } return rv; } 

This leaves you with an array of numbers. If you want to unload this as a CSV on a page or something else, you can use join ()

 var csv = codeFromString(decoded).join(','); 

edit - ok here is the base64 numeric decoder:

  var base64chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'.split(""); var base64inv = {}; for (var i = 0; i < base64chars.length; i++) { base64inv[base64chars[i]] = i; } function decodeNumeric(s) { s = s.replace(new RegExp('[^'+base64chars.join("")+'=]', 'g'), ""); var p = (s.charAt(s.length-1) == '=' ? (s.charAt(s.length-2) == '=' ? 'AA' : 'A') : ""); var r = []; s = s.substr(0, s.length - p.length) + p; for (var c = 0; c < s.length; c += 4) { var n = (base64inv[s.charAt(c)] << 18) + (base64inv[s.charAt(c+1)] << 12) + (base64inv[s.charAt(c+2)] << 6) + base64inv[s.charAt(c+3)]; r.push((n >>> 16) & 255); r.push((n >>> 8) & 255); r.push(n & 255); } return r; } 

This works on your sample, but demonstrates that what you wrote as a result is actually incorrect. Instead of “141,142,143, ...” it’s “141,0,0,0,142,0,0,0,143,0,0,0”, etc. What is that "AAA" in the encoded string.

(code stolen from http://en.wikibooks.org/wiki/Algorithm_Implementation/Miscellaneous/Base64 )

Answer 2

old topic, I know, but the answer to your last question is here: http://sourceforge.net/apps/mediawiki/tiled/index.php?title=Examining_the_map_format .