Aprende a crear juegos en HTML5 Canvas

Sobre el sitio.

Desde 2006, Karl Tayfer empezó a escribir tutoriales sobre videojuegos para los que empezaban en este rubro sin conocimiento previo, hospedado en el antiguo portal de sitios GeoCities.

Con la llegada de la tecnología HTML5 y el cierre de GeoCities, empieza una nueva era de tutoriales, convirtiendo el clásico ejemplo del juego de la serpiente a esta nueva y joven tecnología. Sin embargo, el nuevo sitio presenta muchas limitantes comparado con el anterior, que no le permite despegar en forma. Es por ello que, después de considerar diversas opciones, se decide hospedar el tutorial en BlogSpot, comenzando a publicar a inicios del 2012.

Desde entonces, y con apoyo de la comunidad, este blog a pasado de un pequeño tutorial y algunos ejemplos avanzados, a un sistema completo de varios tutoriales que comprenden varias técnicas, aplicaciones y buenas prácticas en el rubro, convirtiéndose al día de hoy en el curso más completo sobre desarrollo de videojuegos en HTML5 Canvas en español.

Este sitio no estaría aquí sin el apoyo de todos ustedes.

Donaciones.

Algunos seguidores me han preguntado sobre como hacer donaciones al blog para agradecer por los cursos que les he compartido, y estoy sumamente agradecido por ello. Para facilitar esta transacción, he creado este botón para aceptar de forma sencilla sus donaciones, si deseas contribuir con la buena causa. Además de inspirarme a continuar con el desarrollo del blog (Que nunca he necesitado dinero para ello), me ayudará a cubrir algunos gastos básicos en el mismo, como el mantenimiento del dominio que estamos usando actualmente.

Sobre el autor.


Karl Tayfer
Joven calabaza que desde semilla deseaba crear videojuegos (O eso dice en su biografía). Conforme aprendió a programar, enfocó todos sus esfuerzos en aplicar dicho conocimiento para el desarrollo de videojuegos, pero el conocimiento era escaso y se encontraba esparcido por toda la web.

Debido a los largos y lentos años que le lleva completar dicha tarea, un día se propone crear el sitio que le hubiera encantado encontrar en la red cuando apenas aprendía a crear videojuegos, encapsulando todo lo que aprendió en un solo lugar, con la esperanza que pudiera servir a alguien en generaciones futuras, sin tener que esforzarse por tantos años para conseguirlo como lo había sido su suerte.

Servicios.


Consejero. Siempre estoy en la mejor disposición de ayudar con las dudas que tengas, y si necesitas resolver una duda rápida y sencilla, con gusto veré resolver tu problema, comentando en el blog, o contactándome en mis redes sociales. Si estás en un proyecto que requiere de constante e intensa retroalimentación, puedo ofrecerte mis servicios por un costo accesible. Para más información puedes contactarme en mis redes sociales o a través del correo karl@canvas.ninja

Desarrollo de videojuegos.
Si después de ver el blog crees que programar videojuegos no es lo tuyo, pero aun tienes un proyecto en mente que te gustaría ver realizado, puedes contratarme para que desarrolle tu videojuego.

Dado que actualmente tengo trabajo de tiempo completo en un importante estudio de desarrollo, la rama de desarrollo de videojuegos g4u está en este momento inactiva. Aun cuando este trabajo demande la mayor parte de mi tiempo, puedes contactarme en mis redes sociales o a través del correo karl@canvas.ninja con la oportunidad de abrir un espacio en mi tiempo para desarrollar tu proyecto, o recomendarte gente que puede trabajar sobre él. Agradezco tu interés en darme la oportunidad de apoyarte en tu proyecto.

