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: 49	W: 87	SHIFT: 16
2: 50	X: 88	CTRL: 17
3: 51	Y: 89	ALT: 18
4: 52	Z: 90	PLUS: 187
5: 53	NUMPAD_0: 96	COMMA: 188
6: 54	NUMPAD_1: 97	MINUS: 189
7: 55	NUMPAD_2: 98	PERIOD: 190
8: 56	NUMPAD_3: 99	PULT_UP: 29460
9: 57	NUMPAD_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.