programando para juegos en html 5 y javascript: julio 2013

En un post anterior ya vimos como cargar una imagen. El proceso incluía crear un objeto imagen para cada imagen a cargar, definir una función a ejecutar cuando termise la carga y por último, especificar la localización de la imagen. Es un proceso laborioso que puede hacerse un poco pesado. A continuación presentamos un sencillo cargador de imágenes que nos permitirá especificar todas las ubicaciones de las imágenes a cargar a la vez y una única función de callback para cuando terminen de cargarse todas ellas.
Conviene guardar el código siguiente en un archivo aparte, por ejemplo "loadImages.js" para poder incluirlo fácilmente en aquellos proyectos en los que necesitemos cargar varias imágenes de forma sencilla.

// loadImages.js
// arguments:
//  string urls with location of images to load
//  callback function
// returns:
//  array of Image objects

function loadImages() { //images and callback
 var n = arguments.length - 1; // number of images to load
 var callback = arguments[n]
 var images = new Array();
 var count = 0;
 
 for (i = 0; i < n; i++) {
  images[i] = new Image();
  images[i].onload = function(){
   count++;
   if (count == n){
    callback ();
   };
  };
  images[i].src = loadImages.arguments[i];
 };
 return images;  
}

Uso

La función loadImages devuelve un array que contiene las imágenes cargadas. Acepta un número variable de argumentos. Los argumentos serán cadenas de texto especificando la ubicación de las imagenes a cargar, excepto el último argumento, que será la función de callback, que debe especificarse sin comillas y sin los paréntesis de la llamada, como en el siguiente ejemplo:

<!DOCTYPE html>
<html>

    <head>
    <script type="text/javascript" src="./loadImages.js"></script>
    <script type='text/javascript'> 

 function load_done() {
            text = "Images loaded:<br>";
         for(var i=0; i< images.length; i++)
  {
      text += images[i].src + "<br>";
  }
  document.write(text);
 }
   
 var images = loadImages('./images/im1.jpg',
    './images/im2.jpg',
    './images/im3.jpg',
    './images/im4.jpg',
    './images/im5.jpg',
    './images/im6.jpg',
    './images/im7.jpg',
    './images/im8.jpg',
    './images/im9.jpg',
    load_done);
    </script>
    </head>

    <body>
    </body>

</html>

En este ejemplo hemos especificado las ubicaciones relativas de las imágenes a cargar, pero también se podría haber usado caminos absolutos e incluso urls como

'http:\\www.lapaginaquesea.com\imagencualquiera.jpg

El proceso para cargar una imagen que podamos usar desde javascript consta de tres pasos:

Crear un objeto Image.

var imagen = new Image();

Especificar la función de callback

Es la función que se ejecuta cuando termine la carga de la imagen.

imagen.onload = callback;

Importante! la función de callback se especifica sin encerrarla en comillas y sin poner los paréntesis.

Especificar la imagen

Puede especificarse mediante un camino relativo al archivo de imagen o mediante una url. Una vez definida la fuente desde la que se debe cargar la imagen, la carga comienza inmediatamente, por lo que hay que si se quiere especificar una función de callback, debe especificarse antes de especificar la fuente de la imagen.

imagen.src="miImagen.jpg;"

Ejemplo

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <canvas height="200px" id="my_canvas" style="border: 1px
                 solid #000000;" width="300px"></canvas> 
 <script type="text/javascript">
  var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imagen = new Image();
  imagen.onload = pinta;
  imagen.src = "http://1.bp.blogspot.com/-t9kNjyxhS_k/" +
       "UXRLc-tCXuI/AAAAAAAAAEQ/Gmn3RR06Org/s1600/canvas1.png";

  function pinta(){                
   ctx.drawImage(imagen, 0, 0);
  }
 </script> 
</body>
</html>

programando para juegos en html 5 y javascript

lunes, 22 de julio de 2013

Cargador de imágenes

Uso

miércoles, 10 de julio de 2013

Carga de imágenes

Crear un objeto Image.

Especificar la función de callback

Especificar la imagen

Ejemplo