Читать книгу Aprender desarrollo de videojuegos para móviles y web con Phaser.js - Pablo Monteserín - Страница 14
Оглавление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>). En el documento anterior, la carga de este fichero está referenciada por la línea:
<script src="javascript.js"></script>
A continuación voy a comentar las variables declaradas en el código de la página de la derecha:
La variable config
Como puede ver, tenemos un objeto llamado “config” que define varios aspectos básicos del juego:
• Phaser.AUTO: especifica el renderizador. Sus valores pueden ser CANVAS, WEBGL, HEADLESS y AUTO. Programaremos utilizando el valor AUTO, que automáticamente escogerá una buena opción.
• El ancho (960px) y el alto (640px): estas medidas definen el tamaño del canvas (el rectángulo dónde se desarrollará el juego). Más adelante añadiremos un código Javascript para que, manteniendo la proporción definida por esas medidas, el canvas se deforme para ocupar toda la pantalla del dispositivo.
• Scene: aquí indicamos la o las escenas de juego. Si el juego tiene una sola escena, como el que estamos haciendo, la indicamos directamente. Si fueran varias, utilizaríamos un array, y el primer elemento de dicho array sería la escena inicial del juego.
La clase escena
Ya que estamos usando ECMAScript6, cada una de las escenas de nuestros juegos será una clase. Esta clase tendrá habitualmente tres métodos fundamentales (aunque en este primer juego no usaremos el método update):
• preload: dentro de este método precargaremos los recursos que utilizará el juego (imágenes, sonidos, ficheros JSON, etc).
• create: esta función se ejecuta una sola vez al comienzo del programa. Se encarga de hacer la configuración básica y poner los objetos en pantalla.
• update: esta función se ejecuta varias veces por segundo. Gestiona los movimientos del protagonista del juego y de sus enemigos, las colisiones entre ellos y, en general, todo lo que necesite ser evaluado de manera constante.
Aprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos
006
La siguiente captura muestra lo que veremos por consola. Para acceder a ella, pulsaremos F12 o botón derecho > Inspeccionar. En la pestaña Consola podemos ver el resultado de ejecutar la instrucción console.log. Con esto, comprobaremos si el código que hemos escrito funciona correctamente. En la siguiente pantalla se ve lo que muestra por consola el navegador Firefox.