You are on page 1of 13

canvas sprites

Vamos a utilizar el archivo PNG siguientes como fuente de nuestra secuencia de sprites: Secuencia sprites PNG

Estructura HTML5
<! DOCTYPE html> < cabeza > < meta charset = "UTF-8" /> < título > Animación Sprites en HTML5 Canvas </ titulo > </ cabeza > < cuerpo > < lona Identificación = "myCanvas" ancho = "100" altura= "100" > <- Introduce contenido de reserva aquí -> Lo sentimos, su navegador no soporta la tecnología de lona </ canvas > < script de > / / Guión va aquí </ escritura > </ cuerpo > </ HTML >

Vamos a crear un lienzo para mostrar nuestros sprites y establecer la anchura, la altura de la tela de 100px. Por favor, tenga en cuenta que, la anchura y la altura de cada fotograma de la secuencia de sprites PNG es de 100 píxeles:

si (== currentFrame frames) { currentFrame = 0. Altura = 100. </ Script> Como hemos visto. 0.clearRect (0.drawImage (img. la primera cosa que hacemos en la sección JavaScript es definir las variables:  Ancho: El ancho de la tela. sy. 1 Parámetro Descripción .drawImage (Imagen. ctx = canvas.  currentFrame: El marco actual de los sprites animados. sx. ancho. Para animar el sprite.  lienzo: Para acceder al elemento de contexto de representación. altura. canvas = document.getElementById ( "myCanvas" ). echemos un vistazo a la sección de JavaScript. 0. A continuación se muestra la sintaxis y los parámetros de drawImage (): context.  Altura: La altura de la lona. var = sorteo función () { ctx. En este caso. 0. Y eso es todo por la estructura HTML! Ahora. image = nueva imagen () image.  Imagen: Una variable que contiene nuestro archivo PNG. } } setInterval (sorteo. ancho.getContext ( "2d" ).  ctx: Render del contexto lienzo en formato 2D. swidth. alto). ancho. JavaScript <script> var width = 100. 0. lo nombramos como ― myCanvas ‖.  Marcos: Los marcos totales de los sprites animados. 100). } más { currentFrame + +. sheight. alto). necesitamos simplemente mostrar cada frame del sprite con drawImage () método.Además. El drawImage () es un método que permite sacar la imagen o el vídeo en el lienzo. alto).src = 'sprite.png' . * currentFrame altura. recuerde que debe asignar un identificador para nuestro elemento canvas. currentFrame = 0. anchura. x. ctx. marcos = 4. y.

