lunes, 25 de noviembre de 2013

CraftyJS: Sprites

Mmm... creo que el tutorial se está haciendo muy farragoso y al final no se entenderá nada, así que voy a tratar el contenido de este tema de manera independiente: El fantabuloso mundo de los

Sprites

Retomemos nuestro laberinto, pero ahora démosle color:


Como veis he dividido el mapa en cuadritos (que corresponden con el array que definíamos aquí). Como veis cada cuadrado tiene un dibujo que es una simple imagen (jpg, png...).  Pues bien, el dibujo en sí mismo, es lo que llamamos sprite. En la imagen sólo sale el escenario, pero es fácil deducir que nuestro personaje será también un sprite o una sucesión de ellos para crear el efecto de la animación.

Mapa de Sprites

Hemos dicho que los sprites son archivos gráficos que podemos cargar uno a uno o bien todos de golpe metidos en un archivo. Al contenido del archivo le llamaremos mapa de sprites y será algo de este tipo (tan grande como queramos):



Crafty.sprite

En CraftyJS la sintaxis para definir un sprite es esta:

Crafty.sprite( tamaño de la celdafichero, {mapa}, interespaciado)

Tamaño de la celda (opcional):

Medido en pixels, podemos darle sólo la anchura (x) o bien la anchura y la altura (x,y). Esto implicará que a la hora de definir el mapa nos referiremos a él en posición absoluta o relativa, ejemplo:

Como se indica, este parámetro es opcional. Si no definimos el tamaño, y quisiéramos referirnos al cofre en el ejemplo de arriba deberíamos acceder a la posición [64,64] (teniendo en cuenta que cada celda es de 32x32 pixels). Si definimos el tamaño (32,32) accederemos al cofre en la posición [2,2]. (La primera posición es el 0).

Por otro lado vemos que podemos especificar sólo la anchura (en cuyo caso se asumirá que la celda es cuadrada) o la anchura y la altura, lo que sugiere que aunque es menos habitual las celdas no tienen porque ser cuadradas.

Fichero: No tiene más historia. La ruta en la que se encuentra nuestro sprite o mapa de sprites.

Mapa:  Aquí está el meollo de la cuestión. El formato es:

 {nombre del mapa: [columna, fila, ancho, alto]}

Ejemplo para acceder al cofre sin haber definido tamaño de celda:
       Crafty.sprite('/dir/nombrefich.ext', {cofre: [64,64,32,32]});

Ejemplo para acceder al cofre habiendo definido tamaño de celda:
      Crafty.sprite(32,'/dir/nombrefich.ext', {cofre: [2,2]});

Ejemplo para acceder a todos los dibujos de Rajoy habiendo definido tamaño de celda:
 
     Crafty.sprite(32,'/dir/nombrefich.ext', {rajoyx8: [0,0,4,2]});      

 NOTA: Cuidadito aquí, aunque hemos cogido 8 casillas, estas se redimensionarán al tamaño de nuestra entidad que puede ser de 32x32 o cualquier otro tamaño.

Ejemplo para coger varios sprites a la vez:
     Crafty.sprite(32,'/dir/nombrefich.ext',{
            arriba:[0,0],
            abajo: [2,0],
            dcha:  [2,1],
            izda:   [0,1]
     });


Interespaciado: (opcional). Definimos interespaciado como el espacio que hay entre celda y celda, vamos, algo así como el margen. Podemos definir sólo las x o bien las x,y. Si no ponemos nada se asumirá que es 0. Si no ponemos las y se asumirá que coincide con las x.

Y oiga, ¿Todo esto como se usa?

Es muy sencillo. Al fin y al cabo, lo que arriba hemos denominado 'nombre del mapa'  no es más que un componente, así que, como tal, se usa.

    Crafty.e('2D, Canvas, Fourway, cofre')
      .attr({
              x: 100,
              y: 10,
              w: 100,
              h: 100
            });

Un ejemplito por el amor de dios...


Si queréis ver como queda, se podría ver aquí. Notad que aunque el tamaño de las celdas del mapa de sprites sea de 32x32, nuestro componente es de 100x100.

Si aterrizáis por primera ve por aquí quizá deseéis saber cómo ejecutar esto.

Retomando el juego...

Ahora vamos a trasladar todo esto a nuestro juego y vamos a seguir desde aquí.

