Voltear un sprite en lienzo

Question

Estoy usando lienzo para mostrar algunos sprites, y tengo que voltear uno horizontalmente (de modo que mire hacia la izquierda o hacia la derecha). Sin embargo, no puedo ver ningún método para hacerlo con drawImage.

Aquí está mi código relevante:

this.idleSprite = new Image(); 
this.idleSprite.src = "/game/images/idleSprite.png"; 
this.idleSprite.frameWidth = 28; 
this.idleSprite.frameHeight = 40; 
this.idleSprite.frames = 12; 
this.idleSprite.frameCount = 0; 

this.draw = function() { 
     if(this.state == "idle") { 
      c.drawImage(this.idleSprite, this.idleSprite.frameWidth * this.idleSprite.frameCount, 0, this.idleSprite.frameWidth, this.idleSprite.frameHeight, this.xpos, this.ypos, this.idleSprite.frameWidth, this.idleSprite.frameHeight); 
      if(this.idleSprite.frameCount < this.idleSprite.frames - 1) { this.idleSprite.frameCount++; } else { this.idleSprite.frameCount = 0; } 
     } else if(this.state == "running") { 
      c.drawImage(this.runningSprite, this.runningSprite.frameWidth * this.runningSprite.frameCount, 0, this.runningSprite.frameWidth, this.runningSprite.frameHeight, this.xpos, this.ypos, this.runningSprite.frameWidth, this.runningSprite.frameHeight); 
      if(this.runningSprite.frameCount < this.runningSprite.frames - 1) { this.runningSprite.frameCount++; } else { this.runningSprite.frameCount = 0; } 
     } 
    } 

Como se puede ver, estoy usando el método drawImage dibujar mis sprites a la lona. La única forma de voltear un objeto que puedo ver es voltear/rotar todo el lienzo, que no es lo que quiero hacer.

¿Hay alguna manera de hacerlo? ¿O tendré que hacer un nuevo sprite mirando hacia el otro lado y usar eso?

Answer 1

Puede transformar el contexto de dibujo de lienzo sin voltear todo el lienzo.

c.save(); 
c.scale(-1, 1); 

reflejarán el contexto. Dibuje su imagen, luego

c.restore(); 

y puede dibujar normalmente de nuevo. Para obtener más información, consulte https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations

Answer 2

Mientras Gaurav ha mostrado la forma técnica para voltear un sprite en el lienzo ...

No hacer esto para su juego.

En lugar de hacer una segunda imagen (o hacer que su imagen actual sea más grande) que es una versión volteada de la hoja spite. La diferencia de rendimiento entre "voltear el contexto y dibujar una imagen" frente a "solo dibujar una imagen" puede ser enorme. En Opera y Safari, al girar el lienzo, el dibujo es diez veces más lento y en Chrome es dos veces más lento. Ver this jsPerf para un ejemplo.

El pre-cálculo de sus sprites invertidos siempre será más rápido, y en los juegos el rendimiento del canvas realmente importa.

Answer 3

Utilice esta opción para voltear la hoja de sprites http://flipapicture.com/