El ancho de la imagen a utilizar (estirar o reducir la imagen) Parámetro opcional. incrementar la currentFrame. A continuación se muestra la sintaxis y los parámetros de drawImage (): context. Para animar el sprite. swidth. a continuación. Como hemos visto. currentFrame: El marco actual de los sprites animados. Por último. El ancho de la imagen a utilizar (estirar o reducir la imagen) altura: Parámetro opcional. Imagen: Una variable que contiene nuestro archivo PNG. utilizamos ― setInterval () ‖para ejecutar la función draw cada 100 milisegundos. El currentFrame se utiliza para decidir qué marco del sprite debemos mostrar en el lienzo a través del método drawImage (). incrementar la currentFrame.drawImage (img. La altura de la imagen a utilizar (estirar o reducir la imagen) A continuación. La coordenada x donde empezar recortes sy: Parámetro opcional. alto). ancho. lienzo. El drawImage () es un método que permite sacar la imagen o el vídeo en el lienzo. La altura de la imagen a utilizar (estirar o reducir la imagen) A continuación. o elemento de vídeo para utilizar sx: Parámetro opcional. necesitamos simplemente mostrar cada frame del sprite con drawImage () método. La coordenada y por dónde empezar el recorte swidth: Parámetro opcional. Altura: La altura de la lona.img sx sy swidth sheight x y ancho altura Especifica la imagen. o elemento de vídeo para utilizar Parámetro opcional. La anchura de la imagen recortada sheight: Parámetro opcional. ctx: Render del contexto lienzo en formato 2D. La coordenada x donde empezar recortes Parámetro opcional. lienzo: Para acceder al elemento de contexto de representación. sy. lienzo. La altura de la imagen recortada x: La coordenada x donde colocar la imagen en el lienzo y: La coordenada y dónde colocar la imagen en el lienzo ancho: Parámetro opcional. sx. La coordenada y por dónde empezar el recorte Parámetro opcional. Parámetro Descripción img: Especifica la imagen. sheight. Marcos: Los marcos totales de los sprites animados. a continuación. your browser doesn‘t support canvas technology </canvas> <script> var width = 100. . La altura de la imagen recortada La coordenada x donde colocar la imagen en el lienzo La coordenada y dónde colocar la imagen en el lienzo Parámetro opcional. se escribe una instrucción condicional para comprobar si el currentFrame es menos de cuadros en total. y. la primera cosa que hacemos en la sección JavaScript es definir las variables: Ancho: El ancho de la tela. x. El currentFrame se utiliza para decidir qué marco del sprite debemos mostrar en el lienzo a través del método drawImage (). utilizamos ‖ setInterval () ―para ejecutar la función draw cada 100 milisegundos. La anchura de la imagen recortada Parámetro opcional. Eso es todo! Guarde el documento y ejecutarlo en el navegador con el apoyo! // ]]> ——————— ARCHIVO FINAL ————— <!DOCTYPE html> <head> <title>Demo: Animating Sprites In HTML5 Canvas</title> </head> <body> <canvas id=‖myCanvas‖ width=‖100″ height=‖100″> <!– Insert fallback content here –> Sorry. Por último. se escribe una instrucción condicional para comprobar si el currentFrame es menos de cuadros en total.

currentFrame = 0. marcos[i]. ctx = canvas.src=”marco”+i+”.src = ‗sprite. } // Cargar fotos 7 en total for (i=0.ancho. width. height). width.getContext(―2d‖). width. 0. } </style> 2. // Cargar Marcos 6 en total for (i=0.i<=7. Script colocar segun el codigo—.i++){ marcos[i]= new Image(). image = new Image() image. var marcos = [].alto. * Las imagenes de las fotos se pueden descargar y dejar con el nombre de fotoO. height * currentFrame.no COPIAR y PEGAR no FUNCIONARA <script> var cv . } #botones td { background: #0B75AF. 0.i++){ fotos[i]= new Image(). var indiceMarcos=0. frames = 4. <style> #botones { width: 500. var indiceFotos=0. ctx.png Pasos: 1. canvas = document. ctx . var fotos=[].height = 100. 0. 100).png‘.png”. 0.i<=6.getElementById(―myCanvas‖).clearRect(0. } } setInterval(draw. color: #e9f8ff. if (currentFrame == frames) { currentFrame = 0. </script> </body> </html> galeria canvas Indicaciones: * Los marcos son de tipo png y estan en la pestaña Imagenes en canvas. height. text-align: center . height: 50. . } else { currentFrame++. Crear el documento y colocar el Estilo. var draw = function(){ ctx.png… foto7.drawImage(image. height).

