jueves, 27 de junio de 2013

CraftyJS: Movimiento

Componente Fourway


Fijaos, pillamos la entidad definida aquí le añadimos el componente Fourway y definimos su velocidad.

Crafty.e('2D, Canvas, Fourway, Color')
    .attr({
       x: 100,
       y: 10,
      w: 100,
       h: 100,
     })
    .fourway(4)
    .color('yellow');

Y ya funciona. Nos movemos con W+A+S+D o bien con los cursores.

Lo podemos ver funcionando aquí.

No obstante os adjunto el código completo en el que definimos también el canvas:


Recordad que para que funcione debéis tener en cuenta esto.

Componente Multiway

Por supuesto podemos movernos con cualquier tecla y en cualquier dirección.

Crafty.e('2D, Canvas, Multiway, Color')
    .attr({
       x: 100,
       y: 10,
       w: 100,
       h: 100,
    })
   .multiway({x:3,y:1.5}, {W: -90, S: 90, D: 0, A: 180})
   .color('yellow');

Fijaos que la primera parte de la instrucció define la velocidad de movimiento en la dirección de las x y la velocidad en dirección de las y. Vemos que es lo mismo que en .fourway sólo que definimos una velocidad diferente para cada eje. Esto no es propio de .multiway, también podríamos haber definido de esta manera .fourway.
En la segunda parte definimos las teclas y la dirección en la que nos moveremos. Sí, lo sé. Las direcciones son un poco raras... pero quizá este gráfico nos ayude a entenderlas:



Por otra parte podemos definir cualquier tecla que queramos según la siguiente tabla:



BACKSPACE: 8 E: 69 NUMPAD_9: 105
TAB: 9 F: 70 MULTIPLY: 106
ENTER: 13 G: 71 ADD: 107
PAUSE: 19 H: 72 SUBSTRACT: 109
CAPS: 20 I: 73 DECIMAL: 110
ESC: 27 J: 74 DIVIDE: 111
SPACE: 32 K: 75 F1: 112
PAGE_UP: 33 L: 76 F2: 113
PAGE_DOWN: 34 M: 77 F3: 114
END: 35 N: 78 F4: 115
HOME: 36 O: 79 F5: 116
LEFT_ARROW: 37 P: 80 F6: 117
UP_ARROW: 38 Q: 81 F7: 118
RIGHT_ARROW: 39 R: 82 F8: 119
DOWN_ARROW: 40 S: 83 F9: 120
INSERT: 45 T: 84 F10: 121
DELETE: 46 U: 85 F11: 122
0: 48 V: 86 F12: 123
1: 49W: 87 SHIFT: 16
2: 50X: 88 CTRL: 17
3: 51Y: 89 ALT: 18
4: 52Z: 90 PLUS: 187
5: 53NUMPAD_0: 96 COMMA: 188
6: 54NUMPAD_1: 97 MINUS: 189
7: 55NUMPAD_2: 98 PERIOD: 190
8: 56NUMPAD_3: 99 PULT_UP: 29460
9: 57NUMPAD_4: 100 PULT_DOWN: 29461
A: 65 NUMPAD_5: 101 PULT_LEFT: 4
B: 66 NUMPAD_6: 102 PULT_RIGHT': 5
C: 67 NUMPAD_7: 103
D: 68 NUMPAD_8: 104


Componente Twoway

Este componente usa las teclas A+W+D o los correspondientes cursores.
El código debería ser algo así:

Crafty.e('2D, Canvas, Twoway, Color')
   .attr({
       x: 100,
       y: 10,
      w: 100,
      h: 100,
   })
   .twoway(4,10)
   .gravity("platform")
   .color('yellow');

El movimiento de este componente sera de velocidad 4 en la horizontal. Sin embargo al pulsar la tecla arriba, saltará a velocidad 10 hasta el infinito a no ser que declaremos la fuerza de gravedad. Una vez la fuerza de gravedad venza al salto, nuestro componente caerá hasta el infinito a menos que definamos un suelo, cosa que no sabemos hacer.
Y este capítulo llega hasta aquí. Espero que os haya sorprendido lo fácil que es controlar el movimiento de un componente en CraftyJS.
Nos vemos.

miércoles, 12 de junio de 2013

Prestashop: Añadir un campo nuevo en el artículo

Recientemente me he encontrado con que tenía que definir un código adicional en los artículos de Prestashop. Inmediatamente me vino a la cabeza que podía usar el código UPC ya que sólo lo usan Canadienses y Japoneses y mi tienda de momento, no iba a ir dirigida para ellos.

El problema con el que me encontré es que este código es sólo numérico, de una longitud determinada y encima se valida.

Así que me decidí a tunearlo.

Modificación del diccionario

Este campo se encuentra en tabla 'ps_product' y es un varchar de 12 posiciones. Si no nos vale, deberemos acceder a la base de datos, con el phpmyadmin por ejemplo, y modificar la estructura del campo.

En mi caso, el tipo del dato me valía, pero necesitaba que fuera de 14 posiciones, por lo que ejecuté la siguiente petición:

ALTER TABLE `pr_product` CHANGE `upc` `upc` VARCHAR(14) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL

Modificación del programa

Ahora sólo quedaba quitar la restricción por software al formato del campo.  Esta restricción se encuentra en el fichero    .\classes\product.php

Lo único que tenemos que hacer es ir a la línea 260 y cambiar 'isUPC' por 'isString' y en mi caso, que recordad que también cambiaba la longitud el número 12 por 14.

Este programa hace tiempo que no cambia y la línea sigue siendo la 260 en Prestashop 1.5.4., pero si algún día cambiara, lo que podéis hacer es buscar el texto:   'isUpc', 'size' => 12    Así, con comillas y todo.


Añadir campo nuevo

Esta solución que he aplicado para un caso muy relacionado con la funcionalidad original del campo, puede con un poquito de imaginación evitar el engorroso proceso de añadir un campo nuevo a la ficha del artículo de Prestashop.

Y nada más. Espero que a alguien le sirva.   :-)

E

lunes, 10 de junio de 2013

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.