Saltar al contenido →

Another breakout game…

Cuando empecé donmik.com, uno de los proyectos que empecé es programar un juego con javascript y HTML5. Cada vez existen más juegos hechos con estas tecnologías y ya hay multitud de motores de juegos en HTML5 disponibles. Con la aparición de HTML5 y de la etiqueta “canvas“, programar videojuegos se ha convertido en algo un poco más accesible para todos los que hemos soñado poder hacerlo algún día.

Voy a escribir una serie de artículos en los que iré explicando paso a paso el proceso de creación de un juego sencillo y que además seguramente conocéis o habéis jugado algún día: un clon de breakout.

¿Por qué breakout?

He elegido breakout porque era uno de mis juegos preferidos cuando tenía la Game Boy. Entonces el juego se llamaba Arkanoid y he pasado muchas horas jugándolo. Otro de los motivos por el que lo escogí es porque es un juego que tiene una mecánica bastante sencilla, existen bastantes ejemplos o tutoriales por la red que me permiten no empezar a ciegas y a la vez tiene muchas posibilidades para añadir más funcionalidades: power-ups, niveles diferentes, multijugador, …

¿Por dónde empiezo?

Lo primero que voy a hacer es buscar información. Leer, leer y volver a leer. Libros, tutoriales, artículos, … todo lo que encuentre sobre programación de videojuegos en HTML5, tutoriales sobre el mismo juego, libros sobre canvas, … Toda la información que pueda encontrar, leer y asimilar es buena.

Estos son algunos de los libros que os puedo recomendar:

  • HTML5 Canvas de Steve Fulton y Jeff Fulton: Un libro que podéis leer online gracias al servicio que ha puesto en marcha O’Reilly. Este libro le da un repaso completo a la utilización del canvas con ejemplos prácticos y muy detallados. El libro termina también explicando un ejemplo de un videojuego hecho con canvas bastante avanzado.
  • Foundation HTML5 Canvas de Rob Hawkes: Este libro es un poco menos técnico y detallado que el anterior pero también merece la pena sobre todo por los dos ejemplos de videojuegos explicados al final del libro.
  • High Perfomance Javascript de Nicholas Zakas: El libro del que he leído más recomendaciones desde que empecé a interesarme en serio por Javascript. Es muy interesante, aclara bastantes cosas que la mayoría de desarrolladores web no solemos conocer porque hemos aprendido Javascript sobre la marcha. Aunque no trata directamente del tema de videojuegos, es necesario leerlo para tener una buena base de Javascript.
  • Physics for Game Developer de David M. Bourg: Este es el libro que estoy leyendo actualmente. La física es importante en el desarrollo de videojuegos y hace falta una base mínima para poder hacer juegos interesantes y no sólo copiar y pegar cachos de código sin entender la más mínima línea. En el caso de mi breakout, es por supuesto para entender mejor el sistema de colisiones que tengo que implementar. Después de intentar leerme este libro, lo he dejado por imposible. El libro es bastante técnico y dificil de seguir. No os lo recomiendo.

Esto es un elenco pequeño de los libros que me he leído o estoy leyendo para empezar a programar. Además de estos libros, os enseñaré también varias webs en la que podréis encontrar información útil sobre el desarrollo de videojuegos.

¿Qué librería voy a utilizar?

Ninguna… Sí, ninguna. He leído muchas cosas para decidirme por una librería, entre otros este artículo de Build New Games que trata del proyecto Breakouts: se trata de un proyecto en el que cualquiera puede colaborar en crear el mismo juego Breakout pero utilizando una librería distinta. Después de mucho leer, estaba prácticamente convencido en utilizar Crafty, habiendo descartado Impact porque era de pago y de momento no es el momento de invertir 99 $ en una idea loca… Estuve un tiempo leyendo tutoriales sobre Crafty y finalmente me dí cuenta de que antes de aprender a usar un motor de javascript, debería de ser capaz de utilizar javascript. La función del motor debe ser la de facilitar el desarrollo pero es importante saber cómo funcionan las cosas por detrás para adquirir una buena base. Por lo tanto, tomé la decisión de empezar con javascript sin librerías.

Próximamente, seguiré contando el desarrollo de mi breakout y os iré explicando paso a paso la evolución del juego.

Este artículo forma parte de una serie:
  1. Introducción: Another Breakout game…
  2. Diario Breakout – Parte 1
  3. Diario Breakout – Parte 2
  4. Diario Breakout – Parte 3
  5. Diario Breakout – Parte 4
  6. Diario Breakout – Parte 5 y ¿última?
  7. Diario Breakout – Integrar Clay.io

He subido Breakout a GitHub.

Prueba la versión final.