Questions about canvases with transformations

[Gunroar:Cannon()]

I'm trying to add resizable screens with push.lua/tlfres and want to know, since anything I draw to a canvas (e.g.minimap, controls of paddy.lua, etc) seem to come off wrong , is there anything I'm missing about using graphics functions (like scale and translate) when it comes to canvases?

Do the transformations applied to the original canvas affect another canvas. Does it affect it twice?

Code: Select all

draw()
push:start()--scale, transform, etc
...
drawsStuff()
...
love.graphics.setCanvas(anotherCanvas)
drawStuff2()
love.graphics.setCanvas()
...
push:end()--stop transforms

Do the effects apply twice? Should I cancel push then start it again after I draw the canvas?

[MrFariator]

If you take a gander at the wiki for a function like love.graphics.translate, you'll find the following lines:

When this function is called with two numbers, dx, and dy, all the following drawing operations take effect as if their x and y coordinates were x+dx and y+dy.
Scale and translate are not commutative operations, therefore, calling them in different orders will change the outcome.
This change lasts until love.draw() exits or else a love.graphics.pop reverts to a previous love.graphics.push.

So when you're changing the draw state with functions like this, things will persist until you pop or revert the changes somehow. Switching canvases does not reset anything, in my experience. I have not used the push library, but it's safe to assume you should reset the draw state for each of those canvases to prevent any issues like you're experiencing.

[Gunroar:Cannon()]

Okay, thanks, I just wasn't sure wether there was an exception or something similar. I cancel the "push" because the effect would apply twice if I don't, right?
And should I activate the effects when I finish drawing on the 'canvas2" and want to render the actual "canvas2"

[pgimeno]

Push uses a canvas internally. Using love.graphics.setCanvas() between push:start() and push:end() is going to mess with it. Instead, save the canvas before changing it and restore it when done:

Code: Select all

push:start()--scale, transform, etc
...
drawsStuff()
...
local saveCanvas = love.graphics.getCanvas()
love.graphics.setCanvas(anotherCanvas)
drawStuff2()
love.graphics.setCanvas(saveCanvas)
...
push:end()--stop transforms

[Gunroar:Cannon()]

I understand what you did but don't really understand how that fixes the problem I will follow it to see if it fixes it. thnx.

[Gunroar:Cannon()]

Oh, yes. It seems that technically I already do that with love.graphics.setCanvas() to set it back to the original after drawStuff2, so I think it won't work, or am I missing something in the logic? Or do I need another way?

[knorke]

(I see this thread is from 2019 but I just tripped over a similiar problem with canvases and TLFres and the thread does not seem fully solved)

TLFres uses a translate-function:

function TLfres.beginRendering(width, height, centered)
lgTranslate((w - width * scale) * 0.5, (h - height * scale) * 0.5)

That translate is still active when drawing into the canvases, but we do not want that. The actual screen might get letterbox-bars from TLFres so coordinates need to shift. But the coordinates of the canvas do not need to shift: (0,0) must still be at top-left.
Here is how I solved it:

Code: Select all

function showView (view,x,y)
	LG.setColor(1, 1, 1, 1)	
	LG.setLineWidth (2)
	LG.rectangle('line', x, y, viewWidth, viewHeight) --frame
	LG.setBlendMode("alpha", "premultiplied")
	LG.draw (view,x,y)
	LG.setBlendMode("alpha")
end

Code: Select all

function drawView (view)
	LG.push () --THE FIX
	LG.origin () --THE FIX
	LG.setCanvas(view)
	--white testcircles to mark top-left and bottom-right corner of view-window
	LG.setColor(1, 1, 1, 1)	
	LG.circle("fill", 0,0, 20, 6)
	LG.circle("fill", viewWidth,viewHeight, 20, 6)
	--drawing actual content of view-window
	LG.setColor(0, 0, 1, 1)
	LG.circle("fill", math.random(0,viewWidth), math.random(0,viewHeight), 20, 5)
	love.graphics.setColor(1, 0, 0, 1)
	LG.circle("fill", math.random(0,viewWidth), math.random(0,viewHeight), 20, 5)
	LG.pop ()  --THE FIX
	LG.setCanvas()
end

Things looked okay as in 1.png
However, when I enabled TLFrs, the graphics inside the canvas were wrong as in 2.png
love.graphics.origin() undoes the translate of TLFres. But we still want that translate for drawing other stuff so it gets wrapped into push&pop. Note the lines with --FIX comment

[Gunroar:Cannon()]

Nice fix and explaination. Though I think I figured it out (don't remember how or if I really did) this might have made me fix it faster. I bet what you and pgimeno said were correct but I didn't understand why at the time.

(I see this thread is from 2019...

[zorg]

Last message was from 2021 and not 2019 so that's not /that/ bad... also, TLFres is kinda outdated (and unmaintained) anyway.

[Gunroar:Cannon()]

Last message was from 2021 and not 2019 so that's not /that/ bad... also, TLFres is kinda outdated (and unmaintained) anyway.

I think knorke was exaggerating , and yeah, I moved to resolution solution. TLFres is pretty old.