Juego estrategia - Parte 1 - Introducción
Hace ya algunos meses que me entretengo con el canvas de Html5, realizando pequeños ejercicios y disfrutando como un enano cuando consigo que algo funcione.
Después de realizar numerosos ejercicios decidí ensamblarlos para crear mi primer mini juego. La idea era crear un juego de estrategía clásico al estilo 'Age of Empires', salvando evidentemente las distancias.
Avancé, avancé, hasta darme cuenta de que necesitaba años para poder acabarlo! principalmente porque no tenía mucho tiempo para dedicarle. A pesar de ello, lo evolucioné tanto como pude porque realmente estaba consiguiendo unos buenos resultados.
Realmente el no poder acabar el juego no me preocupaba demasiado, ya que seguía considerándolo como un ejercicio más de aprendizaje. Pero ¿podía hacer algo más? ¡por supuesto sí! una buena opción era compartir todo lo aprendido, porque además de que compartes (algo que no hago a menudo), consolidas los conocimientos adquiridos y los plasmas en algún sitio más que en los directorios perdidos del PC.
Pues si te interesa aprender a desarrollar pequeños juegos, mejorar tus conocimientos en javascript, incluso física y matemáticas, este es tu tutorial.
En el vídeo, podrás ver una esencia de lo que se puede conseguir.
Aprende a crear un gran escenario con scroll, a insertar elementos gráficos desde un editor de escenarios, a detectar eventos y responder ante ellos, a dotar de inteligencia artificial una torreta de defensa, a mover al jugador por escenario esquivando elementos gráficos como los árboles y principalmente a crear una buena base para cualquier juego y optimizar el rendimiento para que funcione perfectamente fluido.
Es interesante para poder seguir este manual que tengas algunas nociones de programación orientada a objetos en JavaScript o sencillamente conocimientos de javascript. No voy a utilizar técnicas más avanzadas de las que se explican aquí:
El objetivo de estas prácticas es tener una buena base para desarrollar casi cualquier tipo de juego y disfrutarlo en el PC, la tablet o el móvil.
Elección de la API gráfica de desarrollo
HTML5 tiene al menos 3 APIS de desarrollo, entre ellas Canvas. Me decanté por Canvas porque es sencillo y rápido, y se ajusta perfectamente a lo que necesito. Esto es exactamente lo que me leí para decantarme por una u otra:
https://msdn.microsoft.com/es-es/library/dn265058(v=vs.85).aspx
Cosas que podemos conseguir
Esta página tiene un montón de juegos hechos en HTML5 y es gratificante pensar que puedes llegar a crear cualquiera de ellos:
Lo más curioso de todo, es que se trata de una competición donde el handicap principal consiste en crear juegos que no pesen más de 13kb!!. Hacer un poco de scroll hacia abajo y probar alguno, yo me pasé un buen rato con este:
http://js13kgames.com/entries/pest-control-weasels
Ya puedes hacerte una idea de lo que se puede hacer...
En el próximo artículo entraremos ya en materia. Empezaremos con la creación del proyecto y algunas nociones técnicas. Cada ejercicio, dispondrá de los archivos adjuntos necesarios para probar en tu pc.
A continuación, algunos capturas del editor de mapas, sencillo, pero efectivo:
En el próximo ejercicio entraré ya en materia, viendo la estructura de archivos y analizando el motor principal del juego.