Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML Tour - Programación de Videojuegos HTML5

3,570 views

Published on

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.

Published in: Technology
  • Be the first to comment

HTML Tour - Programación de Videojuegos HTML5

  1. 1. Programación de videojuegos HTML5
  2. 2. ¿Quién soy? Jesús David García Gómez UX Developer at Plain Concepts dgarcia@plainconcepts.com #htmltour Proyectos destacados: www.plainconcepts.com
  3. 3. ¿Quién soy? Fernando Oteros Pastrana Desarrollador PHP Desarrollador HTML5 / Javascript Desarrollador Flash AS3 Proyectos destacados: Twitter: @sh4wner Project Prometheus The Hunger Gamesfoteros@plainconcepts.com www.plainconcepts.com
  4. 4. Preguntas / Dudas / Sugerencias #htmltour http://sh4wn.net/htmltour/demos_html5.zip
  5. 5. SVG y Canvas
  6. 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.
  7. 7. SVG - Sintaxis <svg xmlns="http://www.w3.org/2000/svg" height="200px"> … </svg>
  8. 8. 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" />
  9. 9. 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" />
  10. 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. 11. Canvas – Modo de pintado • Canvas utiliza “modo inmediato” • SVG, Flash y Silverlight utilizan “modo retenido”
  12. 12. Canvas - Contexto var canvas = document.getElementById("miCanvas"); var context = canvas.getContext("2d");
  13. 13. Canvas – Comprobar compatibilidad function IsCanvasCompatible() { var canvas = document.getElementById("miCanvas"); if (!canvas || !canvas.getContext) return false; else return true; }
  14. 14. Canvas – Elementos básicos • Texto context.fillText(today, 150, 10); context.strokeText(today, 150, 10); • Rectángulos context.fillRect(0, 0, 150, 75); context.strokeRect(0, 0, 150, 75); context.clearRect(0, 0, 150, 75);
  15. 15. Canvas – Más elementos básicos • Imágenes context.drawImage(newImage, 200, 100); • Paths context.beginPath(); context.closePath();
  16. 16. Canvas - Path • Lineas context.beginPath(); context.moveTo(10, 10); context.lineTo(20, 20); context.stroke(); context.closePath(); • Arcos context.beginPath(); context.arc(100, 100, 50, 0, Math.PI); context.fill(); context.closePath();
  17. 17. 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";
  18. 18. 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);
  19. 19. Programación de videojuegos HTML5
  20. 20. Introducción • <CANVAS></CANVAS> • <SVG></SVG> • <AUDIO></AUDIO> • <VIDEO></VIDEO> • Transiciones CSS • LocalStorage • WebSockets
  21. 21. Volviendo al Old School • Limitaciones de los actuales navegadores • Viejas técnicas y recursos cómo: • Sprites para animaciones • Repetición de fondos.
  22. 22. Estructura básica de los juegos html5 <!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
  23. 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. 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. 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.
  26. 26. 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(); }
  27. 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. 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; } }
  29. 29. Otros eventos
  30. 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. 31. Sonidos var audio = document.createElement("audio"); //también sirve new Audio(); audio.oncanplaythrought=function(){ //sonidoCargado. audio.play(); } audio.src = “sound.mp3”;
  32. 32. 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>
  33. 33. 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:
  34. 34. Librerías 3D WebGL: three.js http://mrdoob.github.com/three.js/ Otras: WaveJS http://www.plainconcepts.com/wavejs
  35. 35. PROJECT PROMETHEUS http://www.projectprometheus.com/trainingcenter/
  36. 36. THE HUNGER GAMES
  37. 37. Preguntas / Dudas / Sugerencias #htmltour http://sh4wn.net/htmltour/demos_html5.zip

×