A lo largo de la historia humana, cada vez que aparece una nueva tecnología (la electricidad, los computadores, Internet) siempre habrá alguien con mucho tiempo libre que creará un juego con esta nueva tecnología. HTML5 por supuesto no fue la excepción.
Se pueden crear juegos sin ninguna librería adicional, utilizando solamente HTML y JavaScript, pero este camino es recomendado sólo si quieres crear una librería de juegos en vez de un juego. La mayoría de las cosas necesarias para crear un juego (mostrar imágenes, animar, mover una imagen, input del usuario, etc) ya han sido empaquetas en cómodas librerías.
Quienes hemos participado en el desarrollo de estos frameworks nos aseguramos que todo lo anterior funcione para que tú te concentres en tu juego y no en las herramientas.
En un mundo ideal los frameworks de juegos se podrían tratar como una "caja negra", es decir ignorar su interior. Pero en el mundo real si vas a crear juegos de HTML5, debes entender cómo fuciona tu framework.
Si te familiarizas con el código fuente de la librería que estás utilizando, tendrás una enorme ventaja al momento de trabajar en tus juegos. Como estamos hablando de última tecnología, no todo está en Google ni en Stack Overflow. Aprender cómo funciona tu framework te ahorrará mucho tiempo y dolores de cabeza.
Algunos frameworks populares, gratis y de código abierto son Phaser, Quintus, MelonJs, Crafty, Babylon.js para juegos en 3D. Yo utilizaré Phaser en este tutorial porque es adecuado tanto para principiantes como para usuarios más avanzados.
Phaser tiene una de las communities para juegos en 3D. Yo utilizaré Phaser en este tutorial porque es adecuado tanto para principiantes como para usuarios más avanzados.
Antes de Comenzar - Ten todo esto listo!
Como siempre, estoy transformando un simple tutorial en un ebook de proporciones faraónicas, pero así me gusta escribir así que resumamos todo lo que he mencionado hasta ahora. Ten lo siguiente listo para comenzar:
El objeto Phaser está disponible en nuestro ámbito ya que incluímos phaser.js. Cuando creamos un nuevo juego podemos definir el ancho, alto y el renderer que se va a utilizar para mostrar el juego en pantalla.
Phaser utiliza una librería llamada Pixi.js que permite renderizar en WebGL, y si el navegador no lo soporta, utiliza CANVAS. En nuestro caso dejamos esto como automático para que se intente utilizar WebGL y si no está presente, Canvas.
2.- Necesitamos de un estado para nuestro juego.
Un estado en Phaser es un tipo de objeto de JavaScript que tiene ciertos métodos necesarios para el flujo del juego.
Acá es donde el juego comienza oficialmente.
¿Por qué hay que pre-cargar las imágenes y otros archivos?
El proceso de precargado lo que hace es leer estos archivos del disco y cargarlos en la memoria RAM. Leer por ejemplo una imagen desde la memoria RAM es mucho más rápido que hacerlo desde el disco.
Cuando necesitas mostrar un enemigo o un personaje en tu juego, quieres que se muestre de manera inmediata. Si cada vez que necesitamos algo lo tenemos que cargar del disco nuestro juego va a funcionar muy lento. Piensa en la página de Facebook cuando no todo se carga y varios elementos aparece como que se están cargando. Algo así en un juego sería inaceptable. Por eso pre-cargamos los archivos!
Se pueden crear juegos sin ninguna librería adicional, utilizando solamente HTML y JavaScript, pero este camino es recomendado sólo si quieres crear una librería de juegos en vez de un juego. La mayoría de las cosas necesarias para crear un juego (mostrar imágenes, animar, mover una imagen, input del usuario, etc) ya han sido empaquetas en cómodas librerías.
Quienes hemos participado en el desarrollo de estos frameworks nos aseguramos que todo lo anterior funcione para que tú te concentres en tu juego y no en las herramientas.
En un mundo ideal los frameworks de juegos se podrían tratar como una "caja negra", es decir ignorar su interior. Pero en el mundo real si vas a crear juegos de HTML5, debes entender cómo fuciona tu framework.
Si te familiarizas con el código fuente de la librería que estás utilizando, tendrás una enorme ventaja al momento de trabajar en tus juegos. Como estamos hablando de última tecnología, no todo está en Google ni en Stack Overflow. Aprender cómo funciona tu framework te ahorrará mucho tiempo y dolores de cabeza.
Algunos frameworks populares, gratis y de código abierto son Phaser, Quintus, MelonJs, Crafty, Babylon.js para juegos en 3D. Yo utilizaré Phaser en este tutorial porque es adecuado tanto para principiantes como para usuarios más avanzados.
Phaser tiene una de las communities para juegos en 3D. Yo utilizaré Phaser en este tutorial porque es adecuado tanto para principiantes como para usuarios más avanzados.
Antes de Comenzar - Ten todo esto listo!
Como siempre, estoy transformando un simple tutorial en un ebook de proporciones faraónicas, pero así me gusta escribir así que resumamos todo lo que he mencionado hasta ahora. Ten lo siguiente listo para comenzar:
- El Intel XDK o alguna otra opción para desarrollar apps híbridas
- Descarga el código fuente e imágenes del tutorial..
- 1.- Descarga Phaser.
- Mantén abierta la documentación de Phaserdurante todo el tiempo
- Phaser.js es la librería que descargaste de Github o la que venía con el proyecto. Puedes usar también la versión minificada (.min.js). Yo prefiero desarrollar con la versión no minificada para familiarizarme con el código fuente
El objeto Phaser está disponible en nuestro ámbito ya que incluímos phaser.js. Cuando creamos un nuevo juego podemos definir el ancho, alto y el renderer que se va a utilizar para mostrar el juego en pantalla.
Phaser utiliza una librería llamada Pixi.js que permite renderizar en WebGL, y si el navegador no lo soporta, utiliza CANVAS. En nuestro caso dejamos esto como automático para que se intente utilizar WebGL y si no está presente, Canvas.
2.- Necesitamos de un estado para nuestro juego.
game.state.add('GameState', GameState);Un estado en Phaser es un tipo de objeto de JavaScript que tiene ciertos métodos necesarios para el flujo del juego.
Acá es donde el juego comienza oficialmente.
- update() este método es llamado hasta 60 veces por segundo. Todo lo que pongas acá se ejecutará entonces muchas veces! acá se evalúan condiciones tales como la existencia de colisiones, input del usuario, sprites en algún lugar del nivel, etc
¿Por qué hay que pre-cargar las imágenes y otros archivos?
El proceso de precargado lo que hace es leer estos archivos del disco y cargarlos en la memoria RAM. Leer por ejemplo una imagen desde la memoria RAM es mucho más rápido que hacerlo desde el disco.
Cuando necesitas mostrar un enemigo o un personaje en tu juego, quieres que se muestre de manera inmediata. Si cada vez que necesitamos algo lo tenemos que cargar del disco nuestro juego va a funcionar muy lento. Piensa en la página de Facebook cuando no todo se carga y varios elementos aparece como que se están cargando. Algo así en un juego sería inaceptable. Por eso pre-cargamos los archivos!
i te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:
El Mundo de Ubuntu en las Redes Sociales
Espero que esta publicación te haya gustado. Si tienes alguna duda, consulta o quieras complementar este post, no dudes en escribir en la zona de comentarios. También puedes visitar Facebook, Twitter, Google +, Linkedin, Instagram, Pinterest, restantes Redes Sociales y Feedly donde encontrarás información complementaria a este blog. COMPARTE EN!