CraftyJS: Eventos

Hasta ahora hemos ido desarrollando un sencillo juego de laberintos apto para políticos cuya última versión se encuentra aquí.

Quizá sea el momento de dotar de sentido al juego poniendo un objetivo. Y en fin, creo que nuestro político podría hacer lo que mejor sabe hacer que es financiar su partido.

Para ello crearemos un nuevo componente llamado Tesoro que no difiere en nada de los muros que hemos creado hasta ahora salvo en dos aspectos:

1. No nos interesa que nuestro político se detenga al colisionar con el tesoro, con lo que eliminaremos el componente 'Pared' que usábamos para detectar la colisión y,
2. Le dotaremos de un comportamiento especial al que llamaremos 'recogido' y que lo que hará es destruir el tesoro. Este comportamiento (evento) lo dispararemos cuando detectemos que nuestro político colisiona con el tesoro.

Veamos el código:

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

  recogido: function() {
    this.destroy();
  }
});

Para colocarlos usaremos nuestra tabla de mapa y pondremos un nuevo objeto tipo 3.

  var mapa = [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                      [1, 3, 2, 2, 3, 2, 3, 2, 2, 1],
                      [1, 0, 0, 2, 0, 2, 0, 0, 0, 1],
                      [1, 2, 0, 2, 0, 2, 2, 2, 0, 1],
                      [1, 2, 0, 0, 0, 0, 0, 2, 0, 1],
                      [1, 2, 2, 2, 0, 2, 0, 2, 0, 1],
                      [1, 0, 0, 0, 0, 2, 0, 2, 0, 1],
                      [1, 0, 2, 2, 0, 2, 0, 2, 0, 1],
                      [1, 0, 2, 2, 3, 2, 0 ,0 ,3, 1],
                      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]];

Y dibujaremos los tesoros en la misma parte que creábamos los muros y de la misma manera:

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

Eventos

 Nos faltaría ver que hacemos con el político:

Lo que haremos es preguntar si colisiona con un Tesoro y lanzar un procedimiento que llame al evento 'recogido' que habíamos definido en el tesoro:

// Esta componente será nuestro jugador, añadimos código para la colisión.
Crafty.c('Politico', {
  init: function() {
    this.requires('Actor, Fourway, Color, Collision')
      .fourway(4)
      .color('rgb(20, 75, 40)')
      .onHit('Pared', this.detenerMov)
      .onHit('Tesoro', this.recogerTesoro);
  },

  // detiene el movimiento
  detenerMov: function() {
            ...
    },
 
  recogerTesoro: function(datos) {

    datos[0].obj.recogido();      // Disparamos el evento recogido en el tesoro
  }
});

Y con esto ya está.   Os pongo el código completo.   Recordad que para que funcione debéis tener en cuenta todo esto.

	// Define la dimensión de la rejilla y el método para colocar entidades en ella.
	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;
	}
	});
	//Componente que agrupa los comportamientos comunes,
	Crafty.c('Actor', {
	init: function( ) {
	this.requires('2D, Canvas, Rejilla, Color');
	},
	});
	// Dotamos a los actores de color y personalidad
	Crafty.c('MuroNegro', {
	init: function( ) {
	this.requires('Actor, Color, Pared');
	this.color('black');
	},
	});
	Crafty.c('MuroMarron', {
	init: function( ) {
	this.requires('Actor, Color, Pared');
	this.color('brown');
	},
	});
	// Esta componente será nuestro jugador, añadimos código para la colisión.
	Crafty.c('Politico', {
	init: function() {
	this.requires('Actor, Fourway, Color, Collision')
	.fourway(4)
	.color('rgb(20, 75, 40)')
	.onHit('Pared', this.detenerMov)
	.onHit('Tesoro', this.recogerTesoro);
	},
	// detiene el movimiento
	detenerMov: function() {
	if (this._movement) {
	this.x -= this._movement.x;
	this.y -= this._movement.y;
	}
	},
	recogerTesoro: function(datos) {
	datos[0].obj.recogido(); //Disparamos el evento recogido del Tesoro
	}
	});
	// Para ganar el juego nuestro jugador debe recoger todos los tesoros
	Crafty.c('Tesoro', {
	init: function() {
	this.requires('Actor, Color')
	.color('yellow');
	},
	recogido: function() {
	this.destroy(); // Disparamos el evento recogido del tesoro
	}
	});

