Programación de videojuegos HTML5
¿Quién soy?              Jesús David García Gómez              UX Developer at Plain Concepts              dgarcia@plainco...
¿Quién soy?                            Fernando Oteros Pastrana                            Desarrollador PHP              ...
Preguntas / Dudas / Sugerencias              #htmltour        http://sh4wn.net/htmltour/demos_html5.zip
SVG y Canvas
SVG  • SVG son las siglas de Scalable Vector Graphics  • Es un lenguaje para describir gráficos en 2D en XML.  • Con HTML5...
SVG - Sintaxis   <svg xmlns="http://www.w3.org/2000/svg" height="200px">   …   </svg>
SVG - Componentes  • Circle:   <circle cx="100" cy="100" r="40" fill="red" />  • Rect:   <rect x="50" y="140" width="100" ...
SVG – Más Componentes  • Ellipse   <ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#gradient)" />  • Polygon   <polyg...
Canvas  • El elemento <canvas> se utiliza para pintar gráficos.  • Es un contenedor, debemos usar scripts para pintar los ...
Canvas – Modo de pintado   • Canvas utiliza “modo inmediato”   • SVG, Flash y Silverlight utilizan “modo retenido”
Canvas - Contexto   var canvas = document.getElementById("miCanvas");   var context = canvas.getContext("2d");
Canvas – Comprobar compatibilidad   function IsCanvasCompatible() {       var canvas = document.getElementById("miCanvas")...
Canvas – Elementos básicos   • Texto               context.fillText(today, 150, 10);               context.strokeText(toda...
Canvas – Más elementos básicos   • Imágenes             context.drawImage(newImage, 200, 100);   • Paths                  ...
Canvas - Path   • Lineas              context.beginPath();              context.moveTo(10, 10);              context.lineT...
Canvas - Formato   context.textAlign = "center";   context.measureText("texto").width;   context.font = "60px Arial";   co...
Canvas – Más formatos   context.lineWidth = lineWidth * 2;   context.lineJoin = "round";   var gradient = context.createLi...
Programación de videojuegos HTML5
Introducción • <CANVAS></CANVAS> • <SVG></SVG> • <AUDIO></AUDIO> • <VIDEO></VIDEO> • Transiciones CSS • LocalStorage • Web...
Volviendo al Old School  • Limitaciones de los actuales navegadores  • Viejas técnicas y recursos cómo:     • Sprites para...
Estructura básica de los juegos html5   <!DOCTYPE html>   <html>   <head>   <meta http-equiv="content-type" content="text/...
Game.js       var game = (function () {                  var canvas,                 canvasCtx;                  //Initial...
GameLoop: setTimeOut vs RequestAnimationFrame GameLoop o bucle principal     Llama a la función Update y Draw. Antes: setT...
Uso de requestAnimationFrame this.loop = function () {             this.update();             this.draw();             gam...
Pintando nuestro juego   Función “Draw” llamada desde el bucle principal.  this.draw = function () {              this.can...
Canvas buffer   Canvas oculto.   Lo copiamos al Canvas visible.   Evita la sensación de flickering (parpadeo).   this.buff...
Events && keyHandlers  window.addEventListener(keydown, doKeyDown, true);          function doKeyDown(evt) {              ...
Otros eventos
Animando Sprites  http://www.w3schools.com/html5/canvas_drawimage.asp      game.bufferCanvasCtx.drawImage(                ...
Sonidos  var audio = document.createElement("audio");   //también sirve new Audio();  audio.oncanplaythrought=function(){ ...
Video en HTML5    <video loop controls id="thevideo" width="320" height="240" preload="auto">            <source src="muir...
Video con canal Alpha   function processFrame() {       buffer.drawImage(video, 0, 0);       var image = buffer.getImageDa...
Librerías 3D       WebGL:                three.js http://mrdoob.github.com/three.js/       Otras:                WaveJS ht...
PROJECT PROMETHEUS     http://www.projectprometheus.com/trainingcenter/
THE HUNGER GAMES
Preguntas / Dudas / Sugerencias              #htmltour        http://sh4wn.net/htmltour/demos_html5.zip
Upcoming SlideShare
Loading in …5
×

HTML Tour - Programación de Videojuegos HTML5

3,397 views
3,248 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,397
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
61
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×