Nuevas Características de la Cámara en Phaser

() translation by (you can also view the original English article)

Introducido en la 2.4.7 versión de Phaser, las nuevas características de cámara mirar realmente interesantes y merece la pena comprobar hacia fuera. En este tutorial verás lo fácil que es aplicar efectos de cámara en sus juegos HTML5 construidos con Phaser.

Nota: Si necesita una introducción al marco de Phaser, puede mirar Iniciando con Phaser: Creando "Monster Wants Candy", donde romper el código fuente y explicar en detalle.

Hay tres novedades interesantes que puede usar: flash de la cámara, se descolora y agitar. Hacen exactamente lo que puede esperar de ellos. Vamos a ver por qué los que son muy útiles y se deben considerar en su próximo proyecto de desarrollo de juegos con Phaser.

Hasta ahora estaba usando el Juicy plugin para lograr estas funcionalidades, pero el código fuente fue abandonado hace mucho tiempo y tuve que manejarlo. Ahora con las características de ser integrado y parte del código fuente Phaser no tiene que preocuparse por problemas de compatibilidad ni marco actualizaciones. También son mucho más fáciles de implementar.

Plantilla de Enclave Phaser

Usaré la Plantilla Enclave Phaser como caso de estudio: es un conjunto de funcionalidades básicas, de los Estados a través de gestión de audio y puntuación de interpolaciones y de. La plantilla es abrir origen y está Disponible en GitHub como parte de la iniciativa de open.enclavegames.com, para que pueda fácilmente ver cómo todo tiene implementado, incluyendo los nuevos efectos de cámara.

OK, vamos a pasar a la parte de implementación real.

Flash de Cámara

La cámara que destella puede ser utilizado para efectos de golpe o impacto, por ejemplo, cuando el jugador es golpeado por la bala del enemigo, la pantalla puede girar a la roja por un breve momento. Aquí es el efecto de flash de la cámara con los parámetros de explicó:

1	flash(color, duration, force);

Se llena la pantalla con el color sólido y se descolora lejos a la alfa 0 durante el periodo determinado. Puede utilizar el parámetro force sobrescribe efectos flashes y tener esto como el único en el momento actual. El color predeterminado es blanco, y el flash tiene una duración de medio segundo (500 milisegundos):

1	flash(0xffffff, 500, false);

La cámara que destella puede utilizarse para varios efectos. En la plantilla de Phaser de Enclave, hace una buena transición al traer a un nuevo estado, para mostrar el menú principal después de todo, los recursos han terminado de cargarse. En vez de mostrar todo al instante, podemos usar el flash de color negro como base:

1	this.camera.flash(0x000000, 500, false);

Se ejecuta al final de la función de crear en el archivo de MainMenu.js que representa el estado del menú. Puede ver el efecto en la acción en un gif:

Como se puede ver, este modo consigue un bonito, efecto de apareción. Ahora pasemos a la cámara se desvanecen.

Cámara se Descolora

Para hacer la sensación de mover entre Estados completos, podemos utilizar fade para alcanzar un flash invertido y hacer que el estado se descoloran hacia fuera suavemente. Si se realiza correctamente, esto puede traer un fade-out, efecto de fade-in, que se ve realmente bien. Aquí está la teoría:

1	fade(color, duration, force);

Los parámetros son exactamente igual que en flash de la cámara, excepto el color por defecto no es blanco sino negro:

1	fade(0x000000, 500, false);

Comienza llenando la pantalla de alpha 0 el color dado y termina con un relleno sólido. El código fuente real de la acción de clickStart en el botón de inicio en el archivo de MainMenu.js tiene este aspecto:

clickStart: function() {
    this.camera.fade(0x000000, 200, false);
    this.time.events.add(200, function() {
        this.game.state.start('Story');
    }, this);
}

Se desvanece la pantalla durante un período de 200 milisegundos y luego lanza un nuevo estado después de la misma cantidad de tiempo para sincronizar ambas acciones. Esto es lo que se ve en acción:

Combinar flash y fade hace una agradable transición entre Estados. Ahora, pasemos al efecto de la sacudida.

Sacudidas de la Cámara

Otro método útil de cámara Phaser es — puede ser utilizado para situaciones donde un jugador golpea los obstáculos al volar a través del campo de asteroides, o utilizando una bomba de gran alcance en el inventario. Puede ser ejecutado al chocar con los objetos de juego flotante en la pantalla.

1	shake(intensity, duration, force, direction, shakeBounds);

El primer parámetro controla cuánto está sacudiendo a la cámara, y el otro cuánto tiempo durará la sacudida. La tercera parte es sobre la sustitución de la ejecución ya agitar si este parámetro se establece en true. El cuarto controla el movimiento horizontal, vertical o ambos, y el último parámetro decide si la cámara se sacude fuera de los límites del mundo mostrando todo lo que existe. Aquí está el ejemplo con los valores por defecto:

1	shake(0.05, 500, true, Phaser.Camera.SHAKE_BOTH, true);

Sacudirá la cámara con intensidad de 0.05, durante medio segundo (500 milisegundos), el parámetro de force se establece en true, la cámara hará temblar en ambas direcciones y también fuera de los límites del mundo. Si no desea personalizar el agitar y dejar los parámetros por defecto, entonces sólo se puede omitir en la llamada y que funciona igual que antes:

shake();

Y así es cómo el movimiento real en el código de fuente de la Plantilla Enclave Phaser cuando los puntos se agregan en el archivo Game.js:

1	this.camera.shake(0.01, 100, true, Phaser.Camera.SHAKE_BOTH, true);

Los tres últimos parámetros son exactamente igual que el valor por defecto que, así podría haber omitido, pero dejaron para fines educativos. Verlo en acción:

En este caso la intensidad es menor que el valor por defecto, y la duración es más corta para hacerla sentir un poco más débil, por lo que no le distraerá al jugador demasiado.

ResetFX

También es un método poco práctico junto con los tres explicados anteriormente. Puede restablecer los efectos activos, y desde el punto de vista programación no incluso tienes que saber si hay cualquier funcionamiento en el momento, existe un método especial de resetFX que puede utilizar.

1	this.camera.resetFX();

Inmediatamente borra los efectos de la actual cámara y elimina de la pantalla.

Eventos

Si usted quiere saber si cualquier efecto específico es activa o ya terminado, puede utilizar los eventos proporcionados por el marco: onFlashComplete, onFadeComplete y onShakeComplete.

¿Recuerda el ejemplo de fade en clic de botón en el menú principal? Fue hecho por una cantidad fija de tiempo de espera, y luego el estado fue cambiado a uno nuevo. Lo podemos hacer mejor usando el evento onFadeComplete:

clickContinue: function() {
    this.camera.fade(0x000000, 200, false);
    this.camera.onFadeComplete.add(function() {
        this.game.state.start('Game');
    }, this);
}

De esta manera fue implementada en el paso siguiente en el archivo Story.js cuando se cambia de estado de historia en el juego uno. Tienes que admitir se ve mejor y el estado se inicia exactamente cuando se termina el efecto, no importa cuánto dura.

Resumen

Como se puede ver, son características muy poderosas a la hora de añadir este extra 'jugoso' o detalle a tus juegos. Son al mismo tiempo también muy fácil de usar, es genial verlos implementados nativamente en Phaser.

¡No dude en tomar el Código Fuente de la Plantilla Enclave Phaser, aplicar los efectos y compartir enlaces a tus juegos recién actualizados con nosotros en los comentarios!