1. Descargar un fichero Javascript con el código fuente de Phaser. Para descargar este fichero, debemos ir a la web de Phaser:
2. Una vez aquí, pulsaremos en el enlace de descarga desde Github.
3. Llegaremos a una segunda pantalla donde volveremos a pulsar sobre el enlace de descarga llamado min.js.
Con esto habremos descargado la librería de Phaser a nuestro ordenador. Debemos mover este fichero a la carpeta:
c:/xampp/htdocs/elige-tu-propia-aventura
Aquí es donde vamos a trabajar.
IMPORTANTE
Si es usuario de Windows, por defecto las extensiones de archivo no se visualizan. Así, para un fichero llamado index.html usted estará viendo en el explorador de ficheros solo su nombre sin extensión (index). Es mejor si puede ver su nombre completo, con la extensión.
Para visualizar las extensiones de ficheros en Windows 10:
Menú vista -> Panel mostrar u ocultar -> Extensiones de nombre de archivo
Aprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos
003
Editores de código
Como ya comenté en la introducción, este libro está orientado a alguien que ya tiene conocimientos de programación. Siendo así, ya tendrá un editor de código preferido y muy probablemente ese será el que deba usar para codificar los ejemplos.
No obstante, le hago unos comentarios sobre algunos editores de código interesantes:
Sublime text
Este es el editor de código que yo uso. No es de código abierto, aunque lo puede usar gratuitamente (no obstante, cada veinte o treinta veces que salves tu código, aparecerá un pop up sugiriéndote que lo compres). Aunque todos los editores que comento son muy rápidos, este es el más rápido.
Puede descargarlo en: https://www.sublimetext.com/3
Aprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos
004
Visual Studio Code
Está desarrollado por Microsoft y es de código abierto. Pienso que es más completo que el sublime text, aunque algo más lento.
Puede descargarlo en https://code.visualstudio.com
Atom
Desarrollado por la gente de github y de código abierto. Es el que menos me convence de los tres, aunque confieso que no le he dado muchas oportunidades. Para algunos de mis alumnos esta es la primera opción.
Puede descargarlo en: https://atom.io/
Estructura básica del videojuego: El HTML
Todos los juegos que vamos a realizar en Phaser parten de un una estructura, unas primeras líneas de código idénticas.
Vamos a verlo por partes. Primero veremos el fichero index.html en el que insertaremos nuestro código Javascript.
Cuando accedemos con el navegador a una carpeta en la que hay un fichero index.html, el navegador ejecuta directamente ese fichero.
A partir de entonces, aunque solo le mostraré las capturas del código Javascript, usted debe tener en cuenta que dicho código estará insertado dentro de un documento HTML como el que puede observar en la página de la derecha.
A continuación voy a comentar un poco este código, aunque en principio ya debería estar familiarizado con él.
• <!DOCTYPE html>: esta línea le indica al navegador que está leyendo un documento HTML5.
• <head>: aquí va la configuración y carga de estilos de la página. Hay dos líneas súper importantes:
· <meta name=”viewport” content=”user-scalable=no, initial-scale=1, maximumscale=1, width=device-width” />: necesitamos poner esta etiqueta para que el juego se adapte correctamente a las dimensiones de la pantalla y para que el usuario no pueda redimensionarlo.
· <style>: dentro de esta etiqueta, los códigos CSS harán varias cosas:
- Dejar los márgenes de la página a cero.
- Poner el background de la página a color negro (black). Si el juego ocupa toda la pantalla de juego, el color de fondo de la página dará igual, pero si no ocupa toda la pantalla, deberíamos tener en cuenta cuál será el color de fondo que se verá.
- Colocar el canvas en el centro de la pantalla. El canvas es una etiqueta HTML. Es el lienzo donde se va a ir dibujando el juego que vamos a programar.
· <script src=”phaser.min.js”>: esta etiqueta cargará la librería de Phaser. Según mi código, para que la ruta sea correcta, el fichero index.html que estamos editando y el fichero phaser. min.js que hemos descargado de Internet estarán en la misma ubicación.
· <script src=”javascript.js”>: esta etiqueta cargará el fichero Javascript donde está el código que vamos a programar. Según mi código, para que la ruta sea correcta, el fichero index.html que estamos editando y el fichero javascript.js que debemos crear estarán en la misma ubicación.
Aprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos
005
En este punto, todavía no es necesario que comience a escribir código con su editor. Todo esto son solo conceptos teóricos. Si comenzase a codificar y ejecutase el código, todavía no vería nada en su pantalla.
Estructura básica del videojuego: El Javascript
En el capítulo anterior vimos la estructura básica del documento HTML que va a enlazar a nuestro código Javascript. Ahora veremos este código Javascript (página de la derecha) que habitualmente cargaremos cada vez que empecemos a programar nuestros videojuegos y que irá justo antes del cierre de la etiqueta </body>).