[SOLVED] Problem with canvas + camera drawing

[unixfreak]

Hello... strange issue that's been baffling me and i have tried everything i can think of, but still not found why this is happening.

Basically, i have an arena where the player can move around the screen.
An image is tiled over the arena for the floor.

My problem is, if i draw it directly to the screen, it draws the tiles in the correct place (but obviously overlaps the edges).
If i use a canvas, the positioning is off, and moves around (which i cannot understand why).

I have this small test/demo to show the problem:

Press "c" to see the problem when canvas is enabled. Also, press "w,a,s,d" to move the player.

out.love

(4.71 KiB) Downloaded 100 times

[unixfreak]

Well i changed it to draw as a quad, in arena:draw()

Code: Select all

function arena:draw()
	local tile = arena.textures["floor"]
	tile:setWrap("repeat","repeat")
	love.graphics.setColor(255,255,255,255)
	

	local quad = love.graphics.newQuad( arena.x,arena.y,arena.width,arena.height, tile:getDimensions() )
	love.graphics.draw(tile, quad, arena.x,arena.y)
	
	
	love.graphics.setColor(255,255,255,255)
	love.graphics.draw(arena.canvas,arena.x,arena.y)

	
	love.graphics.setColor(255,255,0,255)
	love.graphics.rectangle("line",arena.x,arena.y,arena.width,arena.height)
end

Although, the arena size will be at least 2000x2000 (probably much larger). Which seems inefficient when drawing it? Will that affect performance drawing a massive quad where only a small portion of it is visible?

[pgimeno]

It seems to me that the problem is that the camera transform applies to drawing the stuff on the canvas and then again to the drawing of the canvas on the screen.

Could you maybe use a scissor instead, to avoid drawing out of the border? It will probably be faster than a canvas.

[Ulydev]

Wow, you got some neat parallax scrolling!

[unixfreak]

It seems to me that the problem is that the camera transform applies to drawing the stuff on the canvas and then again to the drawing of the canvas on the screen.

Could you maybe use a scissor instead, to avoid drawing out of the border? It will probably be faster than a canvas.

How can i do that? I've had a look at love.graphics.setScissor( ... ) but it only seems to "draw" the tiles when they are at the top left of the screen, assuming it's another issue caused by the transform of the camera?

eg; the arena is at x0 / y0 but it "scissors" things at x0/y0 outside of camera coordinates.

[unixfreak]

Okay, i figured out a solution to the canvas drawing, i simply had to unset my camera before drawing to the canvas, then set the camera again just before drawing the actual canvas. Solved i guess.

[pgimeno]

Could you maybe use a scissor instead, to avoid drawing out of the border? It will probably be faster than a canvas.

How can i do that? I've had a look at love.graphics.setScissor( ... ) but it only seems to "draw" the tiles when they are at the top left of the screen, assuming it's another issue caused by the transform of the camera?

Well, I assume that this is the problem to solve:

My problem is, if i draw it directly to the screen, it draws the tiles in the correct place (but obviously overlaps the edges).

With the scissor, you draw the same, but the scissor will prevent drawing anything out of the scissor rectangle, so the part that goes out of the edges won't be visible. You would set it up by calling love.graphics.setScissor(your view rectangle) before drawing the tiles.