html tour - programación de videojuegos html5
DESCRIPTION
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.TRANSCRIPT
![Page 1: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/1.jpg)
Programación de videojuegos HTML5
![Page 2: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/2.jpg)
¿Quién soy?
www.plainconcepts.com
UX Developer at Plain [email protected]#htmltour
Proyectos destacados:
Jesús David García Gómez
![Page 3: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/3.jpg)
¿Quién soy?
www.plainconcepts.com
Desarrollador PHPDesarrollador HTML5 / JavascriptDesarrollador Flash AS3
Proyectos destacados:
Project Prometheus The Hunger Games
Fernando Oteros Pastrana
Twitter: @[email protected]
![Page 4: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/4.jpg)
Preguntas / Dudas / Sugerencias
#htmltour
http://sh4wn.net/htmltour/demos_html5.zip
![Page 5: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/5.jpg)
SVG y Canvas
![Page 6: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/6.jpg)
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.
![Page 7: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/7.jpg)
SVG - Sintaxis
<svg xmlns="http://www.w3.org/2000/svg" height="200px">… </svg>
![Page 8: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/8.jpg)
SVG - Componentes
• Circle:<circle cx="100" cy="100" r="40" fill="red" />
• Rect:<rect x="50" y="140" width="100" height="20" fill="green" />
• Line:<line x1="40" y1="40" x2="40" y2="170" style="stroke: red; stroke-width: 2" />
![Page 9: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/9.jpg)
SVG – Más Componentes
• Ellipse<ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#gradient)" />
• Polygon<polygon points="50,140 150,140, 100,170" fill="blue" />
• Polyline<polyline points="0,0 0,190 200,190 200,0 0,0" fill="transparent" style="stroke: red; stroke-width: 3" />
![Page 10: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/10.jpg)
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
![Page 11: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/11.jpg)
Canvas – Modo de pintado
• Canvas utiliza “modo inmediato”
• SVG, Flash y Silverlight utilizan “modo retenido”
![Page 12: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/12.jpg)
Canvas - Contexto
var canvas = document.getElementById("miCanvas");
var context = canvas.getContext("2d");
![Page 13: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/13.jpg)
Canvas – Comprobar compatibilidad
function IsCanvasCompatible() { var canvas = document.getElementById("miCanvas"); if (!canvas || !canvas.getContext) return false; else return true;}
![Page 14: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/14.jpg)
Canvas – Elementos básicos
• Textocontext.fillText(today, 150, 10);context.strokeText(today, 150, 10);
• Rectánguloscontext.fillRect(0, 0, 150, 75);context.strokeRect(0, 0, 150, 75);context.clearRect(0, 0, 150, 75);
![Page 15: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/15.jpg)
Canvas – Más elementos básicos
• Imágenes
context.drawImage(newImage, 200, 100);
• Pathscontext.beginPath();context.closePath();
![Page 16: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/16.jpg)
Canvas - Path
• Lineascontext.beginPath();context.moveTo(10, 10);context.lineTo(20, 20);context.stroke();context.closePath();
• Arcoscontext.beginPath();context.arc(100, 100, 50, 0, Math.PI);context.fill();context.closePath();
![Page 17: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/17.jpg)
Canvas - Formato
context.textAlign = "center";context.measureText("texto").width;context.font = "60px Arial";context.fillStyle = "red";context.strokeStyle = "red";context.shadowBlur = 10;context.shadowColor = "black";
![Page 18: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/18.jpg)
Canvas – Más formatos
context.lineWidth = lineWidth * 2;context.lineJoin = "round";var gradient = context.createLinearGradient(x, y, dx, dy);gradient.addColorStop(0, primaryColor);gradient.addColorStop(1, secondaryColor);
![Page 19: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/19.jpg)
Programación de videojuegos HTML5
![Page 20: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/20.jpg)
Introducción
• <CANVAS></CANVAS>
• <SVG></SVG>
• <AUDIO></AUDIO>
• <VIDEO></VIDEO>
• Transiciones CSS
• LocalStorage
• WebSockets
![Page 21: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/21.jpg)
Volviendo al Old School
• Limitaciones de los actuales navegadores
• Viejas técnicas y recursos cómo:• Sprites para animaciones• Repetición de fondos.
![Page 22: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/22.jpg)
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta charset="utf-8"><title>Demo 01</title><link type="text/css" rel="stylesheet" href="style.css"><script src="demo01.js"></script></head><body onload="game.init()"> <canvas id="canvas" class="gameLayer" width=“700" height=“500"></canvas></body></html>
Elemento CANVAS Hoja de estilo JS
Estructura básica de los juegos html5
![Page 23: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/23.jpg)
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 } })();.
![Page 24: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/24.jpg)
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.
![Page 25: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/25.jpg)
Uso de requestAnimationFramethis.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.
![Page 26: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/26.jpg)
Pintando nuestro juego
Función “Draw” llamada desde el bucle principal.
this.draw = function () { this.canvasCtx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.canvasCtx.beginPath(); this.canvasCtx.rect(this.rectangulo.x, this.rectangulo.y, this.rectangulo.w, this.rectangulo.h); this.canvasCtx.fillStyle = "#000"; this.canvasCtx.closePath(); this.canvasCtx.fill(); }
![Page 27: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/27.jpg)
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);
![Page 28: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/28.jpg)
Events && keyHandlerswindow.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; } }
![Page 29: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/29.jpg)
Otros eventos
![Page 30: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/30.jpg)
Animando Spriteshttp://www.w3schools.com/html5/canvas_drawimage.asp
game.bufferCanvasCtx.drawImage(spriteObject,posicionXdelPuntero,
posicionYdelPuntero,anchoSprite,
altoSprite, posicionXenCanvas, positionYenCanvas, anchoEnCanvas, altoEnCanvas); }
Función drawImage.Permite desplazarnos a un punto de una imagen, y seleccionar una región a mostrar.
![Page 31: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/31.jpg)
Sonidos
var audio = document.createElement("audio"); //también sirve new Audio(); audio.oncanplaythrought=function(){ //sonidoCargado. audio.play(); } audio.src = “sound.mp3”;
![Page 32: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/32.jpg)
Video en HTML5
<video loop controls id="thevideo" width="320" height="240" preload="auto"> <source src="muirbeach.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' > <source src="muirbeach.webm"type='video/webm; codecs="vp8, vorbis"' > <source src="muirbeach.ogg" type='video/ogg; codecs="theora, vorbis"'> </video>
![Page 33: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/33.jpg)
Video con canal Alpha
function processFrame() { buffer.drawImage(video, 0, 0); var image = buffer.getImageData(0, 0, width, height), imageData = image.data, alphaData = buffer.getImageData(0, height, width, height).data; for (var i = 3, len = imageData.length; i < len; i = i + 4) { imageData[i] = alphaData[i - 1]; } output.putImageData(image, 0, 0, 0, 0, width, height);}
http://jakearchibald.com/scratch/alphavid/ImageData Structure:
![Page 34: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/34.jpg)
Librerías 3D
WebGL:three.js http://mrdoob.github.com/three.js/
Otras:WaveJS http://www.plainconcepts.com/wavejs
![Page 35: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/35.jpg)
PROJECT PROMETHEUS
http://www.projectprometheus.com/trainingcenter/
![Page 36: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/36.jpg)
THE HUNGER GAMES
![Page 37: HTML Tour - Programación de Videojuegos HTML5](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557ae35bd8b42a8f648b5366/html5/thumbnails/37.jpg)
Preguntas / Dudas / Sugerencias
#htmltour
http://sh4wn.net/htmltour/demos_html5.zip