Tomaremos el mapa de sprites que hay al principio de este documento y lo guardaremos en la carpeta /assets con el nombre de furniman.png. 

Ahora sólo debemos cargarlo y asignar cada sprite a un componente que será usado cuando creemos las entidades. ¿Y dónde lo haremos? ¿Recordáis la escena 'Loading' que espera a que esté todo cargado para iniciar el juego?

Crafty.scene('Loading', function(){

  Crafty.e('2D, DOM, Text')
    .text('Cargando...')
    .attr({ x: 110, y: 140 })
    .textFont({size:'13px'});

  Crafty.load(['assets/furniman.png'], function(){

   Crafty.sprite(32, 'assets/furniman.png', {
spr_muro:   [0, 2],
        spr_suelo:   [1, 2],
spr_tesoro: [2, 2]
    });
  Crafty.scene('Game');
  })
});

Ahora haremos que en el fichero de los componentes, éstos hereden los sprites que hemos definido, sin embargo si recordáis, teníamos entidades para los muros, pues nos interesaba que se detectara la colisión contra ellos, pero no teníamos nada para el suelo. Ahora el suelo deberá tener un dibujito y por tanto también tendrá que ser una entidad. 

Crafty.c('MuroMarron', {
   init: function( ) {
      this.requires('Actor, Pared, spr_muro');
  },
});

Crafty.c('Suelo', {
   init: function( ) {
      this.requires('Actor, spr_suelo');
  },
});

Crafty.c('Tesoro', {
  init: function() {
    this.requires('Actor, spr_tesoro')
  },
 
  /* ...  */

});

Ya sólo queda pintarlos en la escena del juego. Fijaos especialmente en el tesoro que cuando lo cojamos y desaparezca debajo tendrá que tener un suelo!!!

Crafty.scene('Game', function() {

// Colocamos cada cosa en su lugar
  for (var x = 0; x < mapa[0].length; x++) {
    for (var y = 0; y < mapa.length; y++) {
        
      if (mapa[y][x]==0) {  Crafty.e('Suelo').en(x,y);             }        
      if (mapa[y][x]==1) {  Crafty.e('MuroNegro').en(x,y);    }
      if (mapa[y][x]==2) {  Crafty.e('MuroMarron').en(x,y);  }

      if (mapa[y][x]==3) {
         Crafty.e('Suelo').en(x,y);
         Crafty.e('Tesoro').en(x,y);
       }
    }
  }

//Colocamos el personaje principal en el mundo.
 Crafty.e('Politico').en(1, 8);

});

Y con esto ya lo tenemos todo!

Si queréis ver el resultado pinchad aquí.
Si queréis bajaros los fuentes pinchad aquí o aquí

miércoles, 20 de noviembre de 2013

Apuntes de Fonaments físics de la informàtica (UOC)

Actualizado Enero 2017

Sí, lo sé.  Mis apuntes están de puta madre. Sin embargo esta vez voy a compartir unos que empiezan muy bien, pero que flojean en el último tema: 'òptica i fotónica'.  La verdad es que iba tan apurado de tiempo que tuve que dedicarme al escaneo manual con boli y libreta de apuntes, y sinceramente... eso paso de colgarlo.


El caso es que os comparto los documentos de 'Fonaments físics de la informàtica' (05.611del 'Grau d'Enginyeria Informàtica' de la UOC (Universitat Oberta de Catalunya), por si queréis aprovecharlos. De hecho, no estaría mal que si alguien los completa, me los comparta aquí para que pueda colgarlos. Supongo que lo agradeceríamos todos. La verdad es que bastante gente se descarga mis apuntes, lo cual me llena de una hondo orgullo y satisfacción y ruptura de cadera.




Además podéis descargaros PAC's de la asignatura aquí

También exámenes resueltos aquí

Por cierto, si queréis colaborar en tener un buen repositorio para la asignatura, mandadme vuestras PAC's y Exámenes corregidos y los iré incluyendo en beneficio de los futuros estudiantes.

Debéis mandar un correo a   furnimanQUITAESTO@terra.com  (evidentemente quitando el QUITAESTO) :-)

jueves, 7 de noviembre de 2013

CraftyJS - Escenas

En este punto, podríamos decir que ya hemos programado todo nuestro juego. Sin embargo es un poco triste, que después de sufrir financiando nuestro partido, una vez lo consigamos no salga ni un triste mensaje.

