javascript array problem [solved]

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|531\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Web Development -> javascript array problem [solved]
Fri, 17 Jul 2020, 06:30
spinal	javascript array problem [solved] Having looked around, I could not find a version of maprecon (you know it, its a tile map creator) with some extra features I want, so I made a start at my own version in javascript. However, I seem to be having trouble comparing two arrays. The code first creates an array from an 8x8 block of the loaded image, then compares it with the current collection of tiles. But when I output the current comparison to the console, it seems that no matter what I do, the tile array is always exactly the same as whatever array I check, which as we know is completely impossible. Is anyone able to see if I have a typo somewhere, or other stupid mistake? I'm pulling my hair out here. The conversion is triggered when you load a ong with the 'choose file' button and it will only check the first 8 tiles, no need to check more when it doesn't even work... <html> <title>Map reConstructor</title> <style type="text/css"> #progressbarOuter{ display: block; border: 2px solid gray; color: gray; background-color: white; border-radius: 8px; font-size: 20px; font-weight: bold; width:204px; height:40px; position:relative; } #progressbarOuter span{ display:block; text-align:center; width:100%; position:absolute; z-index:2; top:0; left:0; line-height:36px; } #progressbarInner{ border: 0px solid gray; color: #000; background-color: #88f; border-radius: 3px; font-size: 20px; font-weight: bold; width:0px; height:36px; text-align: center; position:relative; z-index:1; padding:2px; } .custom-file-input { display: block; } .custom-file-input input { visibility: hidden; width: 100px; } .custom-file-input:before { width:148px; content: 'Choose File'; display: block; border: 2px solid gray; color: gray; background-color: white; padding: 8px 12px 8px 44px; border-radius: 8px; font-size: 20px; font-weight: bold; background-size: 30px auto; background-position: 3px center; background-repeat:no-repeat; } .button { display: block; width:208px; border: 2px solid gray; color: gray; background-color: white; padding: 8px 44px 8px 44px; border-radius: 8px; font-size: 20px; font-weight: bold; } text area { white-space: nowrap; overflow: auto; } :focus { outline: none; } </style> <script> //var inArray; var myPalette = new Array(); var tileArray = new Array(); var tileWidth = 8; var tileHeight = 8; function init() { document.getElementById('files').addEventListener('change', handleFileSelect, false); } function decToHex(buffer) { var s = '', h = '0123456789ABCDEF'; s = h[buffer >> 4] + h[buffer & 15]; return '0x' + s; } function checkColour(rgb565){ var al = myPalette.length; for(t=0; t<al; t++){ if(rgb565 == myPalette[t]) return t; } myPalette[t] = rgb565; return t; } function checkTile(thisArray){ var doesThisMatch = true; console.log("Checking:", thisArray); // create first tile if new console.log("Tiles in array", tileArray.length); if(tileArray.length==0){ tileArray[0] = new Array(); tileArray[0] = thisArray; console.log("First tile added"); console.log("Tiles in array", tileArray.length); }else{ for(t=0; t<tileArray.length; t++){ doesThisMatch = true; for(y=0; y<tileHeight; y++){ if(doesThisMatch == false){ console.log("break: Y"); break; } for(x=0; x<tileWidth; x++){ if(doesThisMatch == false){ console.log("break: X"); break; } console.log("test: ", tileArray[t][x+tileWidthy], thisArray[x+tileWidthy]); if(tileArray[t][x+tileWidthy] != thisArray[x+tileWidthy]){ doesThisMatch = false; console.log("pixel different"); } } } console.log("doesThisMatch: ", doesThisMatch); if(doesThisMatch == false){ //tileArray.concat(thisArray); // console.log("Added: ", tileArray.length); // console.log("Added: ", tileArray[tileArray.length-1]); }else{ // console.log("Match: ", t); // console.log("tile:", thisArray); // console.log("match:", tileArray[t]); } } } for(t=0; t<tileArray.length; t++){ txt.value += tileArray[t]; txt.value += '\n'; } } function handleFileSelect(evt) { var img = document.getElementById("myImg"); txt = document.getElementById("theOutput"); var canvas = document.createElement("canvas"); var ctx = canvas.getContext('2d'); var currentTile = 0; var files = evt.target.files var tempArray = new Array(); img.onload = function() { for(x1=0; x1<8; x1++){ ctx.drawImage(img, -x18, 0); for(y=0; y<8; y++){ for(x=0; x<8; x++){ var red = ctx.getImageData(x, y, 1, 1).data[0]; var green = ctx.getImageData(x, y, 1, 1).data[1]; var blue = ctx.getImageData(x, y, 1, 1).data[2]; var b = (blue >> 3) & 0x1f; var g = ((green >> 2) & 0x3f);// << 5; var r = ((red >> 3) & 0x1f);// << 11; var rgb565 = (r<<11) \| (g<<5) \| b; // tile data is made up of unique colour list, palette not really used at this point. tempArray[x+tileWidth*y] = checkColour(rgb565); //txt.value += checkColour(rgb565); //txt.value += ', '; } //txt.value += '\n'; } checkTile(tempArray); // console.clear(); // console.log("", x1); txt.value += '\n'; } txt.value += '\n'; txt.value += '\n'; txt.value += 'Palette565 \n'; for(t=0; t<myPalette.length; t++){ txt.value += myPalette[t]; txt.value += '\n'; } }; if (this.files && this.files[0]) { var reader = new FileReader(); reader.onload = function (e) { img.src = e.target.result; } reader.readAsDataURL(this.files[0]); } } function copyCode(){ txt = document.getElementById("theOutput"); txt.select(); try{ return document.execCommand("copy"); // Security exception may be thrown by some browsers. } catch (ex) { console.warn("Copy to clipboard failed.", ex); return false; } } </script> <body onload="init()"> <h1>Image to map convertor</h1> <span>Input file image</span><br/><br/> <label class="custom-file-input"> <input id="files" type="file" accept=".png"> </label> <img id="myImg"></img><br/><br/> <button onclick="reSample=0; DoConversion();return false;" class="button">Convert</button><br/> <div id="progressbarOuter"><span id="percentage">0%</span><div id="progressbarInner"></div></div><br/> <button onclick="copyCode();return false;" class="button">Copy Code</button><br/> <text area id="theOutput" name="theOutput" rows="25" cols="120"></text area> </body></html> --v -=-=- Check out my excellent homepage!
Fri, 17 Jul 2020, 06:43
spinal	In fact, changing the checking routine to only the following function checkTile(thisArray){ console.log("tileArray.length", tileArray.length); if(tileArray.length==0){ tileArray[0] = new Array(); tileArray[0] = thisArray; console.log("First tile added"); }else{ console.log("No need to add tile"); } console.log("Checking:", thisArray); console.log("TA :", tileArray[0]); } --v Shows that tileArray[0] for some reason is ALWAYS whatever is being passed to the function... I don't get it. -=-=- Check out my excellent homepage!
Fri, 17 Jul 2020, 06:51
spinal	dammit, it's a pointer. function checkTile(thisArray){ console.log("tileArray.length", tileArray.length); if(tileArray.length==0){ tileArray[0] = new Array(); for (i = 0; i < thisArray.length; i++) { tileArray[0][i] = thisArray[i]; } console.log("First tile added"); }else{ console.log("No need to add tile"); } console.log("Checking:", thisArray); console.log("TA :", tileArray[0]); } --v It was turning the tile array into a pointer to the new array and it stayed that way. so reading it always just showed the other. -=-=- Check out my excellent homepage!
Fri, 17 Jul 2020, 07:14
Jayenkai	Javascript can be a right pain sometimes. I often fall for the "is x a value? .. 'Yes!' .. What is x's value? ... 'Undefined!'.. " pitfall Double and triple check everything, and be sure to make good use of the dev-console, too. I used to find Microsoft Edge to be great for debugging, but since they redid it using Chromium, it seems like they lost a lot of the quirks that showed up some of my bugs! -=-=- ''Load, Next List!''
Fri, 17 Jul 2020, 07:31
spinal	Something else is odd now after expanding the checking to the full width of the image and just a few rows, it seems to no find matches from the previous row! so each new row starts adding new tiles, even though some of them should match \|edit\| caught that one too now to test the full size image, I'm expecting a little over 1200 tiles from the example image I'm using... Result = 1210 tiles in image, mapRecon gave 1216 tiles for the same image! Difference could be because I reduce the palette to 565 from 888 before checking, which would result in similar colours being removed. Also, mapRecon did it a LOT faster -=-=- Check out my excellent homepage!
Fri, 17 Jul 2020, 07:50
Jayenkai	Just a minor tweak... When you're comparing the tile, you're doing a y loop, an x loop, and a bit of maths for every element. (X+width*y) Instead, you can do a single n=0;n<length of array;n++ loop, which reduces the number of loops, and also means you needn't do that little bit of maths several hundred-thousand times. -=-=- ''Load, Next List!''
Fri, 17 Jul 2020, 08:07
spinal	good point! Now I just need an async progress bar so I can tell something is happening in the couple of minutes the screen is frozen -=-=- Check out my excellent homepage!
Fri, 17 Jul 2020, 08:33
spinal	Although, that might get in the way of the extra feature I want... checking for flipped tiles... -=-=- Check out my excellent homepage!
Fri, 17 Jul 2020, 09:09
Jayenkai	Aaah, yeah.. Bugger!
Wed, 22 Jul 2020, 04:03
spinal	hmmm, I seem to be generating valid tiles and map, including flipped tiles (probably, not fully tested with my renderer) but I seem to be messing up on my flip array <html> <title>Map reConstructor</title> <style type="text/css"> #progressbarOuter{ display: block; border: 2px solid gray; color: gray; background-color: white; border-radius: 8px; font-size: 20px; font-weight: bold; width:204px; height:40px; position:relative; } #progressbarOuter span{ display:block; text-align:center; width:100%; position:absolute; z-index:2; top:0; left:0; line-height:36px; } #progressbarInner{border: 0px solid gray; color: #000; background-color: #88f; border-radius: 3px; font-size: 20px; font-weight: bold; width:0px; height:36px; text-align: center; position:relative; z-index:1; padding:2px; } .custom-file-input { display: block; } .custom-file-input input { visibility: hidden; width: 100px; } .custom-file-input:before {width:148px; content: 'Choose File'; display: block; border: 2px solid gray; color: gray; background-color: white; padding: 8px 12px 8px 44px; border-radius: 8px; font-size: 20px; font-weight: bold; background-size: 30px auto; background-position: 3px center; background-repeat:no-repeat; } .button { display: block; width:208px; border: 2px solid gray; color: gray; background-color: white; padding: 8px 44px 8px 44px; border-radius: 8px; font-size: 20px; font-weight: bold; } text area { white-space: nowrap; overflow: auto; } select { display: inline-block; border: 2px solid gray; color: gray; background-color: white; padding: 8px; border-radius: 8px; font-size: 20px; font-weight: bold; } :focus { outline: none; } </style> <script> //var inArray; var myPalette = new Array(); var tileArray = new Array(); var tileMap = new Array(); var currentTile = 0; var tileWidth = 8; var tileHeight = 8; function init() { document.getElementById('files').addEventListener('change', handleFileSelect, false); var twidth = document.getElementById("twidth"); var theight = document.getElementById("theight"); for(var i=1; i<=64; i++){ var option = document.createElement("OPTION"); twidth.options.add(option); option.text = i; option.value = i; } for(var i=1; i<=64; i++){ var option = document.createElement("OPTION"); theight.options.add(option); option.text = i; option.value = i; } twidth.value = 8; theight.value = 8; } function decToHex(buffer) { var s = '', h = '0123456789ABCDEF'; s = h[buffer >> 4] + h[buffer & 15]; return '0x' + s; } function checkColour(rgb565){ var al = myPalette.length; for(t=0; t<al; t++){ if(rgb565 == myPalette[t]) return t; } myPalette[t] = rgb565; return t; } function checkTile(thisArray){ var doesThisMatch = true; var tileNum = -1; // create first tile if new if(tileArray.length==0){ tileArray[0] = new Array(); for (i = 0; i < thisArray.length; i++) { tileArray[0][i] = thisArray[i]; } tileMap[currentTile++] = 0; tileNum = 0; }else{ var numPixels = tileWidthtileHeight; for(t=0; t<tileArray.length; t++){ doesThisMatch = true; // array1.every(function(element, index) { return element === array2[index]; }); for(i=0; i<numPixels; i++){ if(doesThisMatch == false) break; if(tileArray[t][i] != thisArray[i]){ doesThisMatch = false; } } if(doesThisMatch == true){ tileNum = t; } } } return tileNum; } function convertImage(){ var img = document.getElementById("myImg"); txt = document.getElementById("theOutput"); var canvas = document.createElement("canvas"); var ctx = canvas.getContext('2d'); var currentTile = 0; var tempArray = new Array(); var tempArrayFlip = new Array(); var flipArray = new Array(); tileWidth = document.getElementById("twidth").value; tileHeight = document.getElementById("theight").value; //console.log(tileWidth); var mapWidth = img.width/tileWidth; var mapHeight = img.height/tileHeight; var totalTiles = mapWidth * mapHeight; var tileCount = 0; var y1=0; var x1=0; // use an asyc loop so that the UI doesn't freeze. (function loop(){ ctx.drawImage(img, -x1tileWidth, -y1tileHeight); for(y=0; y<tileHeight; y++){ for(x=0; x<tileWidth; x++){ var red = ctx.getImageData(x, y, 1, 1).data[0]; var green = ctx.getImageData(x, y, 1, 1).data[1]; var blue = ctx.getImageData(x, y, 1, 1).data[2]; var b = (blue >> 3) & 0x1f; var g = ((green >> 2) & 0x3f);// << 5; var r = ((red >> 3) & 0x1f);// << 11; var rgb565 = (r<<11) \| (g<<5) \| b; // Create a tile from the palette data var colour = checkColour(rgb565); tempArray[x+tileWidthy] = colour; tempArrayFlip[(tileWidth-x-1)+tileWidthy] = colour; } } /* var s=0; for(y=0; y<tileHeight; y++){ for(x=0; x<tileWidth; x++){ txt.value += tempArray[s++]; txt.value += ','; } txt.value += '\n'; } var s=0; for(y=0; y<tileHeight; y++){ for(x=0; x<tileWidth; x++){ txt.value += tempArrayFlip[s++]; txt.value += ','; } txt.value += '\n'; } / flipArray[currentTile]=0; //if(currentTile==0) flipArray[currentTile]=0; var result = checkTile(tempArrayFlip); // if result == -1 then nothing found, try flipped if(result == -1){ result = checkTile(tempArray); } // if still no result, create tile if(result == -1){ var p = tileArray.length; tileArray[p] = new Array(); for (i = 0; i < tempArray.length; i++) { tileArray[p][i] = tempArray[i]; } result = p; }else{ flipArray[currentTile]=1; } tileMap[currentTile++] = result; tileCount++; if(++x1==mapWidth){ x1=0; y1++; } if(tileCount < totalTiles){ var container = document.getElementById("progressbarInner"); container.style.width = (200/totalTiles) tileCount; container = document.getElementById("percentage"); container.innerHTML = Math.floor((100/totalTiles) * tileCount) + '%'; setTimeout(loop, 0); }else{ // Palette data txt.value += '//Total colors '; txt.value += myPalette.length; txt.value += '\n'; txt.value += 'const uint16_t palette[] = {\n'; for(t=0; t<myPalette.length; t++){ txt.value += myPalette[t]; if(t < myPalette.length-1){ txt.value += ', '; }else{ txt.value += '\n'; } } txt.value += '};\n\n'; // Tile data txt.value += '//Tile Data \n//'; txt.value += tileArray.length; txt.value += ' Tiles \nconst uint8_t tiles[]={\n'; for(t=0; t<tileArray.length; t++){ txt.value += tileArray[t]; txt.value += ',\n'; } txt.value += '};\n\n'; // Map data txt.value += '//Map Data \n'; txt.value += 'const uint16_t map[]={\n'; txt.value += mapWidth; txt.value += ', '; txt.value += mapHeight; txt.value += ',\n'; for(t=0; t<tileMap.length; t++){ txt.value += tileMap[t]; txt.value += ', '; if((t+1)%mapWidth==0){ txt.value += '\n'; } } txt.value += '};\n\n'; // Flip data txt.value += '//Flip Data \n'; txt.value += 'const uint8_t flip[]={\n'; for(t=0; t<tileMap.length; t++){ txt.value += flipArray[t]; txt.value += ', '; if((t+1)%mapWidth==0){ txt.value += '\n'; } } txt.value += '};\n\n'; } })(); } function handleFileSelect(evt) { if (this.files && this.files[0]) { var reader = new FileReader(); reader.onload = function (e) { var img = document.getElementById("myImg"); img.src = e.target.result; } reader.readAsDataURL(this.files[0]); } } function copyCode(){ txt = document.getElementById("theOutput"); txt.select(); try{ return document.execCommand("copy"); // Security exception may be thrown by some browsers. } catch (ex) { console.warn("Copy to clipboard failed.", ex); return false; } } </script> <body onload="init()"> <h1>Image to map convertor</h1> <label class="custom-file-input"> <input id="files" type="file" accept=".png"> </label> <img id="myImg"></img><br/> <select id="twidth"></select> Tile Width<br/><br/> <select id="theight"></select> Tile Height<br/><br/> <button onclick="reSample=0; convertImage();return false;" class="button">Convert</button><br/> <div id="progressbarOuter"><span id="percentage">0%</span><div id="progressbarInner"></div></div><br/> <text area id="theOutput" name="theOutput" rows="25" cols="120"></text area><br/><br/> <button onclick="copyCode();return false;" class="button">Copy Code</button><br/> </body></html> --v There is defiantly less tiles being generated, which suggests that its finding flipped versions of the tiles. However I think I'm recording the flip-ness wrong... \|edit\| I think I fixed it... <html> <title>Map reConstructor</title> <style type="text/css"> #progressbarOuter{ display: block; border: 2px solid gray; color: gray; background-color: white; border-radius: 8px; font-size: 20px; font-weight: bold; width:204px; height:40px; position:relative; } #progressbarOuter span{ display:block; text-align:center; width:100%; position:absolute; z-index:2; top:0; left:0; line-height:36px; } #progressbarInner{border: 0px solid gray; color: #000; background-color: #88f; border-radius: 3px; font-size: 20px; font-weight: bold; width:0px; height:36px; text-align: center; position:relative; z-index:1; padding:2px; } .custom-file-input { display: block; } .custom-file-input input { visibility: hidden; width: 100px; } .custom-file-input:before {width:148px; content: 'Choose File'; display: block; border: 2px solid gray; color: gray; background-color: white; padding: 8px 12px 8px 44px; border-radius: 8px; font-size: 20px; font-weight: bold; background-size: 30px auto; background-position: 3px center; background-repeat:no-repeat; } .button { display: block; width:208px; border: 2px solid gray; color: gray; background-color: white; padding: 8px 44px 8px 44px; border-radius: 8px; font-size: 20px; font-weight: bold; } text area { white-space: nowrap; overflow: auto; } select { display: inline-block; border: 2px solid gray; color: gray; background-color: white; padding: 8px; border-radius: 8px; font-size: 20px; font-weight: bold; } :focus { outline: none; } </style> <script> //var inArray; var myPalette = new Array(); var tileArray = new Array(); var tileMap = new Array(); var currentTile = 0; var tileWidth = 8; var tileHeight = 8; function init() { document.getElementById('files').addEventListener('change', handleFileSelect, false); var twidth = document.getElementById("twidth"); var theight = document.getElementById("theight"); for(var i=1; i<=64; i++){ var option = document.createElement("OPTION"); twidth.options.add(option); option.text = i; option.value = i; } for(var i=1; i<=64; i++){ var option = document.createElement("OPTION"); theight.options.add(option); option.text = i; option.value = i; } twidth.value = 8; theight.value = 8; } function decToHex(buffer) { var s = '', h = '0123456789ABCDEF'; s = h[buffer >> 4] + h[buffer & 15]; return '0x' + s; } function checkColour(rgb565){ var al = myPalette.length; for(t=0; t<al; t++){ if(rgb565 == myPalette[t]) return t; } myPalette[t] = rgb565; return t; } function checkTile(thisArray){ var doesThisMatch = true; var tileNum = -1; // create first tile if new if(tileArray.length==0){ tileArray[0] = new Array(); for (i = 0; i < thisArray.length; i++) { tileArray[0][i] = thisArray[i]; } tileMap[currentTile++] = 0; tileNum = 0; }else{ var numPixels = tileWidthtileHeight; for(t=0; t<tileArray.length; t++){ doesThisMatch = true; // array1.every(function(element, index) { return element === array2[index]; }); for(i=0; i<numPixels; i++){ if(doesThisMatch == false) break; if(tileArray[t][i] != thisArray[i]){ doesThisMatch = false; } } if(doesThisMatch == true){ tileNum = t; } } } return tileNum; } function convertImage(){ var img = document.getElementById("myImg"); txt = document.getElementById("theOutput"); var canvas = document.createElement("canvas"); var ctx = canvas.getContext('2d'); var currentTile = 0; var tempArray = new Array(); var tempArrayFlip = new Array(); var flipArray = new Array(); tileWidth = document.getElementById("twidth").value; tileHeight = document.getElementById("theight").value; //console.log(tileWidth); var mapWidth = img.width/tileWidth; var mapHeight = img.height/tileHeight; var totalTiles = mapWidth * mapHeight; var tileCount = 0; var y1=0; var x1=0; // use an asyc loop so that the UI doesn't freeze. (function loop(){ ctx.drawImage(img, -x1tileWidth, -y1tileHeight); for(y=0; y<tileHeight; y++){ for(x=0; x<tileWidth; x++){ var red = ctx.getImageData(x, y, 1, 1).data[0]; var green = ctx.getImageData(x, y, 1, 1).data[1]; var blue = ctx.getImageData(x, y, 1, 1).data[2]; var b = (blue >> 3) & 0x1f; var g = ((green >> 2) & 0x3f);// << 5; var r = ((red >> 3) & 0x1f);// << 11; var rgb565 = (r<<11) \| (g<<5) \| b; // Create a tile from the palette data var colour = checkColour(rgb565); tempArray[x+tileWidthy] = colour; tempArrayFlip[(tileWidth-x-1)+tileWidthy] = colour; } } /* var s=0; for(y=0; y<tileHeight; y++){ for(x=0; x<tileWidth; x++){ txt.value += tempArray[s++]; txt.value += ','; } txt.value += '\n'; } var s=0; for(y=0; y<tileHeight; y++){ for(x=0; x<tileWidth; x++){ txt.value += tempArrayFlip[s++]; txt.value += ','; } txt.value += '\n'; } / flipArray[currentTile]=0; //if(currentTile==0) flipArray[currentTile]=0; var result = checkTile(tempArrayFlip); // if result == -1 then nothing found, try flipped if(result == -1){ result = checkTile(tempArray); }else{ flipArray[currentTile]=1; } // if still no result, create tile if(result == -1){ var p = tileArray.length; tileArray[p] = new Array(); for (i = 0; i < tempArray.length; i++) { tileArray[p][i] = tempArray[i]; } result = p; flipArray[currentTile]=0; } tileMap[currentTile++] = result; tileCount++; if(++x1==mapWidth){ x1=0; y1++; } if(tileCount < totalTiles){ var container = document.getElementById("progressbarInner"); container.style.width = (200/totalTiles) tileCount; container = document.getElementById("percentage"); container.innerHTML = Math.floor((100/totalTiles) * tileCount) + '%'; setTimeout(loop, 0); }else{ txt.value=''; // Palette data txt.value += '//Total colors '; txt.value += myPalette.length; txt.value += '\n'; txt.value += 'const uint16_t palette[] = {\n'; for(t=0; t<myPalette.length; t++){ txt.value += myPalette[t]; if(t < myPalette.length-1){ txt.value += ', '; }else{ txt.value += '\n'; } } txt.value += '};\n\n'; // Tile data txt.value += '//Tile Data \n//'; txt.value += tileArray.length; txt.value += ' Tiles \nconst uint8_t tiles[]={\n'; for(t=0; t<tileArray.length; t++){ txt.value += tileArray[t]; txt.value += ',\n'; } txt.value += '};\n\n'; // Map data txt.value += '//Map Data \n'; txt.value += 'const uint16_t map[]={\n'; txt.value += mapWidth; txt.value += ', '; txt.value += mapHeight; txt.value += ',\n'; for(t=0; t<tileMap.length; t++){ txt.value += tileMap[t]; txt.value += ', '; if((t+1)%mapWidth==0){ txt.value += '\n'; } } txt.value += '};\n\n'; // Flip data txt.value += '//Flip Data \n'; txt.value += 'const uint8_t flip[]={\n'; for(t=0; t<tileMap.length; t++){ txt.value += flipArray[t]; txt.value += ', '; if((t+1)%mapWidth==0){ txt.value += '\n'; } } txt.value += '};\n\n'; } })(); } function handleFileSelect(evt) { if (this.files && this.files[0]) { var reader = new FileReader(); reader.onload = function (e) { var img = document.getElementById("myImg"); img.src = e.target.result; } reader.readAsDataURL(this.files[0]); } } function copyCode(){ txt = document.getElementById("theOutput"); txt.select(); try{ return document.execCommand("copy"); // Security exception may be thrown by some browsers. } catch (ex) { console.warn("Copy to clipboard failed.", ex); return false; } } </script> <body onload="init()"> <h1>Image to map convertor</h1> <label class="custom-file-input"> <input id="files" type="file" accept=".png"> </label> <img id="myImg"></img><br/> <select id="twidth"></select> Tile Width<br/><br/> <select id="theight"></select> Tile Height<br/><br/> <button onclick="reSample=0; convertImage();return false;" class="button">Convert</button><br/> <div id="progressbarOuter"><span id="percentage">0%</span><div id="progressbarInner"></div></div><br/> <text area id="theOutput" name="theOutput" rows="25" cols="120"></text area><br/><br/> <button onclick="copyCode();return false;" class="button">Copy Code</button><br/> </body></html> --v -=-=- Check out my excellent homepage!
Wed, 22 Jul 2020, 04:22
Jayenkai	I'll have to take your word for it!! What's this for, anyway? -=-=- ''Load, Next List!''
Wed, 22 Jul 2020, 05:04
spinal	I basically want a version of maprecon that has the ability to find flipped tiles as well as normal ones I have been playing with tile maps from old games and some of them use flipped tiles. -=-=- Check out my excellent homepage!
Wed, 22 Jul 2020, 05:08
Jayenkai	Aww, thought you had a game in mind.
Wed, 22 Jul 2020, 06:49
spinal	Nah, just curiosity
Wed, 22 Jul 2020, 08:05
spinal	Here is the experiment... https://twitter.com/Spinal_Cord/status/1285899828648644610?s=09 Converted from a level map found online. -=-=- Check out my excellent homepage!
Wed, 22 Jul 2020, 08:31
Jayenkai	Coooooool!!!