[Solved] Animation plays differently when mirroring and when not

[AlexCalv]

Having a weird problem, this video might help visualize it.
https://love2d.org/imgmirrur/48kJWdy.mp4
Basically the draw code I'm using for my left facing animation works exactly how it should but when I draw the animation for the right side it looks..off. My player's head doesn't seem to move with the body even though it's all connected in the png file, there's also a weird offset happening when the run animation is playing but only for the non-mirrored(right facing) animation.

Code: Select all

function player.draw()
	local playerScaling = 2
	for i,v in ipairs(player) do
		love.graphics.setColor(1, 1, 1)
		--width is used here to calculate offset when mirroring texture
		local plrWidth = v.animationTable[math.floor(v.current_frame)]:getWidth() * playerScaling
		local plrHeight = v.animationTable[math.floor(v.current_frame)]:getHeight() * playerScaling
		v.width, v.height = plrWidth, plrHeight

		--flips player's texture when switching directions
		if v.dir == "right" then
			love.graphics.draw(v.animationTable[math.floor(v.current_frame)], v.x, v.y, 0, playerScaling, playerScaling, 0, 0)
		elseif v.dir == "left" then
			love.graphics.draw(v.animationTable[math.floor(v.current_frame)], v.x, v.y, 0, -playerScaling, playerScaling, plrWidth / playerScaling, 0)
		end
	end
end

plr.animationTable is just a table of different frames.

Code: Select all

	player_run = {}
		player_run[1] = love.graphics.newImage("resources/textures/player/run/1.png")
		player_run[2] = love.graphics.newImage("resources/textures/player/run/2.png")
		player_run[3] = love.graphics.newImage("resources/textures/player/run/3.png")
		player_run[4] = love.graphics.newImage("resources/textures/player/run/4.png")
		player_run[5] = love.graphics.newImage("resources/textures/player/run/5.png")
		player_run[6] = love.graphics.newImage("resources/textures/player/run/6.png")
		player_run[7] = love.graphics.newImage("resources/textures/player/run/7.png")
		player_run[8] = love.graphics.newImage("resources/textures/player/run/8.png")

-Edit: It seems like specifically frame 6 of the run animation is super offset but only for the right facing draw

[GVovkiv]

My guess is that it's related to "plrWidth / playerScaling"

[AlexCalv]

My guess is that it's related to "plrWidth / playerScaling"

Removing that makes the left facing direction consistent with the right facing direction's problems. Do you have any idea how I could fix the right side?

[GVovkiv]

My guess is that it's related to "plrWidth / playerScaling"

Removing that makes the left facing direction consistent with the right facing direction's problems. Do you have any idea how I could fix the right side?

Welp, from:

Code: Select all

local plrWidth = v.animationTable[math.floor(v.current_frame)]:getWidth() * playerScaling
	local plrHeight = v.animationTable[math.floor(v.current_frame)]:getHeight() * playerScaling

Your current width and height depends on image size
From gif (maybe .love file?) i can tell, that every image have different width, so that may cause problem
Make sure that every image have equal width, e.g, only 100

[AlexCalv]

My guess is that it's related to "plrWidth / playerScaling"

Removing that makes the left facing direction consistent with the right facing direction's problems. Do you have any idea how I could fix the right side?

Welp, from:

Code: Select all

local plrWidth = v.animationTable[math.floor(v.current_frame)]:getWidth() * playerScaling
	local plrHeight = v.animationTable[math.floor(v.current_frame)]:getHeight() * playerScaling

Your current width and height depends on image size
From gif (maybe .love file?) i can tell, that every image have different width, so that may cause problem
Make sure that every image have equal width, e.g, only 100

Hm.. I figured the way I'm doing it would be an easy way to adjust the player's hitbox automatically if they crouch or jump for example. I'll keep toying with it for the time being. I just think it's strange that the mirrored(left) draw works better than the unaltered one(right).

[ReFreezed]

The origin arguments shouldn't be scaled. plrWidth/playerScaling should probably just be plrWidth. But here's some advice: instead of drawing the sprite from the top left/right corner, draw it from the middle (and from the feet because things stand on the ground, and sprites are probably usually going to be aligned to the ground). So, something like this:

Code: Select all

local scaleX = (isFacingLeft and -1 or 1)
love.graphics.draw(image, x,y, 0, scaleX,1, image:getWidth()/2,image:getHeight())

This way, doing scaling and rotation and whatever else is very easy because there's no difference in how left-facing and right-facing objects render.

[AlexCalv]

The origin arguments shouldn't be scaled. plrWidth/playerScaling should probably just be plrWidth. But here's some advice: instead of drawing the sprite from the top left/right corner, draw it from the middle (and from the feet because things stand on the ground, and sprites are probably usually going to be aligned to the ground). So, something like this:

Code: Select all

local scaleX = (isFacingLeft and -1 or 1)
love.graphics.draw(image, x,y, 0, scaleX,1, image:getWidth()/2,image:getHeight())

This way, doing scaling and rotation and whatever else is very easy because there's no difference in how left-facing and right-facing objects render.

Thank you! This solved my issue.