Encuentra el código fuente de este ejemplo aquí. P>
Phaser de fotones Storm es uno de los marcos más confiable para el desarrollo de juegos 2D de calidad profesional en JavaScript. Con Phaser, es factible hacer juegos performant que se ejecutan sin problemas en todos los principales navegadores, en todos los principales sistemas, mientras que sólo el tener que mantener una base de código. Y ahora, la última entrega de Phaser ha hecho su debut:. Phaser 3 p>
Pero, ¿sabía que el mismo código que se ejecuta en el navegador pueden ser envueltos en una aplicación móvil “nativo”? Al combinar Phaser 3 con Apache Cordova, podemos producir juegos que no sólo se ejecutan en el navegador, pero también se pueden publicar en la App Store y Google Play Store. P>
En este artículo, vamos a utilizar Phaser para hacer un simple “juego” que se puede construir para iOS, Android y la Web. Aunque el resultado no será verdaderamente un “juego” en el sentido jugable, los conceptos serán referenciadas introduce de nuevo en futuros tutoriales donde, de hecho, crear juegos jugables. P>
Tabla de contenidos p>
Pre-requisitos (cosas para instalar!) H3>
Vamos a estar tratando con puramente JavaScript (y poco de HTML) a través de este tutorial, por lo que todo lo que necesita para instalar manualmente es Node.js. Esto le dará los ejecutables de nodo y de la NGP en su sistema. P>
Una vez que se instala Node.js, descarga la línea de comandos de Apache Cordova ejecutando este comando en el comando / terminal de línea de comandos: p>
NPM i -g Cordova
Aprender Phaser 3 con nuestro nuevo mini-Grado h3>
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! P>
El acceso al instante temprano p>
Configuración del Proyecto h3>
Cordova incluye proyectos repetitivo que hacen que sea mucho más fácil de empezar con un proyecto habilitada para móviles, así que vamos a tomar ventaja de que, mediante la ejecución de: p>
Córdova crear hola
Esto creará un directorio llamado hola, y copiar varios archivos en el proyecto. p>
A continuación, vamos a instalar Phaser en nuestro proyecto. En nuestro directorio del proyecto, ejecute lo siguiente: p>
cd wwwnpm initnpm i –save phaser123cdwwwnpm initnpmi – Guardar Phaser
Para aquellos no familiarizados con la NGP, las descargas de mando encima del código fuente del marco Phaser y guarda una copia local en la carpeta www / node_modules. De esta manera, tenemos una copia del código sin tener que descargarlo desde un CDN en cada carrera. La razón por la que tiene que tener un archivo package.json independiente en el directorio www es que los archivos estáticos se sirven desde el directorio www, y no strong> de nuestra raíz del proyecto. Si Phaser se instala en la raíz del proyecto, que nunca sería capaz de acceder a él en el navegador. P> A continuación, añadir el apoyo de let para el funcionamiento de nuestra aplicación en un navegador. Vamos a añadir soporte para ejecutar en iOS y Android más tarde. Ejecutar este: p> A continuación, vamos a querer añadir soporte para Live-recarga nuestros cambios cuando editamos nuestro archivo. De lo contrario, Córdoba referida solamente servir a una versión de nuestros archivos, lo que conducirá a una gran cantidad de rascarse la cabeza y preguntándose por qué errores aparentemente no desaparecen, incluso después de cambiar su código! Ejecutar este comando: p> Ahora que hemos establecido nuestro proyecto para el desarrollo, vamos a ejecutar el servidor HTTP: p> Ahora, usted debe ser capaz de visitar http: // localhost: 8000 / index.html para ver su juego en acción p>. En primer lugar, vamos a eliminar el código de arranque que nos da Córdova; que no va a necesitar más. Retire el
Cordova plataforma complemento del navegador plataforma browser1cordova complemento
Cordova Cordova añadir plug-in-plugin-browsersync1cordova complemento complemento Cordova-plugin-browsersync
Cordova navegador de ejecución del navegador –live-reload1cordova run – vivo-recarga
Basic Código de Juego h3>