Una de las cosas que casi todos los juegos tienen en común es una pantalla de carga, que puede ser utilizado para informar al jugador de cuánto tiempo tienen que esperar para jugar el juego. A pesar de que a nadie le gusta la espera de jugar un juego, una pantalla de carga es una herramienta valiosa. En lugar de tener jugadores quedan mirando una pantalla en blanco, la pantalla de carga se puede utilizar para informar al jugador de cuánto tiempo tienen que esperar, o por lo menos dejar que el jugador sabe que el juego está haciendo algo.

En Phaser, antes de poder utilizar cualquier activo, primero debe cargar en función de precarga de la escena. Si se carga un gran número de activos, puede tomar algún tiempo para que todos los activos para ser cargado en el juego, y aquí es donde un preloader que realmente hace la diferencia.

El objetivo de este tutorial es para enseñarle los fundamentos de crear una pantalla de precarga mediante la creación de una barra de progreso que actualizará dinámicamente a medida que se carga el juego de los activos. Se puede ver lo que vamos a crear a continuación:


Puede descargar todos los archivos asociados con el código fuente aquí:

Tabla de contenidos

Aprender Phaser 3 con nuestro nuevo mini-Grado

El desarrollo del juego HTML5 Mini-Grado ya está disponible para pre-pedido en Zenva Academia. Aprender a código y hacer que los juegos impresionantes con JavaScript y Phaser 3!

El acceso al instante temprano

Configuración del Proyecto

Con el fin de ejecutar su juego Phaser localmente, se necesita un servidor web para ejecutar su juego. Si aún no dispone de esta configuración, se puede leer cómo hacerlo aquí: Inicio Conseguir Con Phaser. También necesitará un IDE o editor de texto para escribir el código. Si usted no tiene ya uno, yo recomendaría el Bracketseditor ya que es fácil de usar, y tiene una característica llamada vista previa en vivo que le permitirá ejecutar su juego Phaser sin necesidad de instalar un servidor web.

Una vez que tenga estos configuración, vamos a configurar el código básico para nuestro juego. Abrir el IDE, y crear un nuevo archivo llamado index.html. Vamos a crear una página HTML básico, agregue una referencia a Phaser, y crear nuestro objeto Phaser juego. En index.html, agregue el código siguiente: