Page 1 of 1

[Solved] Animation plays differently when mirroring and when not

Posted: Sun Aug 08, 2021 5:54 pm
by 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

Re: Animation plays differently when mirroring and when not

Posted: Sun Aug 08, 2021 6:18 pm
by GVovkiv
My guess is that it's related to "plrWidth / playerScaling"

Re: Animation plays differently when mirroring and when not

Posted: Sun Aug 08, 2021 6:28 pm
by AlexCalv
GVovkiv wrote: Sun Aug 08, 2021 6:18 pm 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?

Re: Animation plays differently when mirroring and when not

Posted: Sun Aug 08, 2021 6:52 pm
by GVovkiv
AlexCalv wrote: Sun Aug 08, 2021 6:28 pm
GVovkiv wrote: Sun Aug 08, 2021 6:18 pm 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

Re: Animation plays differently when mirroring and when not

Posted: Sun Aug 08, 2021 7:10 pm
by AlexCalv
GVovkiv wrote: Sun Aug 08, 2021 6:52 pm
AlexCalv wrote: Sun Aug 08, 2021 6:28 pm
GVovkiv wrote: Sun Aug 08, 2021 6:18 pm 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).

Re: Animation plays differently when mirroring and when not

Posted: Sun Aug 08, 2021 7:40 pm
by 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.

Re: Animation plays differently when mirroring and when not

Posted: Wed Aug 11, 2021 3:00 pm
by AlexCalv
ReFreezed wrote: Sun Aug 08, 2021 7:40 pm 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.