lunes, 20 de enero de 2014

CraftyJS - Viewport (I) o cómo posicionar la cámara.

Aunque en principio parezca más propio de los juegos en 3D, el viewport no es más que la cámara que filma la acción. Para ver su funcionamiento acudiremos a un ejemplo que se consta de:
  1. Un helicóptero como protagonista  (Éste)
  2. Una ventana de juego de 480 x 320 píxeles.
  3. Una foto que actuará de fondo de 4608 x 3072 píxeles. (O sea, ésta)
Como os habréis dado cuenta, la foto es mucho más grande que la ventana. Esto lo he ideado así, para que se vea el desplazamiento real del helicóptero. Sobre un fondo monocromático no apreciaríamos visualmente el movimiento.

Si ahora montamos el fondo y el helicóptero sobre la imagen, veremos algo así. Como veis, la foto sale cortada porque no cabe.


Como es algo que a estas alturas ya sabemos hacer, no publico el código aquí, aunque lo podéis ver en funcionamiento junto con el código aquí.

Posicionar la cámara sobre la entidad.

Si ahora movemos el helicóptero a la posición 1000, 1000:

avion = Crafty.e('2D, Canvas, Fourway, avion')
.attr({
   x: 1000,
   y: 1000,
   w: 244,
   h: 982
   })
.fourway(4);

Es fácil imaginar que éste saldrá de pantalla y no lo veremos. Ésto lo podemos subsanar moviendo la cámara sobre el helicóptero, y es más, lo podemos hacer de forma inmediata o aplicando un lapso de tiempo.

Para ello utilizaremos la siguiente instrucción:

Crafty.viewport.centerOn(avion, 10000);

Si os habéis fijado antes al crear la entidad, la he asignado a una variable (avion) que la identifica entre otras instancias. Cuando centro la cámara, lo hago usando la variable.

El siguiente parámetro es el número de milisegundos que tardará la cámara en posicionarse sobre el objetivo (haciendo una especie de travelling). Evidentemente si ponemos un cero, la cosa será inmediata.

Podéis ver un ejemplito de ésto junto al código aquí.  Como la imagen es muy grande se puede perder parte del efecto, así que cuando haya cargado todo, pulsad [F5] para forzar la recarga de la página con la imagen ya en caché.


NOTA: En CraftyJs 6.0.2. esto deja de funcionar. Para subsanarlo debéis buscar la línea:
ctx.setTransform(view._scale, 0, 0, view._scale, view._x*view._scale, view._y*view._scale);
y substituirla por:
ctx.setTransform(view._scale, 0, 0, view._scale, Math.floor(view._x*view._scale), Math.floor(view._y*view._scale));


Follow the lider, lider, lider...

El siguiente paso es de cajón, que la cámara siga al helicóptero durante su movimiento. Como mantenemos quieto el fondo, el resultado será un efecto de scroll.

Para conseguir este efecto usaremos la siguiente instrucción:

Crafty.viewport.follow(Objeto, desplazamiento_x, desplazamiento_y)

El primer parámetro es como en el comando centerOn el nombre de la variable en la que se ha instanciado el objeto que queremos seguir.

Los siguientes parámetros indican el desplazamiento del objeto respecto a la cámara (que siempre estará en el centro).

Por ejemplo, mientras Crafty.viewport.follow(avion, 0, 0) dejaría la cámara sobre el helicóptero ( y en consecuencia éste quedaría centrado como en la imagen de arriba del todo de este artículo),  una instrucción del tipo  Crafty.viewport.follow(avion, 100, 100)  dejaría la imagen así:



Crafty.viewport.follow(avion, -100, -100) así:


Recordad que podéis trastear con todo esto Aquí.



No hay comentarios:

Publicar un comentario