Codigo de la TABLA Y CANVAS <table id=‖botones‖> <tr><td onclick=‖cambioFoto(-1)‖ >Foto Anterior</td><td onclick=‖cambioFoto(+1)‖>Foto Siguiente</td></tr> <tr><td onclick=‖cambioMarco(-1)‖ >Marco Anterior</td><td onclick=‖cambioMarco(+1)‖>Marco Siguiente</td></tr> </table> <canvas id=‖canvas‖ width=‖500″ height=‖500″></canvas> Imagenes sprites tarea 1 . indiceFotos = indiceFotos<0 ? fotos.drawImage(marcos[indiceMarcos].jpg”.0.length-1 : indiceMarcos. } function cambioMarco(cuantos){ // Primero repintar la foto de fondo indiceMarcos += cuantos.length ? 0 : indiceMarcos.length ? 0 : indiceFotos.ancho.height.length-1 : indiceFotos.src=”foto”+i+”.getContext(“2d”). } function inicio(){ cv=document.getElementById(“canvas”). } window.drawImage(fotos[indiceFotos]. ctx=cv.fotos[i].0. </script> 3. // al cambiar foto mostrar foto actual y marco ctx.width.ancho.0. cv. indiceMarcos = indiceMarcos<0 ? marcos. indiceFotos = indiceFotos>=fotos.width. ancho=cv.width = cv. // Trazar la primer foto y marco cambioMarco(0). alto=cv. } function cambioFoto(cuantos){ indiceFotos += cuantos. ctx. indiceMarcos = indiceMarcos>=marcos.0.alto).onload=inicio. cambioFoto(0).alto).

png… marco6.png.png) .png.marco1.marcos tipo PNG( marco0.marco2.

.

.

.

sprites 2 .

TAREA 1 LA IMAGEN DE FONDO PUEDE SER CUALQUIERA *** IMAGEN DE LUPA CODIGO DE ANIMACION DE LA LUPA .

srcX.drawImage(sprites. padding:0. } } function loop() { //lazo de llamada clearCanvas(). leftKey = false.0. nave_y = height – 85.srcY. downKey = false. topKey=false.nave_y.clearRect(0. } canvas { display:block. srcX = 233.83. . } </style> Segundo: colocar la etiqueta <canvas> en el <body> !!! Cuidado con las comillas <canvas id=‖canvas‖ width=‖500″ height=‖400″></canvas> Tercero: colocar el codigo <script> var canvas.nave_h. Colocarlo después de la etiqueta <head> <style> body { margin:0.156.233. //frame 1 } //nuevo else if (topKey) { nave_y -= 5. bottomKey = false.nave_h). nave_h = 85. upKey = false.400). if (rightKey == false || leftKey == false) { srcX = 10. function clearCanvas() { ctx. //frame 3 } ctx.nave_w. height = 400. sprites. //limpieza de canvas } function drawNave() { if (rightKey) { //posicion de frames a ver 0. srcX = 307.nave_w. nave_x = (width / 2) – 25. drawNave().Tarea 2 – Sprites Primero: Estilo de la etiqueta.500. //frame 0 } else if (leftKey) { nave_x -= 5. srcX = 10. srcX = 75. srcY = 0. border:1px dashed #ccc. //frame 2 } else if (bottomKey) { nave_y += 5.307 nave_x += 5. width = 500. rightKey = false. margin:20px auto 0. nave_w = 65. ctx. srcX = 155.nave_x.

context. false). keyDown. 0.src = ‗ships2. context.} function keyDown(e) { //al presionar las teclas if (e.png‘. else if (e.getContext(‘2d‘).floor(Math.rotate(0. }. else if (e. return { draw: function () { var r = Math.keyCode == 40) bottomKey = true. init: function () { canvas = document. 0. ctx = canvas. var s = ‗rgba(‗ + r + ‗. else if (e. document.floor(Math.‘ + g + ‗. 250).addEventListener(‗keyup‘.2 * Math.init.getElementById(‗canvas‘). window. } (function init() { //Inicio y carga de eventos canvas = document. var g = Math.getElementById(‗c‘).draw.random() * 255) + 70. })(). else if (e.getContext(‘2d‘). var b = Math. false). context = canvas. else if (e. else if (e.floor(Math. 1000/30). keyUp.keyCode == 37) leftKey = true.random() * 255) + 70.keyCode == 38) topKey = false. var context. setInterval(can.keyCode == 39) rightKey = true. 50). } function keyUp(e) { //al soltar las teclas if (e. 150. context.keyCode == 39) rightKey = false.keyCode == 40) bottomKey = false. sprites.translate(200. context.keyCode == 38) topKey = true.fillRect(10. 250). } } } (). document. sprites = new Image().fillStyle = s.keyCode == 37) leftKey = false.PI).5)‘. Ejercicios <!DOCTYPE html> <html> <script> var can = function () { var canvas. setInterval(loop.onload = can.random() * 255) + 70. </script> <body> <canvas id=‘c‘ width=‖470″ height=‖470″></canvas> </body> </html> .addEventListener(‗keydown‘.‘ + b + ‗.