Multiple/Nested Transform

[DoubIeshotgun]

Hi there, I trying to group sprites together and make them move, scale and rotate together by using transformation. But It's controls horribly when you rotate the whole group then move an individual part, I know why tho.
When the whole group transformation is rotated, the individual parts move along with the rotation.

So here is the code:

Code: Select all

function love.load()
    partSelect=1
    partName={"Whole","Blue","Red"}
    blue = love.graphics.newImage("blue.png")
    red = love.graphics.newImage("red.png")
    pos={}
    transform = love.math.newTransform(0,0)
    pos[1]={
		x=0,
		y=0,
		r=0
	}
	pos[2]={
		x=0,
		y=0,
		r=0
	}
	pos[3]={
		x=0,
		y=0,
		r=0
	}
end 

function love.mousemoved(x, y, dx, dy, istouch )
	if love.mouse.isDown(1) then
		pos[partSelect].x=pos[partSelect].x+dx
		pos[partSelect].y=pos[partSelect].y+dy
	end
end

function love.wheelmoved(x, y)
	pos[partSelect].r=pos[partSelect].r+y*5
end

function love.keypressed( key)
	if key=="space" then 
		partSelect=partSelect+1
		if partSelect>3 then 
			partSelect=1
		end 
	end
end

function love.draw() 
	
	local x=0+pos[1].x
	local y=0+pos[1].y

	transform:translate(x+100,y+50)
	transform:rotate(math.rad(pos[1].r))
	transform:translate(-(x+100),-(y+50))
	
	love.graphics.applyTransform( transform ) 
	
	transform:reset()
	
	x=0+pos[1].x+pos[3].x
	y=0+pos[1].y+pos[3].y

	transform:translate(x+50,y+50)
	transform:rotate(math.rad(pos[3].r))
	transform:translate(-(x+50),-(y+50))
	
	love.graphics.applyTransform( transform ) 
	
	love.graphics.draw(blue,x,y)
	
	transform:reset()
	
	x=0+pos[1].x
	y=0+pos[1].y

	transform:translate(x+100,y+50)
	transform:rotate(math.rad(pos[1].r))
	transform:translate(-(x+100),-(y+50))
	
	love.graphics.applyTransform( transform ) 
	
	x=100+pos[1].x+pos[2].x
	y=0+pos[1].y+pos[2].y

	transform:translate(x+50,y+50)
	transform:rotate(math.rad(pos[2].r))
	transform:translate(-(x+50),-(y+50))
	
	love.graphics.replaceTransform( transform ) 
	
	love.graphics.draw(red,x,y)
		
    transform:reset()
    
    love.graphics.origin()
    
    
	
    love.graphics.print(partName[partSelect],30,30)
    love.graphics.print("Drag to move\nMousewheel to rotate\nSpace to switch parts",400,30)
    
end

And the source.

multipleTransformation.love

(1.41 KiB) Downloaded 42 times

[RNavega]

On my phone, haven't tested it.

From reading your example, you're polluting the global transform with love.graphics.applyTransform().

First you apply the group transform, then apply the blue transform on top of that and draw blue, then apply the red transform on top of that and draw red.
So red's transform will be a weird mix of all three.

The love.graphics.draw() function has a variant that takes in the drawable and a Transform object, instead of individual coordinates. So my suggestion: apply the group transform to the global graphics transform, then draw each piece with that variant.