view raw componentes.js hosted with ❤ by GitHub

	Game = {
	// Definimos tamaño que va a tener cada celda
	anchoCelda : 32,
	altoCelda : 32,
	start:function(){
	// Esta rejilla marca como será nuestro mapa: (0) nada, (1) muro exterior, (2) muro interior, (3) Tesoro
	var mapa = [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
	[1, 3, 2, 2, 3, 2, 3, 2, 2, 1],
	[1, 0, 0, 2, 0, 2, 0, 0, 0, 1],
	[1, 2, 0, 2, 0, 2, 2, 2, 0, 1],
	[1, 2, 0, 0, 0, 0, 0, 2, 0, 1],
	[1, 2, 2, 2, 0, 2, 0, 2, 0, 1],
	[1, 0, 0, 0, 0, 2, 0, 2, 0, 1],
	[1, 0, 2, 2, 0, 2, 0, 2, 0, 1],
	[1, 0, 2, 2, 3, 2, 0 ,0 ,3, 1],
	[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]];
	// Definimos las dimensiones del canvas en proporción al tamaño de la celda.
	var anchoCanvas = mapa[0].length * Game.anchoCelda;
	var largoCanvas = mapa.length * Game.altoCelda;
	Crafty.init(anchoCanvas, largoCanvas);
	Crafty.background('rgb(249, 223, 125)');
	// 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);
	}
	}

view raw game.js hosted with ❤ by GitHub

Respecto a si funciona, pues podemos verlo aquí

CraftyJS: Colisiones

Tratar las colisiones en Crafty es muy sencillo, básicamente tenemos que reconocer contra qué nos las pegamos y cómo reaccionamos.

Para ello recuperaremos el laberinto apto para políticos.

Contra qué nos la pegamos

Recordemos que teníamos dos tipos de muro. Definiremos que son de tipo 'Pared'.

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

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

Como veis, no hemos definido anteriormente 'Pared' en ningún lado. Podemos poner el palabro que queramos. Lo que haremos con posterioridad es preguntar si hemos colisionado con algo de tipo 'Pared'. De eso se deduce que si quisiéramos que el personaje de nuestro videojuego reaccionara de manera distinta en cada tipo de muro, deberíamos definir un palabro para cada tipo de muro.

Como detectamos la colisión

Realmente en nuestro laberinto no habíamos creado todavía al protagonista del videojuego: nuestro político. Es por ello que crearemos el componente Político dotándole de movilidad cómo hemos visto aquí. También le incorporaremos la lógica de la colisión:

Crafty.c('Politico', {
  init: function() {
    this.requires('Actor, Fourway, Color, Collision')
      .fourway(4)
      .color('rgb(20, 75, 40)')
      .onHit('Pared', this.detenerMov);
  },

  detenerMov: function() {
    if (this._movement) {
      this.x -= this._movement.x;
      this.y -= this._movement.y;
    }
  }
});

 Como vemos importamos el comportamiento Collision. Sin embargo lo más interesante es la llamada al método .onHit. Este método tiene tres parámetros:

El primer parámetro es el tipo de objecto contra el que preguntamos si chocamos. Vamos, lo que en la primera parte de este artículo llamábamos el palabro.

La segunda parte es el nombre de la función a la que llamaremos en el caso de colisión.

La tercera parte, que no está definida en el ejemplo, llamaría a una función que se ejecutaría en caso de que la colisión NO se produjera.

 Dotando de vida a nuestro político

No tiene más, lo tenemos perfectamente definido en nuestro fichero de componentes, por lo tanto lo llamamos:

Crafty.e('Politico').en(1, 8);

El código

	// Define la dimensión de la rejilla y el método para colocar entidades en ella.
	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;
	}
	});
	//Componente que agrupa los comportamientos comunes,
	Crafty.c('Actor', {
	init: function( ) {
	this.requires('2D, Canvas, Rejilla, Color');
	},
	});
	// Dotamos a los actores de color y personalidad
	Crafty.c('MuroNegro', {
	init: function( ) {
	this.requires('Actor, Color, Pared');
	this.color('black');
	},
	});
	Crafty.c('MuroMarron', {
	init: function( ) {
	this.requires('Actor, Color, Pared');
	this.color('brown');
	},
	});
	// Esta componente será nuestro jugador, añadimos código para la colisión.
	Crafty.c('Politico', {
	init: function() {
	this.requires('Actor, Fourway, Color, Collision')
	.fourway(4)
	.color('rgb(20, 75, 40)')
	.onHit('Pared', this.detenerMov);
	},
	// detiene el movimiento
	detenerMov: function() {
	if (this._movement) {
	this.x -= this._movement.x;
	this.y -= this._movement.y;
	}
	}
	});

