Estas a punto de proseguir en tu aventura vital con algo que seguro, te ha rondado muchas veces la cabeza. Tu propio juego. Quizá ya hayas hecho alguno, pero por alguna razón te has interesado en Phaser.js. Nosotros creemos que es de lo mejorcito que hay. ¿Ya sabes todo en lo que Phaser.js destaca? Revisa este artículo si no lo tienes claro. Ahora vamos a enseñarte como instalar Phaser.
Phaser.js es una librería JavaScript como otra cualquiera
Esto es importante. Quiere decir que hay muchas opciones de instalar Phaser.js. La clave es que en el juego final tengamos 3 archivos mínimo.- Un fichero HTML. Los navegadores solo comienzan a leer HTML cuando entran a una página. El fichero HTML le puede decir al navegador que hay que cargar más archivos. En los juegos HTML5, por paradójico que pueda resultar, se usa muy poco HTML. En casi todos tus juegos puede ser el mismo.
- Un fichero JavaScript con la lógica del juego. Es el núcleo del juego. Es de lo que hablamos en esta web, cómo programar este archivo (pueden ser varios, pero no vamos a liarnos todavía)
- Otro fichero JavaScript con Phaser.js. En JavaScript para añadir una librería simplemente la añadimos al HTML, igual que si la hubiésemos programado nosotros. No hay diferencia. </ul>
- img: Recursos visuales como texturas, imágenes vectoriales, pixel art, etc...
- js: la lógica del juego
- locales: traducciones del juego, en muchos casos no la necesitamos pero siempre me gusta dejarla
- maps: niveles o mapas si estos han sido creados con un editor como Tiled
- music: canciones de la banda sonora de nuestro juego
- sfx: efectos de sonido, son audios de corta duración
- ttf: tipografías
- index.html, el HTML del juego. El navegador leerá este archivo el primero. Normalmente no necesita ser modificado entre juegos.
- main.js, el comienzo de nuestro juego. En juegos simples puede ir todo allí, en juegos complejos puede llamar a archivos dentro de la carpeta js
- main.css, el CSS básico para ajustar algunas opciones visuales. Normalmente no necesita ser modificado entre juegos.
- phaser.min.js, el fichero con Phaser.js. No lo modifiques. </ul>
¿Cómo se añade un fichero JavaScript a un fichero HTML?
Es muy simple. En HTML contamos con la etiqueta SCRIPT. Esta etiqueta nos permite añadir ficheros con código para que sean ejecutados. SCRIPT no solo contempla JavaScript, en algunos navegadores hay otros lenguajes como VBScript (Internet Explorer) o Dart (Chrome), pero solo JavaScript es universalmente aceptado por todos los navegadores. La etiqueta SCRIPT tiene dos modos de funcionamiento. En uno se introduce el código directamente, en otro se indica el archivo. Nosotros usaremos la segunda opción por ser más legible.
Descargar Phaser.js, ¿qué versión elijo?
Descarga Phaser desde la web oficial. Verás que hay varias versiones.
Creando el espacio de trabajo del juego
La organización es vital en cualquier cosa. Si mantenemos una estructura de trabajo organizada desde el principio tendremos menos dolores de cabeza después.
El fichero index.html
El fichero index.html es muy similar entre juegos, aquí va una versión completamente funcional.El fichero main.css
El fichero main.css tiene como finalidad ajustar el juego a la pantalla a la perfección. Tienes que pensar que los navegadores se pensaron para manejar webs de texto, no juegos, por eso los ajustes por defecto de los navegadores no son los idóneos. Aquí tienes un archivo que podrás copiar a tu ordenador.
¡Ya tienes instalado Phaser.js y tienes hecha la estructura básica de carpetas y archivos del juego! En el siguiente tutorial veremos como iniciar Phaser.js.