Hacer increíbles juegos de plataforma cruzada es ahora más fácil que siempre lo ha sido gracias a Phaser, una biblioteca de desarrollo de juegos Open Source JavaScript desarrollado por Richard Davey y su equipo en Photonstorm. Juegos desarrollados con Phaser se pueden reproducir en cualquier (moderna) del navegador web, y también se pueden convertir en aplicaciones de teléfonos nativos mediante el uso de herramientas tales como Córdoba. P>
Tabla de contenidos p>
Aprender haciendo su primer juego h3>
El objetivo de este tutorial es para enseñarle los fundamentos de este fantástico marco (versión 3.x) mediante el desarrollo del tipo “Frogger” del juego que aparece a continuación: p>
p>
Se puede descargar el juego y el código aquí. Todos los activos incluidos fueron producidos por nuestro equipo y se puede utilizar en sus propias creaciones. P>
objetivos de aprendizaje h3>
- Aprende a crear juegos simples en Phaser 3 li>
- Trabaja con sprites y sus transformadas li>
- métodos principales de una escena Phaser li>
- grupos en el comportamiento de sprites agregada Utilizar li>
- efectos básicas de la cámara (nueva característica Phaser 3) li>
Ul>
Tutorial requisitos h3>
Aprender Phaser 3 con nuestro nuevo mini-Grado h3>
El desarrollo del juego HTML5 Mini-Grado ya está disponible en Zenva Academia. Aprender a código y hacer que los juegos impresionantes con JavaScript y Phaser 3! P>
Obtenga acceso p>
Entorno de desarrollo h3>
El entorno de desarrollo mínimo que necesita consiste en un editor de código, un navegador web y un servidor web local. Los dos primeros son triviales, pero el último requiere un poco más de explicación. ¿Por qué es que necesitamos un servidor web local? P>
Cuando se carga una página web normal, es común que el contenido de la página se carga antes de que las imágenes, ¿verdad? Bueno, imagina si eso ocurriera en un juego. Sería ciertamente un aspecto terrible si la imagen del reproductor carga el juego, pero no está listo. P>
p >
Phaser necesita primero precarga todas las imágenes / activos antes de que comience el juego. Esto significa que el juego tendrán que acceder a archivos después em> de la página se ha cargado. Esto nos lleva a la necesidad de un servidor web. P>
Los navegadores, por defecto, no deje que los sitios web sólo los archivos de acceso de la unidad local. Si lo hicieran, la web sería un lugar muy peligroso! Si hace doble clic en el index.html em> de archivo de un juego Phaser, verá que sus evita que el navegador del juego de la carga de los activos. P>
Es por eso que necesitamos un servidor web strong> a los archivos del servidor. Un servidor web es un programa que las peticiones y respuestas HTTP mangos. Por suerte para nosotros, hay conexión múltiple y fácil de configurar alternativas servidor web local! P>
Configuración de su servidor web local h3>
La solución más sencilla que he encontrado es una aplicación de Chrome llamada (sorprendentemente) Servidor web para Chrome. Una vez que instale esta aplicación, se puede poner en marcha si directamente desde Chrome, y cargar la carpeta del proyecto. P>
p>
p>
Usted será capaz de navegar a esta carpeta escribiendo la URL del servidor web en el navegador. P>
Hello World Phaser 3 h3>
Ahora que nuestro servidor web está en funcionamiento, permite asegurarnos de que tenemos Phaser que se ejecuta en nuestro extremo. Puede encontrar la biblioteca Phaser aquí. Hay diferentes maneras de obtener y Phaser incluyendo en sus proyectos, sino para mantener las cosas simples que va a utilizar la alternativa CDN. Me gustaría recomendar que utilice el expediente no minified para el desarrollo -. Que le hará la vida más fácil cuando la depuración del juego p>
desarrolladores más avanzados podrían desviarse de estas instrucciones y usar una configuración de entorno de desarrollo más sofisticado y flujo de trabajo. Que cubran los citados está fuera del alcance de este tutorial, pero se puede encontrar un gran punto de partida aquí, que utiliza webpack y Babel. P>
En nuestra carpeta de proyecto, crear un archivo index.html con el siguiente contenido: p>
Aprender el desarrollo del juego en Zenva.com title>
Ul>
Tutorial requisitos h3>
Aprender Phaser 3 con nuestro nuevo mini-Grado h3>
El desarrollo del juego HTML5 Mini-Grado ya está disponible en Zenva Academia. Aprender a código y hacer que los juegos impresionantes con JavaScript y Phaser 3! P>
Obtenga acceso p>
Entorno de desarrollo h3>
El entorno de desarrollo mínimo que necesita consiste en un editor de código, un navegador web y un servidor web local. Los dos primeros son triviales, pero el último requiere un poco más de explicación. ¿Por qué es que necesitamos un servidor web local? P>
Cuando se carga una página web normal, es común que el contenido de la página se carga antes de que las imágenes, ¿verdad? Bueno, imagina si eso ocurriera en un juego. Sería ciertamente un aspecto terrible si la imagen del reproductor carga el juego, pero no está listo. P>
p >
Phaser necesita primero precarga todas las imágenes / activos antes de que comience el juego. Esto significa que el juego tendrán que acceder a archivos después em> de la página se ha cargado. Esto nos lleva a la necesidad de un servidor web. P> Los navegadores, por defecto, no deje que los sitios web sólo los archivos de acceso de la unidad local. Si lo hicieran, la web sería un lugar muy peligroso! Si hace doble clic en el index.html em> de archivo de un juego Phaser, verá que sus evita que el navegador del juego de la carga de los activos. P> Es por eso que necesitamos un servidor web strong> a los archivos del servidor. Un servidor web es un programa que las peticiones y respuestas HTTP mangos. Por suerte para nosotros, hay conexión múltiple y fácil de configurar alternativas servidor web local! P> La solución más sencilla que he encontrado es una aplicación de Chrome llamada (sorprendentemente) Servidor web para Chrome. Una vez que instale esta aplicación, se puede poner en marcha si directamente desde Chrome, y cargar la carpeta del proyecto. P> Usted será capaz de navegar a esta carpeta escribiendo la URL del servidor web en el navegador. P> Ahora que nuestro servidor web está en funcionamiento, permite asegurarnos de que tenemos Phaser que se ejecuta en nuestro extremo. Puede encontrar la biblioteca Phaser aquí. Hay diferentes maneras de obtener y Phaser incluyendo en sus proyectos, sino para mantener las cosas simples que va a utilizar la alternativa CDN. Me gustaría recomendar que utilice el expediente no minified para el desarrollo -. Que le hará la vida más fácil cuando la depuración del juego p> desarrolladores más avanzados podrían desviarse de estas instrucciones y usar una configuración de entorno de desarrollo más sofisticado y flujo de trabajo. Que cubran los citados está fuera del alcance de este tutorial, pero se puede encontrar un gran punto de partida aquí, que utiliza webpack y Babel. P> En nuestra carpeta de proyecto, crear un archivo index.html con el siguiente contenido: p>
Configuración de su servidor web local h3>
p>
p>
Hello World Phaser 3 h3>