Vídeo Curso Aprende a Crear un Juego Multi Plataforma en HTML 5

¿Qué aprenderé?

1. Aprenderás a crear un juego de plataformas. Muy famosos en el mercado y también muy entretenidos.
2. Aprenderás a diseñar con POO en javascript.
3. Aprenderás a manejar colisiones de manera avanzada.
4. Aprenderás a utiliza Sprites en un juego con HTML5.
5. Estudiaremos cómo reaccionar a diferentes tipos de colisiones.
6. Te enseñaremos a crear escenarios y a navegar entre ellos.
7. Aprenderás cómo lograr objetivos, administrar puntaje y mucho más.
8. Veremos el funcionamiento de la librería más famosa para Canvas, Kinetic.js
9. Aprenderás a trabajar con assets.
10. Veremos conceptos de física como la gravedad.
11. Y mucho, mucho más.

 

¿Cómo lo aprenderé?

A través de distintos bloques de tutoriales diseñados por el tutor para que saques mayor provecho del aprendizaje del curso, no sólo te mostramos el código para hacerlo, si no también te explicamos por qué el código es así y cómo llegamos a esa conclusión, de modo que al terminar el curso tú seas capaz de integrar este conocimiento en juegos nuevos.
 
¿Qué necesito?

Hemos diseñado el curso para que sin conocimientos previos, más allá de cómo funciona la web, puedas seguir el curso. Con el funcionamiento, nos referimos a que sepas que todas las páginas tienen HTML, que el estilo se coloca con CSS y que la programación del juego se hará con javascript.
El editor que utilizaremos en el curso se llama Sublime Text 2, y puedes descargarlo en: http://sublimetext.com/3 existe en versiones para OS, Windows y distribuciones Linux.

Utilizaremos 2 librerías (te iremos explicando el por qué durante el curso):

1. La primera es Kinetic.js y puedes ver la página oficial aquí : http://kineticjs.com/
2. Y la segunda es PreloadJS que es parte de la suite CreateJS, aunque no usaremos nada más que la parte del Preloader: http://www.createjs.com/#!/PreloadJS

Ambas librerías podrás encontrarlas en el pack de descarga, en el curso te enseñaremos cómo colocarlas.
Además necesitarás un servidor local, no olvides ver el vídeo correspondiente para saber por qué y cómo instalarlo. Aquí te dejamos algunas recomendaciones para que las instales:
XAMPP: http://www.apachefriends.org/es/xampp.html
WampServer: http://www.wampserver.com/en/
AppServ: http://www.appservnetwork.com/index.php?newlang=spanish
El tutor del curso estará usando XAMPP coriendo sobre Windows 8, pero no tendrás problema sin importar el Sistema Operativo que tengas.
Por último, necesitarás un navegador moderno, Safari, Chrome, Firefox, Opera e Internet Explorer 10 son buenas opciones, el tutor estará utilizando Chrome 24.

Temario Completo (Duración Total: 230 minutos)

Bloque 1: Preparar el entorno
1. Instalar XAMPP.
2. Crear el proyecto y colocar las librerías correspondientes.
3. Sublime Text 2, cómo usarlo.

Bloque 2: Construyendo la base del juego
1. Creación del script principal y del Stage.
2. Creando las clases para el Héroe, los Enemigos y las Plataformas.
3. POO en javascript, enfoque especial a la herencia.
4. Colocando los listeners para los controles.
5. Definiendo el algoritmo de colisión a usar.
6. Colocando el loop del juego.

Bloque 3: Juego con figuras primitivas
1. Dibujando el Héroe con un rectángulo.
2. Moviendo nuestro Héroe con los controles.
3. Aplicando gravedad.
4. Método saltar del Héroe.
5. Jerarquía de KineticJS, el Stage, los Layers, los Assets y más.
6. Agregando los primeros enemigos.
7. Definir el movimiento de los enemigos.

Bloque 4: Colisión con plataformas
1. Dibujar las plataformas con rectángulos.
2. Colisión básica.
3. Colisión entre Héroe y Plataforma.

Bloque 5: Sobre los enemigos
1. Eliminar elementos en colisión y mandar mensaje en caso de fin del juego.
2. Crear el objeto para el juego.
3. Agregar el puntaje.

Bloque 6: Assets
1. Agregar monedas y aumentar puntaje.
2. Agregar la puerta que dará fin al primer nivel.

 Bloque 7: Imágenes.
1. Cargar imágenes con PreloadJS.
2. Construir objetos imágenes para enlazar con los personajes.
3. Modificar los objetos para dibujar imágenes.

Bloque 8: Sprites y movimiento
1. Teoría, qué son y cómo funcionan los Sprites.
2. Genera tu propio Sprite.
3. Agregar el Sprite al juego.
4. Manipular distintas animaciones.
5. Método afterFrame y más manipulación de animaciones.
6. Voltear el personaje.
7. Reescribir drawFunc de Kinetic.

Bloque 9: El fondo
1. Colocar la imagen de fondo.
2. Mover el fondo con el personaje.

Bloque 10 : Nivel Dos
1. Cambiar de nivel.
2. Agregar el objeto de la llave.

Bloque 11: Indicadores
1. Interacción con el DOM.
2. Ganaste/Perdiste activar mensajes.