Flipping an image

Buggi

Hey there!

I'm developing a platformer for which I'm using png's to display the character in different ways. When he's moving to the right I want him facing right and when moving to the left, left. I have drawn the frames for the animation and they're all turned to the right by default.

Rather than making a corresponding flipped image for each of the frames, I would prefer to somehow flip the image in the code to make the character turn the other way. Is this possible? If so- how?

Chrisir

scale(-1,0);

Buggi

Here's what I did.

if (this.flipped)
    scale(-1,0);

image(this.active.currentImage(), x, canvasHeight * scl - y - h, w, h);

Unfortunately, without an error message, the character just disappears, until it's no longer flipped :/

koogs

you probably need a translate as well to move it back onto the screen.

Buggi

Yes! That's it. I didn't consider the fact that scale() not only inverts the size but also the position. This is what I came up with:

if (this.flipped) {
    scale(-1, 1);
    image(this.active.currentImage(), -1 * x - w, canvasHeight * scl - y - h, w, h);
} else
    image(this.active.currentImage(), x, canvasHeight * scl - y - h, w, h);

Thanks a lot to both of you!