Why does flipping on y axis (using y scaling) cause a shift up in location?

[CromfCromf]

Hello, I'm currently on Week 1 of an online course called GD50 where you recreate some simple games in Love2D.

This week we're recreating 'Flappy Bird', which involves flying through pairs of pipes: one hanging down from the sky, and one coming up from the ground.

The original pipe image is of one coming up out of the ground. To get our pipes to come down from the sky, we set y-scaling to '-1', but we also, apparently, need to shift the pipe down by its own height. I don't understand why this is necessary.

function Pipe:render()
love.graphics.draw(PIPE_IMAGE, self.x,
(self.orientation == 'top' and self.y + PIPE_HEIGHT or self.y),
0, 1, self.orientation == 'top' and -1 or 1)
end

So, to be clear, all I want to do is to flip a pipe, while not moving it: I want it to be drawn up from the point it was previously drawn down from, so that if you first drew the pipe as normal and then inverted it and drew it again, the two would meet in the middle.

Does anyone know why this shift occurs?

Thank you!

[ivan]

Welcome to the forums.
It happens because Love2D draws textures with their upper left corner as the origin.
So if you draw an image at 0,0 its upper left corner will be at 0,0.
You need to offset your images by half the height/width if you want to flip them around the center.

[raidho36]

Alternatively, you can just make a separate sprite for each orientation, which will actually look better if you have lighting effects and whatnot.

[pgimeno]

Scaling also has a centre. The default origin of the image is (0, 0) which is the top left, therefore when you scale, the scaling operation takes the top left as the scaling centre. You can change the centre by manipulating the ox, oy parameters in love.draw. Setting them to the bottom left of the image (by setting x=0 and y=height) will also solve your problem. Setting them to the centre of the image will make the scaling relative to the centre, which is more intuitive, but will also make it necessary to use that as the positioning origin of your image, which may be less comfortable.