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.

19 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

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

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

    ResponderEliminar
  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

    ResponderEliminar
    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...

      Eliminar
  4. Me encantan estos tutoriales y he aprendido bastante hasta ahora.

    De echo he acabado de pasar a canvas un juego que tenía echo en Blender.

    He decidido rehacer el juego en canvas por diversas razones:
    - Es un juego 2d, la 3ª dimension me sobra.
    - Por problemas de optimización, en algunos equipos iba lento.
    - El usuario quiere jugar el juego. Cuanto mas cerca esté de eso mejor.

    El primer punto esta claro.

    El segundo es que en uno de los ordenadores de casa el juego iba demasiado lento y era imposible disfrutarlo como debiera. Ahora no hay ese problema.

    El tercero es que el usuario no desea tener que andar descargando el juego, desempaquetando un archivo .zip o .rar para despues instalar y finalmente disfrutar un juego. El usuario quiere jugar el juego. Cuantos menos pasos tenga que dar para disfrutarlo mejor.

    Finalmente este es el resultado: http://desiresportal.esy.es/

    El resultado es fiel al original, pero con las instrucciones y sin algunos errores.

    Un saludo y gracias por enseñarnos a desarrollar juegos en canvas.

    PD: Sé que gran parte del codigo esta sin optimizar, pero tenía algo de prisa para poder dedicarme a otros de los muchos proyectos que tengo pendientes.

    ResponderEliminar
    Respuestas
    1. ¡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!

      Eliminar
    2. 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".

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

    Saludos Karl

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

      Eliminar
  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

    ResponderEliminar
    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!

      Eliminar
  7. 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!!!

    ResponderEliminar
    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.

      Eliminar
  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!!!

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

    ResponderEliminar
    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.

      Eliminar
  10. 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 :)

    ResponderEliminar
    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.

      Eliminar