JavaScript - Splitting un'immagine di tileset da memorizzare in 2D array di immagine()

Diciamo che avere questa immagine:JavaScript - Splitting un'immagine di tileset da memorizzare in 2D array di immagine()

enter image description here

e ho questo array 2D tiles[] .. e utilizzando la funzione Image() ... come posso utilizzare il ciclo (quello che presumo sia il migliore?) for per aggiungere ogni riquadro nello array in modo da tile[0] attraverso comunque molti sono letti e utilizzati come oggetti Image() in seguito per essere dipinti su tela HTML5?

fonte

2012-07-18 nn2

Devi sapere quanti pixel di larghezza e altezza ogni quadrato è – jeschafe

32x32 ...? Una tessera base. – nn2

Pixel.,32 pixel – nn2

lo farei ..

capire quante piastrelle di larghezza e questa immagine è
disegnare l'immagine di una tela in memoria e utilizzare il contesto per ottenere i dati dell'immagine.
Loop-through e sottoimmagine di ogni riquadro, memorizzato in una matrice.

Assumendo:

imageWidth, imageHeight, tileWidth, tileHeight

Tutti descrivono quali sono i loro nomi suggeriscono, e:

EDIT: Aggiunto carico immagine come da commento, fissato a torto nome ImageWidth e ImageHeight a imageWidth e imageHeight

MODIFICA: Esecuzione del codice all'interno imageObj.onload come l'immagine viene disegnata qui, drawImage() di origine (0,0)

var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 
    var imageObj = new Image(); 
    imageObj.src = "tilesetImageLocationHere"; 

    imageObj.onload = function() { 
    ctx.drawImage(imageObj, 0, 0);

Poi, dividere l'immagine in un elenco di dati di piastrelle ..

var tilesX = imageWidth/tileWidth; 
    var tilesY = imageHeight/tileHeight; 
    var totalTiles = tilesX * tilesY;   
    var tileData = new Array(); 
    for(var i=0; i<tilesY; i++) 
    { 
     for(var j=0; j<tilesX; j++) 
     {   
     // Store the image data of each tile in the array. 
     tileData.push(ctx.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight)); 
     } 
    } 
    //From here you should be able to draw your images back into a canvas like so: 
    ctx.putImageData(tileData[0], x, y); 
    }

fonte

2012-07-18 03:53:20 Aesthete

E per quanto riguarda l'immagine del tileset da caricare? – nn2

Vedere le modifiche. Carica un'immagine in un elemento canvas e usa il suo contesto da lì. Questo ti risponde? – Aesthete

Hai provato questo? Non funziona – nn2

Sono sul mio iPad, quindi non posso ottenere facilmente un esempio, ma se non sei contrario a una libreria, consulta EaselJs. Ha SpriteSheets che faranno quello che vuoi ..

http://www.createjs.com/Docs/EaselJS/SpriteSheet.html

fonte

2012-07-18 03:46:12

Sono d'accordo, easelJS ha uno sprite nativo molto facile da imparare. è sufficiente caricare un'immagine, inviare le dimensioni delle tessere come parametri e ottenere una serie facile di fotogrammi da suddividere in immagini o lasciarla come una matrice. – Rodik

ok ho fatto questo sul mio localhost: dovrebbe darti almeno una base. Penso che dovresti essere in grado di usarlo subito dopo la scatola, ma potresti dover fare qualche aggiustamento di calcolo a seconda di ciò che desideri. Semplicemente non penso che sia necessario passare il tempo per perfezionarlo sul tuo esempio:

Ovviamente dovrai puntare l'immagine sulla tua immagine.

<html> 
    <head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
     var canvas = document.getElementById('fakeCanvas'); 
     var ctx = canvas.getContext('2d'); 
     var img = new Image(); 
     img.src = '/theImage.png'; 
     var tiles = []; 
     var imageTileNumWidth = 23; 
     var imageTileNumHeight = 21; 

img.onload = function(){ 
    var imageWidth = img.width; 
    var imageHeight = img.height; 
    sndCanvasWidth = imageWidth/imageTileNumWidth; 
    sndCanvasHeight = imageHeight/imageTileNumHeight; 
    canvas.width = imageWidth; 
    canvas.height = imageHeight; 
    ctx.drawImage(img,0,0,imageWidth,imageHeight); 
    var sndCanvas = document.getElementById('drawCanvas'); 
    sndCanvas.width=sndCanvasWidth; 
    sndCanvas.height=sndCanvasHeight; 
    var i=0; 
    var j=0; 
    var t=0; 
    for(i=0;i<imageWidth;i+=sndCanvasWidth){ 
     for(j=0;j<imageHeight;j+=sndCanvasHeight){ 
      var myImageData = ctx.getImageData(j,i,sndCanvasWidth,sndCanvasHeight);  
      var ctx2 = sndCanvas.getContext("2d"); 
      ctx2.putImageData(myImageData,0,0); 
      tiles.push(myImageData); 
     } 
    } 
}; 
    }); 
    </script> 
</head> 
    <body> 
    <canvas id="fakeCanvas"></canvas> 
    <canvas id="drawCanvas"></canvas> 
    </body> 
</html>

fonte

2012-07-18 06:45:01 jeschafe

JavaScript - Splitting un'immagine di tileset da memorizzare in 2D array di immagine()

risposta

Problemi correlati