CraftJS: Componentes

*NOTA PREVIA:  En este capítulo se usa el término herencia muy a la ligera. Se ruega a los puristas del léxico que miren sólo los dibujitos y no lean el texto.

*NOTA PREVIA 2:  He observado que la plataforma que he escogido para alojar el código: Github, funciona de pena con el Chrome. A pesar de que según las estadísticas de visita a mi blog, la mayoría usáis Chrome, os recomiendo que de momento y hasta que alguien lo solucione, uséis el Explorer para verlo bien, o que pulséis sobre el enlace view rar que encontraréis bajo el código. 

En el capítulo anterior, creamos una serie de entidades que eran muy parecidas, de hecho sólo cambiaba el color:

Crafty.e('2D, Canvas, Color')   .attr({      x: x * Game.anchoCelda,      y: y * Game.altoCelda,      w: Game.anchoCelda,      h: Game.altoCelda,   })   .color('black');

Crafty.e('2D, Canvas, Color')   .attr({      x: x * Game.anchoCelda,      y: y * Game.altoCelda,      w: Game.anchoCelda,      h: Game.altoCelda,   })   .color('brown');

Componentes

Vamos a sacar factor común (como en mates) de estas dos entidades y las meteremos dentro de un componente llamado rejilla que define sus propiedades y/o comportamientos.

Crafty.c('Rejilla'', {
   init: function( ) {
      this.attr({
         x: x * Game.anchoCelda,
         y: y * Game.altoCelda,
         w: Game.anchoCelda,
         h: Game.altoCelda
     })
   }
 }) ;

Con esto podemos crear otros componentes que 'hereden' las propiedades de 'Rejilla':

Crafty.c('MuroNegro', {    init: function( ) {       this.requires('2D, Canvas, Rejilla, Color');       this.color('black');   }, });

Crafty.c('MuroMarron', {    init: function( ) {       this.requires('2D, Canvas, Rejilla, Color');       this.color('brown');   }, });

Es más... podemos volver a sacar factor común (lo llamaremos Actor):

Crafty.c('Actor', {
   init: function( ) {
      this.requires('2D, Canvas, Rejilla, Color');
    },
});

Crafty.c('MuroNegro', {    init: function( ) {       this.requires('Actor, Color');       this.color('black');   }, });

Crafty.c('MuroMarron', {    init: function( ) {       this.requires('Actor, Color');       this.color('brown');   }, });

Con lo que ya podemos crear nuestra entidad 'heredando' del componente Muro:

Crafty.e('MuroNegro');

Cada cosa en su fichero

Ya tenemos el código, sólo nos queda meter los componentes en un fichero llamado componentes.js, guardarlo en nuestra carpeta de fuentes (/src) y llamarlo en nuestro index.html.

Esto acarrea un problema y es que perdemos las referencias a las variables x e y que usa el componente 'Rejilla', así que debemos modificar el componente para que las pueda recibir como parámetro:

Crafty.c('Rejilla'', {
   init: function( ) {
      this.attr({
         w: Game.anchoCelda,
         h: Game.altoCelda
     })
   },
   en: function(x, y) {
      this.attr({ x: x * Game.anchoCelda, y: y * Game.altoCelda });
      return this;
   }
 });

Y lo llamaremos así:

Crafty.e('MuroNegro').en(x,y);

Veamos el código completo cada cosa en su sitio:

Sobra decir que el resultado que obtendremos es el mismo que el capítulo anterior.

Algunas consideraciones sobre los componentes

• Las propiedades o métodos que empiezan con guión bajo se consideran privadas.
• El método llamado init se ejecutará en el momento que añadamos el componente a la entidad.
• Un método con el mismo nombre del componente se considerará un constructor y se usa para pasar datos.
• A pesar de que hemos dicho que los métodos con guión bajo se consideran privados, no es más que una convención. Esto será así mientras el método sea un valor, pero si trabajamos con objetos o arrays, JavaScript tratará el objeto por referencia y en consecuencia se modificará para todos los componentes en los que se haya heredado.