vudú javascript

Deoxys #1 Ago '14

Bueno, llevo con esto semana y pico con esto y no hay manera humana de hacerlo funcionar, a ver si me podéis echar una mano.

Estoy intentando crear algo parecido a tilesets en HTML5 canvas. Ahora estoy cogiendo una imagen al azar y repitiendo, pero la idea en un futuro es coger varias imágenes de una matriz de tiles y/o sprites y usarlas a placer para montar cosas.

La cosa es que lo estoy intentando con dos for anidados tratando las casillas (de 100*100) como si fuera un array bidimensional y no hay manera.

Código aquí (Esperad que acabe de cargar antes de hacer nada, mi conexión es del quinto mundo por lo menos)

Si véis el código, hay una imagen (tile) de 100x100 que aparece en (100,100). La uso de control para ver si las imágenes aparecen o no. En el resto del código tenéis los bucles, que es lo que no funciona. Lo cachondo es que si en el bucle pongo un alert o un print las imágenes aparecen, pero si no pongo nada no aparecen.

He probado mil cosas y la verdad es que no sé qué hacer, más que nada porque no tengo ni la más remota idea de por qué pasa. ¿Alguien podría echarme una mano?

zoeshadow #2 Ago '14

No conozco la api de canvas, así que no te puedo ayudar mucho, pero a primera vista he visto que estás usando una variable del bucle en una función asíncrona ( a en la función que le pasas al onload de la imagen )

La solución más facil es mandar esa variable como parámetro de una función para que se quede el valor "capturado".

En esta solución he hecho que mi función devuelva onImageLoad recibiendo la imagen creada y la variable contador. La función que retorna onImageLoad tiene automáticamente disponibles las variables que tiene por parámetros la función onImageLoad.

  function mentest() {
    for (a = -1; a < 8; a++) {
      ctx.stroke();
      var imageObj = new Image();
      imageObj.src = "./comet.png";
      imageObj.onload = onImageLoad(imageObj, a);

};
  }

  function onImageLoad(imageObj, i){
    return function(){
      console.log(i)
      ctx.drawImage(imageObj,100,100,imageObj.width,imageObj.height,0,0,400,400);
    }
  }

Otra alternativa, más facil de entender pero más "guarra"

  function mentest() {
    for (a = -1; a < 8; a++) {
      ctx.stroke();
      var imageObj = new Image();
      imageObj.src = "./comet.png";
      onImageLoad(imageObj, a)

};
  }

  function onImageLoad(imageObj, i){
    imageObj.onload = function(){
      console.log(i)
      ctx.drawImage(imageObj,100,100,imageObj.width,imageObj.height,0,0,400,400);
    }
  }

RPV en dos imagenes:

En tu programa poniendo un console log en la función que le pasas al image.onload

Con los cambios que te digo:

Deoxys #3 Ago '14

Bueno, no he creado una función nueva pero he puesto el console.log en el bucle. Ahora aparece la última imagen y aparecen todos los números en la consola (wtf)

Deoxys #4 Ago '14

Vale, arreglado.

imageObj.onload=function(){ctx.drawImage(imageObj,250,250,350,350,100a,0,100,100);} imprime sólo cuando carga la imagen, debería haber usado sólo ctx.drawImage(imageObj,250,250,350,350,100a,0,100,100);

Nunca copiéis código de los internetes

Stricken #5 Ago '14

 ctx.fillStyle="#FABADA";

xDDDD

vudú javascript

Usuarios habituales

Tags