Una solución sería poner un mensaje felicitándonos sobreimpresionada. Esto ya lo sabemos hacer, lo vimos aquí, pero sería más elegante tener una pantalla nueva.

Los juegos se componen de menús, pantallas y créditos. Incluso hay juegos que las pantallas difieren mucho unas de otras (tanto que pueden ser un juego nuevo). Es cada uno de estos casos estamos hablando de:

Escenas

Así pues, vamos a dividir lo que teníamos hecho en tres escenas:
  • Una inicial de carga por si nuestro juego tarda mucho en cargarse y que ya os anuncio que ni la vamos a ver...   :-)
  • La propia pantalla del juego
  • La pantalla de fin de juego, albricias y felicitaciones.
Estas escenas las crearemos en un fichero nuevo llamado scenes.js que NO deberemos olvidar incluir en nuestro index.html:

<!DOCTYPE html>
<html>
<head>
    <script src="lib/crafty.js"></script>
    <script src="src/game.js"></script>

    <script src="src/componentes.js"></script>
    <script src="src/scenes.js"></script>
    <script>
       window.addEventListener('load', Game.start);
    </script>
</head>
<body>
</body>
</html>

Pantalla Final

Yo creo que con esto queda la escena autoexplicada:

Crafty.scene('Victory', function() {

//Ponemos el texto
  Crafty.e('2D, Canvas, Text')
    .attr({ x: 10, y: 150 })
    .textFont({size:'13px'})
    .text('Felicidades! Has conseguido financiar tu partido!');
  this.restart_game = this.bind('KeyDown', function() {
// Llamamos a la escena del juego
      Crafty.scene('Game');
  });
}, function() {
    this.unbind('KeyDown');
});

Como se puede intuir esto pone el mensaje y espera a que se pulse una tecla para mandarnos a la escena 'Game'.

----------------------------

Pantalla 'Game'

// Escena principal 'Game':  Crea las entidades del mapa y del político.

Crafty.scene('Game', function() {

// Colocamos cada cosa en su lugar
  for (var x = 0; x < mapa[0].length; x++) {
    for (var y = 0; y < mapa.length; y++) {
            
      if (mapa[y][x]==1) {
          Crafty.e('MuroNegro').en(x,y);
      }
      
      if (mapa[y][x]==2) {
         Crafty.e('MuroMarron').en(x,y);
      }

      if (mapa[y][x]==3) {
         Crafty.e('Tesoro').en(x,y);
       
      }
    }
  }

//Colocamos el personaje principal en el mundo.
    Crafty.e('Politico').en(1, 8);
});

Como se ve, aquí dibujamos el mapa y plantamos el personaje en el mismo. No tenemos nada más que hacer ya que todos los comportamientos están definidos en las entidades.

----------------------------

Pantalla Loading...

Crafty.scene('Loading', function(){
  Crafty.e('2D, DOM, Text')
    .text('Cargando...')
    .attr({ x: 110, y: 140 })
    .textFont({size:'13px'})

  Crafty.scene('Game');
});

Y esta es la pantalla de carga que no veremos nunca...  :-)

___________________________________________________________________

Victoria!!!!

Hay un tema que queda pendiente. Y es cómo llamamos a la escena de victoria. 

Aquí vimos como hacer que el tesoro se destruyera al pasar por encima de él. Lo que haremos ahora será preguntar si queda algún tesoro y si no queda ninguno llamaremos a la escena de victoria. Por lo tanto modificaremos el componente Tesoro en el fichero componentes.js.

Crafty.c('Tesoro', {
  init: function() {
    this.requires('Actor, Color')
        .color('yellow');
  },
    
  recogido: function() {
     this.destroy();

     // Si no queda ningún tesoro ya hemos terminado.
     if (!Crafty('Tesoro').length) {  
Crafty.scene('Victory');
     }  
  } 
});

__________________________________________________

Código completo

Sólo queda explicar el fichero inicial game.js.  Lo único que hace es definir el tamaño del canvas y llamar a la escena 'Loading'. Hago en él una cosa rara y es sacar fuera la tabla del mapa como global, para que se a accesible también desde el fichero de escenas, ya que la escena 'Game' la usa. Ya se que no es muy ortodoxo, pero es lo que tiene saltomatacaballear.




Ah se me olvidaba...  si queréis ver como queda....  PINCHAD AQUÍ!!!!