DESARROLLO DE VIDEO JUEGOS

HTML5 y JavaScript

Matas Iacono
matias.iacono@gmail.com

Agenda (HTML5)

Ejercitndonos con JavaScript

El

problema de JavaScript Algunos ejercicios

HTML5
Canvas
Trabajando

con canvas

Video

Audio
A

jugar!

Code time

Al ver este cono, es momento de poner manos en accin. ~30 minutos.

JavaScript

El estilo no es subjetivo
block {
....

block { .... }

Might work well in other languages

Works well in JavaScript

El estilo no es subjetivo
return { ok: false };

return { ok: true };

SILENT ERROR!

Works well in JavaScript

Clases
function Constructor() { this.member = initializer; return this; // optional }

Constructor.prototype.firstMethod = function (a, b) {...}; Constructor.prototype.secondMethod = function (c) {...};

var newObject = new Constructor();

Funciones son usadas como

Functions Methods Constructors Classes Modules

Algo de TDD? (I)

Nos han entregado el siguiente test y nos piden que construyamos el objeto correspondiente.
var w = new Worker(); w.AddToStack(function () { return 10; }); w.AddToStack(function (val) { return val; }); w.AddToStack(function (val) { return val - 10; }); var counter = 20; while (w.canUnstack()) { var result = w.DoTask(counter); counter = result; if (result !== 10) { alert('Test fail'); break; } }

Timers

Poder disparar cdigo de forma continua y a alta velocidad es clave para el desarrollo de video juego. Temporizadores:

setTimeout() setInterval()

Destructores:

clearTimeout() clearInterval()

Alarma (II)

Se nos ha encargado la construccin de cdigo JavaScript para el manejo de alarmas configurables y un cronmetro.

Segundos de espera:

10 segundos
Iniciar Cronmetro Detener Cronmetro

Mensaje:

Crear Alarma

HTML5

Nuestra gua

Canvas

Paths

Estilos, rectngulos y texto

Dibujando (III)

Teniendo un objeto canvas, nos piden realizar el siguiente dibujo. Se necesita una funcin que pueda manejar el stack de estilos.
Balance the ball!

Hacer juegos

Detrs de los video juegos

Grficos secuenciales (Sprite sheets) Alto consumo de procesamiento. Redibujado constnte. Se dibuja en memoria primero.

Grficos

Dibujando Sprites (IV)

Para un prototipo de la tecnologa, se nos encarg la creacin de un Canvas que al presionar con el mouse, dibuje un sprite.

MiniFramework

Nuestro mini framework

Main.js Rectangle.js BaseClass.js

Jugando (V)

Pong!

Audio

Simple

var audio = new Audio(); audio.src = someAudio.wav; audio.play();

Jugando (VI)

Pong con sonido

Video

Simple, muy simple

<video autoplay="true" controls="controls" loop="true" > <source src=*.mp4" type="video/mp4"/> <source src=*.ogv" type="video/ogg"/> </video>

Video [Propiedades]

.duration .currentTime

Duplicidad (VII)

Le han pedido que el mismo video se pueda visualizar en dos reas de una pgina.

Efectos especiales

Manipulacin de pxeles

for (var i = 0; i < data.length; i += 4) { data[i] = 255 - data[i]; // red data[i + 1] = 255 - data[i + 1]; // green data[i + 2] = 255 - data[i + 2]; // blue // i+3 is alpha (the fourth element) }

Duplicidad (VIII)

Le han pedido que el mismo video se pueda visualizar en dos reas de una pgina, donde la segunda deber estar en escalas de grises.

Times up!