25 comentarios:

  1. Hola, me gustaría saber si tienes alguna cuenta de paypal o algo para hacerte una donación por tu gran esfuerzo y dedicación :D

    ResponderBorrar
    Respuestas
    1. Muchas gracias por tu generosa oferta. En PayPal puedes encontrarme con el mismo correo mostrado en este sitio: karl@canvas.ninja

      Borrar
  2. ok, espera mi mensaje pronto para confirmarlo.

    ResponderBorrar
  3. gracias por la oportunidad de entender algo de los juegos, empece un curso con appcelerator titanium y me gustaria crear un juego, pero no se como pues en el curso no lo explican, y tu blog me da la oportunidad de ver como se crea, gracias, muchas gracias,
    no se si me podrias dirigir a otras paginas donde enfoquen el mundo de la creacion del video juego con appcelerator titanium o saber si existe algun programa para generar el videojuego
    muchas gracias por tu tiempo
    marta

    ResponderBorrar
    Respuestas
    1. En el sitio mismo de appcelerator hay muchos tutoriales para hacer juegos con esta herramienta. La pregunta más bien sería... ¿Estás buscando esos tutoriales en español? Ya que de esos si no he encontrado alguno hasta ahora...

      Borrar
  4. ¡Muchas felicidades! Ya he tenido tiempo de revisar tu juego, y ha sido un muy buen juego para empezar. Precisamente el tercer punto que comentas fue el que me llevó a aprender a desarrollar juegos para canvas en un inicio, y me alegra saber que mucha otra gente esté tomando este camino también gracias a los tutoriales que he creado.

    Tal como dices, después de revisar un poco el código, me he dado cuenta hay varios detalles que podrían ser optimizados, pero sin duda ha cumplido bien con su tarea. ¡Muchas felicidades!

    ResponderBorrar
  5. Haz el libro, sabes escribir, transmitir y programar.

    Saludos Karl

    ResponderBorrar
    Respuestas
    1. Jajajajaja!!! Ya estoy trabajando sobre ello, pero creeme, es algo que lleva tiempo en ser cocinado ;)

      Borrar
  6. Oye Karl, me gustaría preguntarte ya que se ve que tienes idea. En que momento se contrata un diseñador gráfico para un juego?. Lo digo porque el diseño también condiciona la programación. En caso de que lo contrates como suelen trabajar? Pago por horas por pedido o como va esa cosa.
    Gracias por tu tiempo

    ResponderBorrar
    Respuestas
    1. En realidad eso depende mucho de cada caso. Lo ideal es que ya tengas un prototipo de como quieres que quede tu juego final, y mandes todo tan específico como puedas al diseñador que contratas, incluyendo tamaños de los gráficos, estilo que deseas, referencias, etc.

      El cobro depende de cada diseñador, pero lo más común es que te cotice un monto total por el trabajo, una vez especificados todos los detalles. Es muy posible que te cobre primero por el diseño general del personaje final (Suponiendo que no tengas ya tú un diseño final, y posteriormente te cobre por cada cuadro en la animación de cada sprite. Aparte serían los fondos, los elementos del juego, y muchos otros detalles como botones, íconos, HUD...

      Planea muy bien cada gráfico necesario en tu juego, para que posteriormente no salgan gastos extra en cuanto al diseño se refiere. Si se ha de programar posterior a los gráficos, en paralelo a su desarrollo o antes, depende ya de cada persona/estudio y la forma en que mejor trabaje.

      A nivel personal, el modo que más me ha agradado y he visto más efectivo, es programar todo con los primeros sketches del diseñador (Literalmente ajustar un dibujo recortado al prototipo del juego), y una vez que se vea funcione correctamente, poner al diseñador a detallarlo con la completa retroalimentación para asegurarse que funcione a la perfección desde la primera.

      Espero mi consejo te ayude a conseguir lo que buscas. Mucha suerte en tu proyecto, y si quieres compartir las experiencias que obtienes de la decisión que tomes, estoy seguro que ayudará a muchísima gente también en el futuro. ¡Buena suerte!

      Borrar
  7. Hace ya un par de semanas me presente en un evento llamado Hell-Hackathon y desarrolle otro juego. Spider-Horror.

    Al no añadir soporte para mutiples navegadores y por un problema con imagenes cuyo nombre contiene "_" la presentacion del juego fue un chasco.

    Pero ahora esta disponible para ser jugado en: http://desiresportal.esy.es/juegos/spider%20horror/

    Un saludo, gracias por tus tutoriales y sigue así.

    PD: Como en la ocasion anterior este juego contiene partes poco optimizadas. La version previa no tenía ni menus, ni mejoras y apenas dos sonidos. Ahora esta mas completo. Podría decirse que a base de "parches".

    ResponderBorrar
  8. Buneas noches, no se si seguiras activo pero quería comentarte que tengo planeado hacer una moba sencilla que se corra en la web.
    Que consejos me darias y que programas debería usar.

    Porfavor contestame a mi correo Lorenzogamboagarcia@gmail.com

    Un saludo y porcierto estoy pensando en donar!!!

    ResponderBorrar
    Respuestas
    1. Bueno, si quieres hacer un MOBA, requieres además del juego lado cliente, manejar las interacciones del lado servidor con sockets. Precisamente he actualizado hace poco los cursos de Node.js, los cuales podrán ayudarte mucho con esta parte.

      Sobre consejos, principalmente, ¡No te rindas! Por muy básico que sea un MOBA, requiere bastante desarrollo antes de tener una base sólida, pero no te rindas, y podrás sacarlo adelante.

      Sí requieres consejos más detallados en algún área especial, con gusto espero tus preguntas.

      PD: Te recomiendo edites tu entrada y remuevas tu correo de esta; muchos spammers aprovechan los correos en los comentarios para llenarlos de basura.

      Borrar
  9. Buneas noches, no se si seguiras activo pero quería comentarte que tengo planeado hacer una moba sencilla que se corra en la web.
    Que consejos me darias y que programas debería usar.

    Porfavor contestame a mi correo Lorenzogamboagarcia@gmail.com

    Un saludo y porcierto estoy pensando en donar!!!

    ResponderBorrar
  10. buenas yo estoy aciendo una pagina web y quiero saber como vincular mi sitio con blogger com hiciste con este de antemano grasias

    ResponderBorrar
    Respuestas
    1. ¿Con "vincular el sitio" quieres decir poner enlaces entre los dos? ¿O hacer que tú dominio redirija a blogger?

      Aunque la pregunta me suena más a lo primero, presiento que te refieres más bien a lo segundo. Si este es el caso, las instrucciones están en esta página: https://support.google.com/blogger/troubleshooter/1233381?hl=es

      Si tienes más dudas, puedes preguntarme con gusto.

      Borrar
  11. Hola tengo una duda estoy siguiendo tus pasos pero me gustaria saber si me podrias resolver esto.
    Como puedo hacer para que cuando golpee un objeto solido me aparezca un cuadro de texto en el cual yo tenga que selecccionar una opccion y cuando la eliga dependiendo el resultado me deje avansar o retroceder. Gracias por tu atencion :)

    ResponderBorrar
    Respuestas
    1. No se bien lo que intentas, pero me suena a una caja informativa de opción múltiple. La idea es que, al entrar en contacto, se pause el juego y despliegue la información en pantalla, entonces las flechas responderán a las opciones. La opción actual se almacenará en una variable, y dibujas condicionalmente de acuerdo ansu valor. Al presionar el botón de selección, actúas dependiendo el valor de esta variable, aunque ya no se específicamente a que te refieres con "avanzar o retroceder". Espero lo que te dije te guíe mejor.

      Borrar
  12. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  13. Buenas tardes maestro, sus tutoriales me han ayudado mucho a resolver dudas en relación a como se manejan los objetos y en general al desarrollo de videojuegos. Qusiera saber si no tiene planeado para este 2018 algunos tuto con Phaser ya que la tendencia del desarrollo de juegos moviles apuntan a esa librería que se ha hecho tan popular.

    ResponderBorrar
    Respuestas
    1. Hola Alexis, muchas gracias por tus comentarios y por hacernos saber que estos tutoriales han sido de gran ayuda para ti.

      Estamos contemplando algunas actualizaciones y nuevos tutoriales, pero dentro de los planes, no tenemos contemplado ninguna librería, incluyendo la de Phaser. Por otro lado, se que hay muchos tutoriales ya al respecto en otros sitios, por lo que espero no tengas complicaciones en conseguir algo de información sobre el uso de dicha librería. ¡Éxito!

      Borrar
  14. Y ahora otra pregunta. Puedo comercializar mis juegos escribiendo puro html5 y javascript, sin tener que usar librerías, puedo por ejemplo monetizar con esas plataformas de juegos online como paisdelosjuego.com y html5games.com sin tener que usar librerías para mis desarrollos?

    ResponderBorrar
    Respuestas
    1. Así es. Mientras desarrolles un juego pulido y de calidad, la mayoría de los sitios lo aceptarán sin necesidad de utilizar librería alguna, siempre y cuando cumplas sus requerimientos (algunos sitios solicitan plugins extra, o algunos si llegan a solicitar el uso de alguna librería en especial, te recomiendo que revises los requerimientos de cada sitio para averiguar que es lo que te piden).

      ¡Éxito! ¡Felices códigos!

      Borrar
  15. hola mucho gusto me encanto los tutoriales muy bien explicados,
    me preguntaba sobre los laberintos, si es posible hacer que cada vez que pasas una sala la siguiente se genere de manera automatica??

    ResponderBorrar
  16. Este comentario ha sido eliminado por el autor.

    ResponderBorrar