Phaser es un marco de juego HTML5 fantástico, que puede ser fácilmente ejecutarse en cualquier dispositivo. La desventaja es, ya que es un marco HTML 5, no existe una solución fuera de la caja para crear una versión de la aplicación móvil de su juego. Se pueden usar otras herramientas como PhoneGap, CocoonJS, iónica, etc., para crear una aplicación móvil híbrida, pero usted es dependiente de herramientas de terceros. Sin embargo, si a optimizar su juego correctamente, cualquiera puede jugar su juego en un dispositivo móvil, pero requiere que el usuario visite su sitio, y no tiene algunas de las características de la aplicación agradables, como un icono en la pantalla principal, o jugar el juego cuando se está fuera de línea.

¿Qué pasa si usted podría tener una aplicación híbrida que es una mezcla de una aplicación móvil nativa y una aplicación web? Progresiva Aplicaciones Web, o personas con SIDA, sensación como una aplicación móvil nativa, puede trabajar sin conexión, son sensibles, y son muy fáciles de instalar. Además, podemos hacer nuestro juego un PWA sin ningún tipo de herramientas de terceros. Sólo tenemos que añadir algunos archivos a nuestro proyecto, y tenemos que añadir algo de código adicional a nuestra página principal html.

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

No se pierda! extremos de la oferta en

  • Accede a los más de 200 cursos
  • Nuevos cursos añadió mensual
  • Cancelar en cualquier momento
  • Los certificados de terminación

    ACCESO ahora

    Tabla de contenidos

    Tutorial Requisitos

    En este tutorial, necesitará lo siguiente:


    • Básico de habilidades intermedias de JavaScript
    • Un editor de código
    • Un servidor web local
    • Navegador Chrome Web

      En este tutorial, se recomienda que usted está familiarizado con los conceptos básicos tales como Phaser escenas, configurando la configuración de su juego, el funcionamiento de su juego a nivel local, etc. Si no está familiarizado con estos conceptos, usted será capaz de a seguir, junto con el tutorial, pero no vamos a estar cubriendo estos temas en profundidad. Si desea obtener más información acerca de estos conceptos o desea un repaso, puede revisar la Cómo crear un juego con 3 Phaser tutorial aquí en GameDev Academia.

      Configuración del Proyecto

      En este tutorial, vamos a reutilizar una parte del código de la plantilla de proyecto 3 webpack Phaser que está disponible en GitHub. Nosotros no vamos a usar webpack para este tutorial, pero vamos a utilizar la imagen del logotipo Phaser plantilla base y que se encuentra en el repositorio, junto con algunas imágenes adicionales y una hoja de estilo. Puede descargar el código del proyecto base aquí: Plantilla del proyecto

      En la carpeta zip, verá tres carpetas (CSS, JS, y IMG) y un archivo index.html. Si index.html abierta en el editor de código, debería ver el siguiente código: