Capovolgere uno sprite su tela

Question

Sto usando la tela per visualizzare alcuni sprite, e ho bisogno di capovolgerne uno in orizzontale (quindi rivolto verso sinistra o destra). Non riesco a vedere alcun metodo per farlo con drawImage, tuttavia.

Ecco il mio codice rilevante:

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; } 
     } 
    } 

Come potete vedere, sto usando il metodo drawImage per disegnare i miei sprite alla tela. L'unico modo per capovolgere uno sprite che posso vedere è quello di capovolgere/ruotare l'intero canvas, che non è quello che voglio fare.

C'è un modo per farlo? O dovrò fare un nuovo sprite rivolto verso l'altro modo e usarlo?

Answer 1

È possibile trasformare il contesto del disegno su tela senza capovolgere l'intero quadro.

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

rispecchierà il contesto. Disegna la tua immagine, quindi

c.restore(); 

e puoi disegnare di nuovo normalmente. Per ulteriori informazioni, vedere https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations

Answer 2

Mentre Gaurav ha indicato la strada tecnica per capovolgere uno sprite in tela ...

non facciamo questo per il vostro gioco.

Invece fare una seconda immagine (o ingrandire l'immagine corrente) che è una versione capovolta del foglio di spite. La differenza di prestazioni tra "capovolgere il contesto e disegnare un'immagine" o "semplicemente disegnare un'immagine" può essere enorme. In Opera e Safari capovolgendo i risultati della tela nel disegno è dieci volte più lento e in Chrome è due volte più lento. Vedere this jsPerf per un esempio.

Pre-calcolo degli sprite capovolti sarà sempre più veloce, e nelle prestazioni della tela di gioco è davvero importante.

Answer 3

Utilizzare questa opzione per capovolgere il vostro foglio sprite http://flipapicture.com/