Descripción:
¿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 aqui:
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í :
2. Y la segunda es PreloadJS que
es parte de la suite CreateJS, aunque no usaremos nada más que la parte del
Preloader aquí:
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: Descargar
WampServer: Descargar
AppServ: Descarrgar
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 activarmensajes.
DESCARGAR
Link caidos
ResponderBorrarHola Frank, los links ya fueron Reparados, Gracias por comunicarnoslo.
BorrarSaludos.