javascript - Voltear un sprite en lienzo

image canvas

Question

Estoy usando lienzo para mostrar algunos sprites, y necesito voltear uno horizontalmente (de modo que quede hacia la izquierda o hacia la derecha). Sin embargo, no puedo ver ningún método para hacer eso 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 puedes ver, estoy usando el método drawImage para dibujar mis sprites en el lienzo. La única forma de voltear un sprite que puedo ver es voltear / rotar todo el lienzo, que no es lo que quiero hacer.

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

Answer 1

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

No hagas esto por tu juego.

En su lugar, cree una segunda imagen (o haga que su imagen actual sea más grande) que es una versión invertida de la hoja de pesar. La diferencia de rendimiento entre "cambiar el contexto y dibujar una imagen" frente a "simplemente dibujar una imagen" puede ser enorme. En Opera y Safari, voltear los resultados del lienzo en un dibujo diez veces más lento, y en Chrome es dos veces más lento. Vea este jsPerf para un ejemplo.

Pre-computar tus sprites volteados siempre será más rápido, y en el lienzo de los juegos realmente importa.

Answer 2

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

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

reflejará el contexto. Dibuja tu imagen, entonces

c.restore();

Y puedes 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 3

Usa esto para voltear tu hoja de sprites http://flipapicture.com/