JavaScript - Dividir una imagen de juego de fichas que se almacena en matriz 2D de imágenes()

Digamos que tengo esta imagen:JavaScript - Dividir una imagen de juego de fichas que se almacena en matriz 2D de imágenes()

enter image description here

y tengo esta matriz 2D tiles[] .. y el uso de la función Image() ... ¿Cómo puedo usar el (lo que supongo que es la mejor manera) for bucle para agregar cada azulejo en el array así tile[0] a pesar de que hay muchos que se leen y utilizan como objetos Image() que luego se pintarán en el lienzo de HTML5?

Fuente

2012-07-18 nn2

Tienes que saber cuántos píxeles de ancho y alto tiene cada cuadrado – jeschafe

32x32 ...? Un azulejo básico. – nn2

Pixels..32 píxeles – nn2

lo haría ..

averiguar cuántas baldosas de ancho y alto esta imagen es
dibujar la imagen de un lienzo en memoria, y usa el contexto para obtener datos de imagen.
Extiende y subimagen cada mosaico, almacenándolo en una matriz.

Suponiendo:

imageWidth, imageHeight, tileWidth, tileHeight

Todos describen lo que sugieren sus nombres, y:

EDIT: Añadido carga de la imagen de acuerdo con comentarios, fijado erróneamente nombrar ImageWidth y ImageHeight a imageWidth y imageHeight

EDIT: Código de realización dentro de imageObj.onload como la imagen se dibuja aquí, drawImage() desde el origen (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);

Luego, dividir la imagen en una lista de datos de baldosas ..

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); 
    }

Fuente

2012-07-18 03:53:20 Aesthete

¿Qué hay de la imagen de los tileset para cargar? – nn2

Ver ediciones. Cargue una imagen en un elemento canvas y use su contexto desde allí. ¿Esta pregunta lo cuestionas? – Aesthete

¿Has probado esto? No funciona – nn2

Estoy en mi iPad, por lo que no se puede obtener fácilmente un ejemplo, pero si no se opone a una biblioteca echa un vistazo a EaselJs. Tiene spritesheets que va a hacer lo que quiere ..

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

Fuente

2012-07-18 03:46:12

Acepto, easelJS tiene una spritesheeting nativa muy fácil de aprender. solo cargue una imagen, envíe los tamaños de los mosaicos como parámetros, y obtendrá una matriz sencilla de cuadros para dividirlos en imágenes o dejarlos como una matriz. – Rodik

bien lo hice esto en mi servidor local: debería darte una base al menos. Creo que deberías poder usar esto directamente, pero quizás debas hacer algunos ajustes de cálculo dependiendo de lo que desees. Simplemente no creo que sea necesario pasar el tiempo para perfeccionarlo en su ejemplo:

Obviamente deberá apuntar la imagen a su propia imagen.

<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>

Fuente

2012-07-18 06:45:01 jeschafe

JavaScript - Dividir una imagen de juego de fichas que se almacena en matriz 2D de imágenes()

Respuesta

Cuestiones relacionadas