En la charla veremos características comunes de los juegos y su aplicación práctica en canvas HTML5. Analizaremos varios tipos de juegos, tanto 2D como 3D y estudiaremos las diferentes maneras implementarlos mientras comentamos las partes clave de su estructura. Para finalizar echaremos un vistazo al framework desarrollado por PlainConcepts para la creación de diferentes tipos de juegos 2D y 3D en HTML5.
6. SVG
• SVG son las siglas de Scalable Vector Graphics
• Es un lenguaje para describir gráficos en 2D en XML.
• Con HTML5, podemos agregar un SVG al DOM
• Acceso a sus elementos.
10. Canvas
• El elemento <canvas> se utiliza para pintar gráficos.
• Es un contenedor, debemos usar scripts para pintar los gráficos en el.
• Podemos tener más de un <canvas> en nuestra web
11. Canvas – Modo de pintado
• Canvas utiliza “modo inmediato”
• SVG, Flash y Silverlight utilizan “modo retenido”
12. Canvas - Contexto
var canvas = document.getElementById("miCanvas");
var context = canvas.getContext("2d");
13. Canvas – Comprobar compatibilidad
function IsCanvasCompatible() {
var canvas = document.getElementById("miCanvas");
if (!canvas || !canvas.getContext)
return false;
else
return true;
}
21. Volviendo al Old School
• Limitaciones de los actuales navegadores
• Viejas técnicas y recursos cómo:
• Sprites para animaciones
• Repetición de fondos.
23. Game.js
var game = (function () {
var canvas,
canvasCtx;
//Initialize: Crea los objetos que vamos a usar en el juego.
function initialize() {
//Crear objetos
}
//Loop: Se ejecuta en cada ciclo actualizando objetos y pintando el canvas .
function loop() {
update();
draw();
}
//Update: Actualiza cada uno de los objetos de nuestro juego, su posición, disparos, etc…
function update() {
player.update();
}
//Draw: Pinta en el canvas nuestros objetos
function draw() {
ctx.drawImage(buffer, 0, 0);
}
return {
init: initialize
}
})();
.
24. GameLoop: setTimeOut vs RequestAnimationFrame
GameLoop o bucle principal
Llama a la función Update y Draw.
Antes: setTimeOut(function,time);
Con html5: requestAnimationFrame (function);
Hasta que no termina de realizar todas las operaciones no vuelve a ser
llamado, optimizando de esta manera la experiencia de usuario.
25. Uso de requestAnimationFrame
this.loop = function () {
this.update();
this.draw();
gameInterval = window.requestAnimationFrame(loop);
}
this.update = function () {
player.update();
}
gameInterval = window.requestAnimationFrame(loop);
Una vez inicializado el requestAnimationFrame, lo volvemos a
llamar desde el metodo update cuando finaliza cada ciclo.
Snippet incluído en la demo.
27. Canvas buffer
Canvas oculto.
Lo copiamos al Canvas visible.
Evita la sensación de flickering (parpadeo).
this.bufferCtx.clearRect(0, 0, this.buffer.width, this.buffer.height);
this.bufferCtx.beginPath();
this.bufferCtx.rect(this.rectangulo.x, this.rectangulo.y,
this.rectangulo.w, this.rectangulo.h); this.bufferCtx.fillStyle = "#000";
this.bufferCtx.closePath();
this.bufferCtx.fill();
this.canvasCtx.clearRect(0, 0, this.buffer.width, this.buffer.height);
this.canvasCtx.drawImage(this.buffer, 0, 0);
28. Events && keyHandlers
window.addEventListener('keydown', doKeyDown, true);
function doKeyDown(evt) {
switch (evt.keyCode) {
case 38: /* Up arrow was pressed */
//acciones de salto;
player.salta();
break;
case 40: /* Down arrow was pressed */
//agacharse;
player.agacha();
break;
case 37: /* Left arrow was pressed */
//caminar;
player.move(1);
break;
case 39: /* Right arrow was pressed */
//caminar;
player.move(2);
break;
}
}
30. Animando Sprites
http://www.w3schools.com/html5/canvas_drawimage.asp
game.bufferCanvasCtx.drawImage( Función drawImage.
spriteObject, Permite desplazarnos a un punto de una imagen, y
posicionXdelPuntero, seleccionar una región a mostrar.
posicionYdelPuntero,
anchoSprite,
altoSprite,
posicionXenCanvas,
positionYenCanvas,
anchoEnCanvas,
altoEnCanvas);
}
31. Sonidos
var audio = document.createElement("audio"); //también sirve new Audio();
audio.oncanplaythrought=function(){
//sonidoCargado.
audio.play();
}
audio.src = “sound.mp3”;