Share
Introducidas en la versión 2.4.7 de Phaser, las nuevas características de la cámara parecen muy interesantes y vale la pena echarles un vistazo. En este tutorial, verás lo fácil que es aplicar efectos de cámara en tus juegos HTML5 creados con Phaser.
Nota: si necesita una introducción al marco de trabajo de Phaser, puede consultar Cómo comenzar con Phaser: Creación de "Monster Wants Candy", donde desgloso el código fuente y lo explico en detalle..
Hay tres características nuevas e interesantes que puede usar: flash de cámara, atenuación y vibración. Hacen exactamente lo que usted puede esperar de ellos. Veamos por qué son muy útiles y deberían tenerse en cuenta en su próximo proyecto de desarrollo de juegos con Phaser.
Hasta ahora estaba usando el complemento Juicy para lograr tales funcionalidades, pero el código fuente fue abandonado hace mucho tiempo y tuve que administrarlo yo mismo. Ahora, con las funciones integradas y parte del código fuente de Phaser, no tengo que preocuparme por ningún problema de compatibilidad o actualización de marcos. También son mucho más fáciles de implementar.
Usaré Enclave Phaser Template como un caso de estudio: es un conjunto de funcionalidades básicas, desde estados a través de audio y gestión de altas calificaciones hasta interpolaciones y animaciones. La plantilla es de código abierto y está disponible en GitHub como parte de la iniciativa open.enclavegames.com, para que pueda ver fácilmente cómo se implementó todo, incluidos los nuevos efectos de cámara..
Ok, vamos a pasar a la parte de implementación real.
El flasheo de la cámara se puede usar para efectos de impacto o impacto, por ejemplo, cuando el jugador recibe el impacto de la bala del enemigo, la pantalla puede volverse roja por un breve momento. Aquí está el efecto de cámara de flash con los parámetros explicados:
flash (color, duración, fuerza);
Llena la pantalla con el color sólido y se desvanece a alfa 0 durante la duración dada. Puede usar el parámetro de fuerza para sobrescribir cualquier otro efecto de flash y tenerlo como el único que se ejecuta en el momento actual. El color predeterminado es el blanco y el flash dura medio segundo (500 milisegundos):
flash (0xffffff, 500, falso);
El flash de la cámara se puede utilizar para varios efectos. En la plantilla de Enclave Phaser, se realiza una transición perfecta cuando se abre un nuevo estado, para mostrar el menú principal después de que todos los recursos hayan terminado de cargarse. En lugar de mostrar todo al instante, podemos usar el flash con color negro como base:
this.camera.flash (0x000000, 500, false);
Se ejecuta al final de la función de creación en el MainMenu.js archivo que representa el estado del menú. Puedes ver el efecto en acción en un gif:
Como puede ver, esto logra un efecto de apariencia agradable y suave. Ahora vamos a pasar a la cámara de fundido.
Para hacer que la sensación de movimiento entre estados se complete, podemos usar fade para lograr un destello invertido y hacer que el estado se desvanezca sin problemas. Si se hace correctamente, esto puede traer un efecto de fundido de salida, que se ve muy bien. Aquí está la teoría:
desvanecimiento (color, duración, fuerza);
Los parámetros son exactamente los mismos que en el flash de una cámara, excepto que el color predeterminado no es blanco, sino negro:
desvanecimiento (0x000000, 500, falso);
Comienza a llenar la pantalla desde alfa 0 con el color dado y termina con un relleno sólido. El código fuente real de la haga clic en Inicio Acción en el botón de inicio en el MainMenu.js archivo se ve así:
Accentsconagua
clickStart: function () this.camera.fade (0x000000, 200, false); this.time.events.add (200, function () this.game.state.start ('Story');, this); Desvanece la pantalla en un período de 200 milisegundos y luego inicia un nuevo estado después de la misma cantidad de tiempo para sincronizar ambas acciones. Esto es lo que parece en acción:
La combinación de flash y fade hace una buena transición entre estados. Ahora, vamos a pasar al efecto de agitar.
Otro método útil de la cámara Phaser es agitar: se puede usar para situaciones en las que un jugador golpea los obstáculos cuando vuela a través del campo de asteroides o utiliza una poderosa bomba del inventario. Se puede ejecutar al chocar con los objetos del juego que flotan en la pantalla..
sacudida (intensidad, duración, fuerza, dirección, sacudidas);
El primer parámetro controla cuánto tiembla la cámara y el segundo cuánto tiempo durará la sacudida. La tercera es acerca de reemplazar el movimiento que ya se está ejecutando si este parámetro está configurado para cierto. El cuarto controla la vibración horizontalmente, verticalmente o ambos, y el último parámetro decide si la cámara se moverá fuera de los límites del mundo y mostrará lo que haya allí. Aquí está el ejemplo con los valores por defecto:
agitar (0.05, 500, verdadero, Phaser.Camera.SHAKE_BOTH, verdadero);
Sacudirá la cámara con 0.05 intensidad, durante medio segundo (500 milisegundos), la fuerza el parámetro se establece en cierto, la cámara se sacudirá en ambas direcciones, y también fuera de los límites del mundo. Si no necesita personalizar la vibración y dejar los parámetros predeterminados, simplemente puede omitirlos en la llamada y funcionará como antes:
sacudir();
Y así es como se ve el temblor real en el código fuente de Enclave Phaser Template cuando se agregan los puntos en el Juego.js expediente:
this.camera.shake (0.01, 100, true, Phaser.Camera.SHAKE_BOTH, true);
Los últimos tres parámetros son exactamente los mismos que los predeterminados, por lo que podrían haberse omitido, pero se dejaron con fines educativos. Véalo en acción:
En este caso, la intensidad es menor que el valor predeterminado y la duración es más corta para que se sienta un poco más débil, por lo que no distraerá demasiado al jugador..
También hay un pequeño método práctico junto con los tres explicados anteriormente. Puede restablecer cualquier efecto activo, y desde el punto de vista de la programación, ni siquiera tiene que saber si hay alguna ejecución en el momento dado, hay una especial resetFX método que puedes usar.
this.camera.resetFX ();
Inmediatamente borra cualquier efecto de cámara en curso y los elimina de la pantalla.
Si desea saber si algún efecto específico está activo o ya finalizado, puede usar los eventos proporcionados por el marco: enFlashComplete, onFadeComplete, y onShakeComplete.
¿Recuerda el ejemplo de fundido al hacer clic en el botón en el menú principal? Se hizo esperando un tiempo fijo, y luego el estado cambió a uno nuevo. Podemos hacerlo mejor usando el onFadeComplete evento:
haga clic en Continuar: function () this.camera.fade (0x000000, 200, false); this.camera.onFadeComplete.add (function () this.game.state.start ('Game');, this); De esta manera se implementó en el siguiente paso, en el Story.js archivo al cambiar del estado de la historia al juego uno. Tienes que admitir que se ve mejor y el estado se inicia exactamente cuando se completa el efecto, sin importar cuánto dure..
Como puedes ver, esas son características bastante poderosas cuando se trata de agregar este "jugo" o pulido extra a tus juegos. Al mismo tiempo, también son muy fáciles de usar, es genial verlos implementados de forma nativa en Phaser.
Siéntase libre de obtener el código fuente de la Plantilla Enclave Phaser, implementar los efectos y compartir enlaces a sus juegos recientemente actualizados con nosotros en los comentarios!
