Flipping an image

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?

Tagged:

Answers

  • scale(-1,0);

  • edited September 2017

    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 :/

  • Answer ✓

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

  • edited September 2017

    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!

Sign In or Register to comment.