view raw componentes.js hosted with ❤ by GitHub

	Game = {
	// Definimos tamaño que va a tener cada celda
	anchoCelda : 32,
	altoCelda : 32,
	start:function(){
	// Esta rejilla marca como será nuestro mapa: (0) nada, (1) muro exterior, (2) murio interior
	var mapa = [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
	[1, 0, 2, 2, 0, 2, 0, 2, 2, 1],
	[1, 0, 0, 2, 0, 2, 0, 0, 0, 1],
	[1, 2, 0, 2, 0, 2, 2, 2, 0, 1],
	[1, 2, 0, 0, 0, 0, 0, 2, 0, 1],
	[1, 2, 2, 2, 0, 2, 0, 2, 0, 1],
	[1, 0, 0, 0, 0, 2, 0, 2, 0, 1],
	[1, 0, 2, 2, 0, 2, 0, 2, 0, 1],
	[1, 0, 2, 2, 0, 2, 0 ,0 ,0, 1],
	[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]];
	// Definimos las dimensiones del canvas en proporción al tamaño de la celda.
	var anchoCanvas = mapa[0].length * Game.anchoCelda;
	var largoCanvas = mapa.length * Game.altoCelda;
	Crafty.init(anchoCanvas, largoCanvas);
	Crafty.background('rgb(249, 223, 125)');
	// 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);
	}
	}
	}
	//Colocamos el personaje principal en el mundo.
	Crafty.e('Politico').en(1, 8);
	}
	}

view raw game.js hosted with ❤ by GitHub

¿Pero funciona?

No se, probadlo aquí

Prestashop: Combinaciones

Podemos tener el caso de que en nuestra tienda queramos vender elementos que aún siendo el mismo, puedan tener diversas configuraciones. Pondremos el caso de un WC. A pesar de que sea el mismo modelo,  puede tener  evacuación vertical u horizontal, y alimentación lateral o inferior. Además, podemos tener distintos colores para la tapa. Todo esto puede llevar una variación en el precio según configuración o incluso en la referencia. Para todo esto existen en Prestashop las combinaciones.

Atributos y valores

En el caso que hemos ejemplificado los atributos serían evacuación con sus valores vertical / horizontal, alimentación con sus valores lateral / inferior y colores con los valores que sean. Veamos dónde definir esto:

Desde el menú principal de nuestro BackOffice accedemos a las opciones Catálogo -> Atributos y valores.

Con el botón de Añadir una nueva característica, accederemos al mantenimiento y crearemos las características evacuación y alimentación. Lo verdaderamente importante aquí es seleccionar Botón de Opción en el campo Tipo de Atributo. (Los colores los veremos luego)

Al final nos quedará algo como la imagen de debajo:

Ahora crearemos los valores para cada característica. Es importante remarcar que hay que crear todos los posibles. Si tenemos una característica que puede tomar quince valores hay que definir los quince, incluso cuando nuestro artículo sólo pueda adaptar un par de ellas. Ya habrán otros artículos que las necesitarán.

Para ello pulsamos el botón Añadir un nuevo valor de característica que veis en la captura de arriba.

La pantalla que se nos ofrece es muy simple, sólo hay que seleccionar en el campo desplegable de característica el atributo al que queramos dar valor e informarlo. Seguidamente pulsamos el botón Guardar y añadir otro valor y repetimos la operación. Cuando ya hayamos definido todos nuestros valores para todos los atributos pulsamos Guardar.

Al final nos tiene que quedar algo como la captura bajo estas líneas. Fijaos que disponéis de una serie de botones para eliminar y/o editar las características y valores.

Incluir los atributos en los artículos

Esta parte se hace desde el mismo mantenimiento de los artículos, en la pestaña combinaciones. Por lo tanto creamos un artículo o modificamos uno creado y accedemos a esta pestaña:

Como vemos en la captura de arriba, lo que tenemos que hacer es escoger el par Atributo / Valor que corresponda a nuestro artículo y pulsar Añadir. Con esto ya estaríamos, a no ser que nuestro atributo tenga ciertas peculiaridades que transformen al artículo y que pasamos a ver:

La primera parte tiene a ver con las Referencias, si nuestra combinación comporta un código distinto se lo indicamos y Prestashop lo sabrá gestionar perfectamente (incluso cambiando la referencia en el momento de seleccionar la combinación si la mostramos con el artículo).

Lo mismo sucede con el resto de campos: Podemos definir un nuevo precio de mayorista (coste) en el artículo y un incremento / decremento en los precios y pesos. Eso hará por ejemplo, que cuando en nuestra tienda cambiemos de combinación también lo hará el precio.

Por último podremos ver todas las imágenes que tenemos cargadas nuestro artículo. Prestashop nos permitirá seleccionar aquellas que queramos que se muestren en el momento que alguien escoja nuestra combinación en particular.

Para gustos los colores

Al hablar de los atributos obviamos los colores. Si creamos un atributo de tipo color, al definir sus valores podremos seleccionar el color de una paleta, darle el código RGB o incluso añadir una imagen para texturas.

 Resultado Final

Adjunto una captura de como quedaría nuestro artículo. En él podemos escoger la evacuación, la alimentación y el color.  Fijaos que el color incluye una textura.